Tutorial

Membuat Slide Box Rekomendasi di Blogger

Ketika mengunjungi beberapa situs, kadang kita kaget tiba-tiba muncul sebuah box yang berisi tentang judul dan gambar artikel yang juga direkomendasikan untuk kita baca. Hal ini bertujuan agar pageview blog kita meningkat. Sejak lama saya mencari tutorial ini, alhamdulillah sekarang sudah ketemu caranya. Saya dapatkan dari kangismet.net. Slide box recommendation, atau kotak yang bergeser ke samping ketika mouse discroll ke bawah yang berisi tulisan Rekomendasi Untuk Anda.

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. Hal ini juga bertujuan agar pengunjung betah di blog dengan membaca beberapa artikel kita sekaligus.

Berikut langkah-langkanya:

Langkah 1 : Cari Kode ]]></b:skin> , lalu Letakkan kode dibawah ini diatasnya;

/* Related Post with Sliding CSS */
#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 */

Langkah 2 : Cari Kode </head>
Simpan kode dibawah ini diatas </head>

<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 3 : Cari kode <div class=’post-footer’> yang ke 2, lalu letakkan kode dibawah ini tepat dibawahnya;
Note:
Jika blog Anda tidak memiliki 2 kode script <div class=’post-footer’>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
atau dibawah;
<div class=’clear’/>

<!-- 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://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/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='https://my-relatedpost.googlecode.com/svn/relatedpostme.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->

Lalu SAVE dan lihat perubahannya setelah membuka sebuah postingan yang ada di blog Anda.

Workshop Toko Online

Pendapat atau Pertanyaan Anda?

comments

Baca Juga:  Langkah Yang Harus Anda Lakukan Untuk Membuat Uang Dari Blog

Musthafa Kamal

Seorang manusia fakir ilmu yang selalu berusaha belajar dan menjadi lebih baik agar bisa berbuat sebanyak-banyaknya untuk orang banyak. Menyukai dunia Desain Grafis, Blogging, Traveling, Online Marketing, Diet, Bisnis dan Ekonomi Islam

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Please consider supporting us by disabling your ad blocker