Cara Membuat Slide Box Rekomendasi Artikel

hai ,kali ini saya akan membahas Cara Membuat Slide Box Rekomendasi Artikel apa anda tau apa itu Slide Box Rekomendasi Artikel ? pasti tau lah kalo nggak tau ngapain nyari² :V .
kebanyakan Slide Box Rekomendasi Artikel banyak di gunakan oleh blog profesional , yang sudah mempunyai pengunjung tetap , Isi dari Box Rekomendasi ini adalah related post with thumbnail, selain related posts juga ditampilkan random post apabila pengunjung berkali-kali mengunjungi alamat yang sama.

Demo

biar tidak berbelit² langsung saja ke pembahasan saya kali ini :
perhatikan baik-baik langkah tersebut ..
1. Buka blog kamu.
2. Masuk ke Edit Html.
3. Lalu cari kode ]]></b:skin>.

4. Lalu copy kode di bawah ini dan letakan di atas kode ]]></b:skin> atau </style>.

 
/* Related Post with Sliding CSS by Kang Ismet*/
#kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.kislidingbox-title span a{float:right;height:40px;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:-10px;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 {}
/* End CCSS Related Post with Sliding */

5. Lalu cari kode </Head>.

6. Copy kede di bawah lalu letakan tepat di atas kode </Head>.

<script type='text/javascript'>
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('#kislidingbox').css({'right':'0px'});
} else {
$('#kislidingbox').css({'right':'-360px'});
}
});

$(document).ready(function(){
var kislidingbox = $('#kislidingbox');
var closed = $('#kislidingbox-close');
var minimize = $('#kislidingbox-minimize');
var maximize = $('#kislidingbox-maximize');

maximize.hide();

closed.click(function(){
kislidingbox.css({'right':'-350px'});
kislidingbox.fadeOut('slow');
})
minimize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
maximize.show();
})
maximize.click(function(){
kislidingbox.toggleClass('hide');
$(this).hide();
minimize.show();
})
});

</script>

7. Lalu cari kode <div class='post-footer'>.

8. Letakan kode di bawah tepat di atas kode <div class='post-footer'>.

9. Setelah itu klik simpan.

<b:if cond='data:blog.pageType == "item"'>
<div class='show' id='kislidingbox'>
<div class='kislidingbox-title kislidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</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/AVvXsEjpup9XJlxyN3PPym-Tu19crCJJacH4DRQ110VGWjb0upviILky2KakCiVmuP3s7ujU_bU1-9nriUXcRj9Qg5MhcrEEPDObC4CptcRrzzSw-AQ1S-v8mcUxSQUmte7mXqavTPwDs09L/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/AVvXsEioM4UZQpfJTceHK8hSvwinYJHa-2WmqKe0dkPizX3KxquhXuekTLmBbNCpA1LFAvyTwPNj80YTXInaPcGTkx46N7pfa30i7b1dwIOPSfZvH_x-AYCqBmPImwhWnMgvTeqc_Vty8CeO/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/AVvXsEhALVv_qWFh5QJXWqOVFdxuH52Wa7OEHKl0ELIzg-qFdpQjcejGqBfXuDSOFcLn_i_kiPgYWt7Q8sBuRCzTrncMHdMVS8w13ca5M3xC75ZFqn1qWNAxQSZhaJOERUIog6CGFg95mk8_/s1600/maximize.png' title='maximize'/></a></span>
</div>
<div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == "item"'>
<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'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4></h4>",
numPosts: 2,
summaryLength: 0,
titleLength: "auto",
thumbnailSize: 45,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "sliding-tab",
newTabLink: false,
moreText: "",
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>