Cara Bikin Floating Widget

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you how to make a Sticky Floating Footer bar in Blogger. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?

Remember: This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, popular posts, Instagram photos, and basically everything that you wish for. 

Step#1: Adding a New Widget: 

The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >> and name the widget as “My Sticky Gadget”. Now writing anything in the HTML body and once everything is down press “Save” button located at the end of the page.

Step#2: Installing a “Sticky” Plugin:

Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to Template >> Edit HTML >> and search for the ending </body> tag and just above it paste the following JavaScript code.

<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
   $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
   });
</script>

Step#3: Creating a Widget “Sticky” in Blogger:

After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "My Sticky Gadget". Therefore, in the template coding search for "My Sticky Gadget". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.

Note: To enable the search box click anywhere in the template editor and press"CTRL+F". Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
          </b:widget>

Now after finding the code as mentioned above, just replace it completely with the following coding.

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
            <b:includable id='main'>
<div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
</b:includable>
          </b:widget>

Remember: The ID of your widget should be unique. For example, if you are usingid='HTML32' in any of your widget then you cannot use the same ID for others.

All done: Once everything is done, press the "Save Template" button to finish the process.

Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users.

Bikin Title Tag SEO Friendly

TItle tag default bawaan blogspot sepertinya kurang begitu bagus di mata search engine. Hal ini tentunya dapat mengurangi nilai SEO blog kita. Kali ini akan saya share suatu tips seo untuk blogger blogspot tentang bagaimana merubah title tag di blogspot supaya lebih seo friendly.

Merubah Title Tag Blogspot

To the point aja. Saya asumsikan anda sudah berada di halaman edit template pada blogspot. Jika belum, silahkan login dan masuk ke menu template lalu klik edit HTML kemudian klik lanjutkan.

Sebelum lanjut, disini kita akan merubah title tag pada blogspot dengan menggunakan blogger conditional tag. Sehingga penggunaan title tag bisa lebih terfokus / tertarget sesuai dengan halaman yang kita inginkan. Berikut tutorial nya :

1. Cari kode <title><data:blog.pageTitle/></title>

2. Hapus kode tersebut, kemudian ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "index"'>
  <title><data:blog.pageTitle/></title>
<b:else/>
  <title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

3. Save Template.

Penggantian kode title tag diatas, akan merubah title tag yang ada di halaman selain index, yaitu halaman posting dan static page menjadi seperti ini :

Judul Post | Judul Blog

Dengan adanya perubahan pada title tag tersebut, maka halaman posting dan static_page blog anda akan lebih search engine friendly. Untuk selanjutnya, tinggal giliran sobat untuk mengoptimasi masing – masing artikel agar bisa tampil di halaman terdepan dari mesin pencari.

Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail sangatlah mudah. Artikel terkait ini banyak digunakan untuk membantu blogger yang kesulitan melakukan interlink antar artikel. Manfaat lain penggunaan artikel terkait ini adalah membantu meningkatkan pageview blog anda dengan terus menawarkan artikel-artikel yang lain ke pengunjung blog.

Untuk membuat artikel terkait tampil di bagian bawah postingan cukup lakukan prosedur sederhana berikut ini:

• Login ke akun blogger saudara]


• Buka menu TEMPLATE lalu pilih EDIT HTML


• Centang EXPAND TEMPLATE WIDGET


• Copy kode di bawah ini dan paste tepat di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333;  border-bottom:1px solid #333;  color:#333;  font-size:14px;  letter-spacing:0;  line-height:20px;  margin:0 0 5px;  padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

• Sekarang cari kode <data:post.body/> 


• Copy kode di bawah ini dan taruh tepat di bawah <data:post.body/> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related_posts' style='margin-top:35px;'>
<h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'>Artikel Terkait</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>relatpost();</script>
</ul>
</div>
</b:if>

• Jika lebih dari satu coba saja pasang satu persatu. Jika tidak terjadi perubahan, pindahkan ke kode <data:post.body/> lainnya. Sebaiknya mulai dari <data:post.body/> yang paling bawah.... 

Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:

Ok, terima kasih sudah mau mampir di blog saya ini. Mudah-mudahan artikel ini bisa membantu anda.

Sumber : http://trikmudahseo.blogspot.com/2012/10/cara-membuat-artikel-terkait-vertikal-dengan-thumbnail.html

Cara Bikin Breadcrumb

Cara Bikin Breadcrumb di Blogspot.

Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertianbreadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

• Seperti biasa anda harus login ke Blogger.



• Langsung tuju Edit HTML.


• Klik Expand Template Widget.


• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

  /* breadcrumbs
  
  ----------------------------------------------- */
  
  .breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:4px double rgb(224, 224, 224); font-weight:bold; font-family:Tahoma; height:auto;}
  
  .breadcrumbs a, 
  
  .breadcrumbs a:visited{color:#222; font-size:11px;  font-weight:bold; font-family:Tahoma; height:auto;}
  
  .breadcrumbs a:hover{color:blue;font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

• Setelah itu, cari kode seperti ini :

  <b:includable id='main' var='top'>




• Lalu ganti kode berikut <b:includable id='main' var='top'> dengan kode berikut:

  <b:includable id='breadcrumb' var='posts'>
  
  <b:if cond='data:blog.homepageUrl != data:blog.url'> 
  
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
  
  <div class='breadcrumbs'><span>Browse »
  
  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  
  </span> &#187; <span><data:blog.pageName/></span></div> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'> 
  
  <!-- breadcrumb for the post page --> 
  
  <b:loop values='data:posts' var='post'> 
  
  <b:if cond='data:post.labels'> 
  
  <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> 
  
  <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> 
  
  <b:loop values='data:post.labels' var='label'> 
  
  &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 
  
  </b:loop> 
  
  &#187; <span><data:post.title/></span> 
  
  </div> 
  
  <b:else/> 
  
  <div class='breadcrumbs'>
  
  <span>
  
  Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  
  </span> &#187; <span>Unlabelled</span> &#187;
  
   <span><data:post.title/></span></div> 
  
  </b:if> 
  
  </b:loop> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
  
  <!-- breadcrumb for the label archive page and search pages.. --> 
  
  <div class='breadcrumbs'> 
  
  <span> Browse » <a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>Archives for <data:blog.pageName/>
  
  </span> 
  
  </div> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;index&quot;'> 
  
  <div class='breadcrumbs'> 
  
  <b:if cond='data:blog.pageName == &quot;&quot;'> 
  
  <span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>All posts</span> 
  
  <b:else/> 
  
  <span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>Posts filed under <data:blog.pageName/>
  
  </span> 
  
  </b:if> 
  
  </div> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:includable> 
  
  <b:includable id='main' var='top'> 
  
  <b:include data='posts' name='breadcrumb'/>

  Simpan Template.

Menampilkan Homepage dengan halaman statis

Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka/homepage blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisional Blogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka.

Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Mengedit HTML

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>

dan tepat di bawahnya, letakkan kode ini:

</b:if>

sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</b:if>

Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.

Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.



Tutorial | Source: http://www.dte.web.id/2012/03/tip-membuat-halaman-muka-blog.html

ReadMore

2 Step to create nice Readmore.

1. Copas style-nya diatas kode:    ]]></b:skin>

/* readmore */

.jump-link  a {

        font-family: Arial, Helvetica, sans-serif;

font-size: 15px;

padding: 7px 12px;

background: -moz-linear-gradient(

top,

#fff 0%,

#222);

background: -webkit-gradient(

linear, left top, left bottom,

from(#fff),

to(#d7d8de));

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

-moz-box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);

-webkit-box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);

box-shadow:

0px 1px 2px rgba(000,000,000,0.5),

inset 0px 0px 1px rgba(255,255,255,0.5);



}

2. Copy kode HTML-nya,REPLACE kode  <data:post.body/> 

(mungkin yang kedua) dengan kode berikut:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

                          <data:post.body/>

                          <b:else/>

                          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

                            <data:post.body/>

                            <b:else/>

                            <div expr:id='&quot;summary&quot; + data:post.id'>

                              <data:post.body/>

                            </div>

                            <script type='text/javascript'>

                              createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

                            </script>

                            <span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'>

                              <a expr:href='data:post.url'>

                                Continue Reading...

                              </a>

                            </span>

                            <div style='clear: both;'/>

                          </b:if>

                        </b:if>





Lalu save.

Jika mau bikin kreasi tombol, tetap semangat dan terus berusaha sampai OK.

Terimakasih.

obat tetes tenggorokan

Khasiat: Menurunkan demam, flu, batuk dan penyakit yang disebabkan
virus, mengobati radang tenggorokan, sakit gigi, sariawan dan gangguan
bau mulut. Komposisi: minyak habbatusauda, zaitun dll.

rp 30.000,- isi 20 ml