Cara Membuat Slide Box Rekomendasi

Sahabat blogger pemula yang baik hatinya, artikel cara membuat slide box rekomendasi ini adalah jawaban untuk sahabat Nur Abrar Isa yang menanyakan di salah satu kolom komentar.

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() &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>

• 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 == &quot;item&quot;'>
 <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/AVvXsEhIK9BT9Xbyp6tkzrKihue4yK_U8kBUencpUsaHfSRlqCLi2eGMgWkUU6MGbSensyrBnZsUIFSZ-4SFEpeBWoDV5bGGt5lzRsBD6aT0wc3lAYxLZq_EHQkjpUmMP1Jbbt_JdfW7fZ98/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/AVvXsEisVYRymX4tjOhkDfP1lALskBpa-QWd8Fj3xq80Es37LCJQh6CQ5SOTugfFRD7wRYCiRDpE2V8xJ5TQOHP1I8LL0FF2b7XcGr-2pZq6EQHUAkNSbJztv0CR7M6p14gTwmcxmjuK-f9p/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/AVvXsEguo2UrJORdOyLtq7qVTYLzyCO6Wtd54sHgquJ09cVUD8E8FDfa9OtoO7mJFtqDuWQ1Hzk76soyu988SVdFUdJXhqNqPF_hYCaDgx2h9AtmYdPNZ5K5s3o9mFP-XUUs8jiat3lKdikM/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: 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='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

Dalam memasukkan kode selalu perhatikan tulisan yang berwarna tebal, sobat bisa mengganti tulisan yang berwarna merah dengan kalimat yang sobat inginkan. Biasanya berupa " Rekomendasi untuk anda" atau "Artikel menarik lainya" bisa juga dengan kalimat lain yang sobat inginkan.

Kode diatas saya peroleh dari blognya Kang Ismet yang baik hatinya, untuk pertanyaan silahkan sobat sampaikan pada kolom komentar dibawah.

Salam dan terimaksih...