Cara Membuat Artikel Terkait Melayang Di Blogger

Semua-Niche|Cara Membuat Artikel Terkait Melayang Di Blog, Artikel terkait memang sangat
berperan dalam blog anda,Terlebih lagi apabila anda
mempunyai artikel/postingan yang sama labelnya atau mungkin terkait dengan isi blog
Artikel terkait juga berguna bagi pengunjung agar pengunjung tersebut
tahu artikel apa saja yang terkait dengan artikel yang ia baca,Misalnya :
Anda membuat artikel seperti bagaimana cara membuat blog

Dengan begitu anda juga harus memberi tahu bagaimana cara mengatur blog dan sebagainya
blog dan sebagainya dan itu semua harus 1 label agar pengunjung tidak sibuk menyari artikel.
Mari kita pelajari bagaimana membuat Artikel Terkait Melayang Di Blogger

Baca Juga ! : Memodifikasi Template Anda (Blogger) Menjadi Seo Friendly

Langkah Pembuatan :

1.Masuk Ke Dalam Blog Anda

2.Klik Bagian HTML > EDIT HTML

3.Cari Kode]]></b:skin> dalam blog anda

4.Letakan Kode Dibawah Ini Diatas Kode Tersebut 

#kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:35px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}
.related-post h4 {font-size:150%;margin:0 0 .5em;}
.related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}
.related-post-style-2 li {margin-left:-35px;style:none;}
.related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}
.related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}
a.related-post-item-title {color :#333 !important;}
a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}
.related-post-style-2 .related-post-item-more {}

Silahkan anda atur kembali 
lebar,tinggi dan juga posisi widget .

5.Letakan Kode Dibawah Ini Diatas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
<script type='text/javascript'>
$(window).scroll(function(){
        if ($(this).scrollTop() &gt; 400) {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
        } else {
            $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});
        }
    });
  
$(document).ready(function(){
 var kislidingbox      = $(&#39;#kislidingbox&#39;);
    var closed      = $(&#39;#kislidingbox-close&#39;);
    var minimize    = $(&#39;#kislidingbox-minimize&#39;);
    var maximize    = $(&#39;#kislidingbox-maximize&#39;);
  
    maximize.hide();
  
    closed.click(function(){
        kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
        kislidingbox.fadeOut(&#39;slow&#39;);
    })
    minimize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass(&#39;hide&#39;);
        $(this).hide();
        minimize.show();
    })
});
</script>Catatan :

6.Selanjutnya,Letakan Kode Dibawah Ini Tepat Sesudah Kode :

<div class='post-footer'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: left;margin:14px 0 0 15px;'>Baca Juga Artikel Ini</span>
        <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxhVq4bJfYm38ECwVHwjFdrbCqK3FVM71Uu16DrzOJDwUuAGMmiHjJdpdnglEUrK7C_HMErAHaowMNV0dIrw8UD75Lbtpn9opVmO-puGo0ujVP4JVVYlhtH0GXOjM-atkSlFckxMtL/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXe7GGKW5nuxY6KjBzNru8A9mZBoLalknqnirA7fDBOFvPV2w8hpSYADtSSKcrCNN6NrI_jxn31vYz_I5ad4YrQLefgcpjJnKkJoKjK5w05_D0ve4Dvy7210HR62vhyphenhyphenGatgqkJHEl/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYkBb_4pIXii_GnUoXs1Va4WP7gw_73I13ZsDTc1eWD08O9N8LziH8B12O-D3gWYdsswv97xJLtVhNiLtgq7QhmzOMGybuc9HClrlXatbvjxoZgiaCcLk5aI1hdfZF8yFvNYrS7my9/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='sliding-tab'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,
      numPosts: 2,
      summaryLength: 35,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 45,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;sliding-tab&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle:2,
      callBack: function() {}
  };
  </script><script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>       
    </div>
</div>
</b:if>

Untuk Kode <div class='post-footer'> Biasanya ada lebih dari 1 letakan yang ke 2