Cara Membuat Slide Box Rekomendasi Artikel

Cara Membuat Slide Box Rekomendasi Artikel. Sobat blogger, slid box menu ini adalah sebuah box rekomendasi artikel yang terdapat di bagian kanan blog ketika kita slide kebawah maka akan muncul sebuah rekomendasi artikel dalam bentuk box dengan tumbhnail, slide box ini juga bisa di katakan artikel terkait, karena artikel yang direkomendasikan atau yang muncul adalah artikel berdasarkan label, sudah tentu suatu keuntungan pemasangan slide box ini adalah bisa di tawarkan artikel lain secara praktis, dan slide box ini juga sangat ringan pada loading blog, Anda bisa lihat contoh gambar gif di bawah ini bagaimana tampilan slide box atau anda bisa melihat langsung di tombol demo.

DEMO

Gambar di atas adalah contoh slide box yang akan saya buatkan tutorialnya, jika anda berminat untuk menerapkan atau memasang slide box rekomendasi artikel ini di blog anda, berikut langkah-langkahnya.

Cara Membuat Slide Box Rekomendasi Artikel

1. Buka akun blogger.

2. Pilih menu template > Edit HTML

3. Lalu letakan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

 #kislidingbox{background:#fff;border-top:1px solid #bbb;width:320px;height:200px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}
.kislidingbox-title{background:none;color:#00789d;display:block;height:35px;width:100%;font-size:12px;font-family:Aerial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}
.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 :#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 {}

4. Selanjutnya letakan kode dibawah ini tepata di atas kode </head>

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

5. Jika sudah sekarang letakan kode dibawah ini di bawah kode <div class='post-footer'> dan letakan pada kode yang nomor dua.

<!-- 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;'>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/AVvXsEjYFz04rDksWdqGsb40mpIOd0efV1ntNjQ0bhMS4YEJzhR2MR0bVHUsKvl0hbGOrY0BlKKHyp4Sn9Pyz01pkr6p-UQuBz6H-tNEQkAl5HnO5W_hk3vlnzkArzCzgWk5cxrtjEaDdw8O/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/AVvXsEjbO6Nwbr8NAorovfWzCmHb0LDCRdYfSe1GqJGi4m0316HD6glQT8SMVKG1X9du8A0X1mUjuKx_53BHQ1BR1UFLpTV0czrE3IBz3nxp9kyEo_a434bKiNtbYlYLl94RHgrBDpMvHpfp/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/AVvXsEj_B7zsHmBfMwTk46x5jecj13hnuc_4SewhFSX_eXidqC67H76a0chSMB24LNSnhZDpKlPj3nmV_wo6eYyQ8e5Ymz8V4_hr_lvXWNstjRvzZknCowFbTn0kwVxWwwBc0tiz7ThatbqS/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>
<!-- Related Post Widget End -->  

6. Terakhir klik save template.

Cukup mudah bukan sobat cara menerapkannya, Oke saya rasa sudah cukup untuk tutorial cara membuat atau memasang slide box rekomendasi artikel pada blog. semoga bermanfaat.

Share to:

Google+ Facebook Twitter