Cara Memasang Slide Box Rekomendasi di Blog

Cara Memasang Slide Box Rekomendasi di Blog

Saya rasa Anda sudah pernah melihat slide box recommendation atau slide box rekomendasi yang biasanya muncul di sebelah kanan blog/website yang bertemakan berita. Slide box rekomendasi ini akan muncul ketika Anda melakukan scrolling halaman ke bawah, maka akan muncul kotak yang bertuliskan “Rekomendasi Untuk Anda” dengan menampilkan artikel dengan thumbnail yang direkomendasikan berdasarkan label atau related posts with thumbnail.

Selain berisikan related posts with thumbnail, slide box rekomendasi ini juga menampilkan random posts apabila pengunjung berkali-kali mengunjungi artikel yang sama. Sehingga apabila Anda memasang widget ini, maka pengunjung pastinya juga akan terlena untuk membaca artikel lain pada blog Anda. Jika Anda yang masih penasaran, di bawah ini adalah demo slide box rekomendasi.

Cara Memasang Slide Box Rekomendasi di Blog

Bagi Anda yang ingin memasang widget slide box rekomendasi ini, silahkan ikuti langkah-langkah di bawah ini.

1. Buka Blogger > Template > Edit HTML > Letakkan kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Widget Slide Box Rekomendasi*/
#whyslidingbox{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;}
.whyslidingbox-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}
.whyslidingbox-title span a{float:right;height:40px;width:25px;}
a#whyslidingbox-close, a#whyslidingbox-close {margin-right:15px;}
.whyslidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.whyslidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.whyslidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.whyslidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.whyslidingbox-container > div > span {font-size:14px;}
.whyslidingbox-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 {}

2. Salin dan letakkan kode di bawah ini sebelum </body>

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

$(document).ready(function(){
var whyslidingbox = $(&#39;#whyslidingbox&#39;);
var closed = $(&#39;#whyslidingbox-close&#39;);
var minimize = $(&#39;#whyslidingbox-minimize&#39;);
var maximize = $(&#39;#whyslidingbox-maximize&#39;);

maximize.hide();

closed.click(function(){
whyslidingbox.css({&#39;right&#39;:&#39;-350px&#39;});
whyslidingbox.fadeOut(&#39;slow&#39;);
})
minimize.click(function(){
whyslidingbox.toggleClass(&#39;hide&#39;);
$(this).hide();
maximize.show();
})
maximize.click(function(){
whyslidingbox.toggleClass(&#39;hide&#39;);
$(this).hide();
minimize.show();
})
});
</script>

3. Kemudian, letakkan kode di bawah ini di bawah kode <data:post.body/> (yang terakhir)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='whyslidingbox'>
<div class='whyslidingbox-title whyslidingbox-www'>
<span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span>
<span><a href='javascript:void(0);' id='whyslidingbox-close' title='close'><img alt='close button' class='a' src='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span>
<span><a href='javascript:void(0);' id='whyslidingbox-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span>
<span><a href='javascript:void(0);' id='whyslidingbox-maximize' title='maximize'><img alt='maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/s1600/maximize.png' title='maximize'/></a></span>
</div>
<div class='whyslidingbox-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: 0,
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='https://cdn.rawgit.com/Wahyututorial/wahyututorial/master/relatedpost.js' type='text/javascript'/>
</b:if>
</div>
</div>
</b:if>

4. Terakhir, simpan template dan lihat hasilnya.

Sekian, semoga bermanfaat.

Leave a Reply