cara membuat slide Rekomendasi artikel blog

sahabat kali ini anna coba posting yang mudah bisa juga untuk tambah info sesama blogger pemula.
ok sahabat dalam potingan kali ini cara membuat slide box rekomendasi artikel blog kita....
sahabat tertarik seperti apa ? lanjut ajja sahabat
 slide box rekomendasi ini sama juga seperti recent post,namun di sini menggunakan close dan terletak di samping blog.
lihat pada gambar di bawah ini atau yang di gunakan di blog anna ini.

selanjutnya sahabat pastikan log.in terlebih dahulu dan pastinya sudah log in ya
setelah  itu sahabat ediet html sahabat hus tentunya blog sahabat bukan sahabat heeeeee

setelah itu sahabat cari kode <div class='post-footer'>
tekan CTRL+F untuk mempermudah pencarian sahabat letakanya  kode di atas yang ke dua
yang paling bawa soalnya ada dua posisi kode tersebut.Lalu sahabat tempelkan atau copy paste code di bawah ini tepat di bawahnya code tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
    <div class='kislidingbox-title kislidingbox-www'>
      <span style='float: center;margin:12px 0 0 18px;'>.: 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/AVvXsEgj8OcO3_7D3aNJtRcd9v5IIwvJu4eW92stopjSvyxlA83RFXRvnMm5zOdtx69bnsa8xnxCyZQDO9URVPRNWbVgHbT4ga9c0_F6yoV_wI2EsTKJz954DIkpiw6J7BGs0yhqmIRzVfIL/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/AVvXsEieyv_GdBrHbpZdHyet_qOXoXdgcNRpZPr5tqE9wjvih4jPQYEAC1INOwgrCJ4LJyJqDlwJw85RmAzXnGHqZFY09awqXI7z2uo1oPN4DWN5jhfjp1jvCJ-pkxulvTJNYkDhBtCnQr_u/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/AVvXsEhz8fXIVhpxkpXU3ER8hJXF5FAZ9NxiuKn5BoyiEBi6Ix1z8grW_0eD8hDBKuNlzXSHeZ2MkA7j7CK33fhsXgVV2H_bS8k64eICvRqEku5FG6ozoIJwHXtt7e1gmJi3cLSB3DfFjohH/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>

sahabat bisa ganti sesuka sahabat.
selanjutnya cari kode </head> lau tempelkan kode di bawah ini

<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>

sahabat kode warna merah bila sudah terpasang di blog sahabat tidah usah sahabat tempelkan.
 setelah itu sahabat cari kode ]]></b:skin> dan tempelkan kode di bawah ini tepat di atasnya

.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 :#AA80FE !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 {}

lalu save dan lihat hasilnya sahabat gimana, bila belum berhasil sahabat lihat letak penempatan kode yang pertaman pastikan penempatanya.

related post ini munculnya di potingan bukan di homepage .