Sekedar informasi slide box rekomendasi adalah sebuah widget blogger
yang berfungsi untuk menawarkan / merekomendasikan kepada pembaca
(pengunjung blog) tentang artikel lain yang mungkin diminati oleh
pengunjung untuk dibaca.
Slide box rekomendasi ini muncul di sebelah kanan ketika pengunjung
membaca sebuah artikel dan menggulirkan halaman kebawah, untuk lebih
jelasnya silahkan sobat gulir kebawah halaman ini maka akan muncul slide
box rekomendasi pada sisi kanan.
Isi dari box rekomendasi ini berupa related post dengan thumbnail, dan
yang lebih menarik dari widget ini adalah box rekomendasi hanya muncul
pada halaman postingan sementara pada halaman depan tidak akan
dimunculkan. Selain menampilkan related post widget ini juga akan
menampilkan rendom post ketika pengunjung berkali-kali mengunjungi
halaman yang sama, keren kan??
Untuk sahabat yang ingin menerapkan box rekomendasi ini, silahkan ikuti beberapa langkah mudah berikut :
- Setelah login ke pengaturan Template silahkan sobat klik Edit HTML
- Cari kode ]]></b:skin> pada template HTML
- Letakkan kode berikut tepat di atasnya
/* Related Post with Sliding */
#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 CSS Related Post with Sliding */
- Langkah berikutnya adalah cari kode </head> dan letakkan kode berikut tepat diatasnya
<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>
- Langkah selanjutnya yang terakhir adalah cari kode <div class='post-footer'> dan letakkan kode berikut tepat dibawah kode yang kedua
<!-- Related Post with Sliding -->
<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/AVvXsEgueDxWNroDZE4LOJPFNIaZqP9AdeIzNiiY9o2Flsq_z4n8Lg0f4x2bqH_MJPydMTzmthCq8X4W8MOivPvyLLtltDEjZtDUvZeZYzHGAjPgLlb5t4wkwU70JBjYstmy21GebUfJUbxJ/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/AVvXsEiOvIf6HlvDBqGOlX84f0txqoTVzqA2kR8kUdnRLT0btxh_KnWwsd18q5HgntB3mdkOW4G701Z0VC6ZeZw1Sv3xt422YsLgoSx3oRGyfoH-uu2fuEujUKy0TnL-K7zVZBfqyTjY8Hy3/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/AVvXsEh_aLFEBFhdIs9sC9iF0A5xeiI90rw9W4h1vx6lsnEGLfPuITSUPooBxYIpix3d99YRegE87L-SmExT81firvFd12XtHJXH3ZKJff2Ffona2RSKA7xrtHicA1bHkZUWHkNsRp4Bx7DP/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: quot; 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>
<!-- Related Post Widget End -->
- Silahkan Save template
