BerlanggananBerlangganan Artikel Gratis Langsung Di Email Anda

Cara Buat Slide Box Related Artikel

Cara Buat Slide Box Related Artikel, Slide Box adalah kotak dimana saat halaman di scrol akan muncul box rekomendasi artikel lain dari halaman anda. Widget seperti ini sangat baik digunakan untuk menurunkan nilai Bounce Rate pada halaman anda karena saat pengunjung anda sedang membaca artikel dalam halaman anda dan ketika melakukan scrol kebawah maka akan muncul rekomendasi artikel lainnya sehingga membuat pembaca akan tertarik untuk membaca artikel lainnya.

Cara Buat Slide Box Keren dan Simple

Tampilannya kurang lebih seperti gambar diatas, dan cara membuatnya pun sangat sederhana dan mudah.Walaupun mengorbankan sedikit loading blog anda tapi manfaatnya sangat baik untuk halaman anda. Bagi anda yang berminat memasang widget ini silahkan lanjutkan membaca

1. Langkah pertama silahkan login pada blog sobat dan masuk ke edit HTML
2. Setelah itu silahkan sobat cari kode ]]></b:skin> atau kode </style> setelah ketemu silahkan letakkan script dibawah ini tepat diatasnya


#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 {}

3. Setelah proses diatas selesai langkah selanjutnya silahkan sobat cari kode </head> dan masukan script dibawah ini tepat diatasnya

<script src='https://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>

4. Langkah menuju akhir nih sob, silahkan cari kode <div class=’post-footer’> jika tidak ada dapat anda letakkan di bawah css related post template anda. Copy dan paste script berikut ini tepat dibawahnya


<!-- 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://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: 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='https://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 --> 

Setelah semua proses selesai anda lakukan maka langkah terakhir adalah menyimpan hasilnnya dan widget pun siap digunakan pada blog anda. Bagaimana sangat mudah dan simple bukan cara masangnya. jika sobat tertaik bisa langsung di terapkan. Semoga berhasil.