Cara Buat Slide Box Related Artikel Keren dan Mudah

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.

Baca : Bahaya Terlalu Banyak Widget di Blog

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 baca dibawah ini

Cara Buat Slide Box Artikel Mudah

Langkah pertama cara buat slide box ini silahkan Anda login pada blogger, masuk pada bagian template dan masuk ke edit HTML.

Setelah itu silahkan sobat cari kode ini ] ] > < / b : s k i n > atau kode < / s t y l e > *TANPA SPASI , setelah ketemu silahkan letakkan script slidebox 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 {}

Setelah anda meletakan script yang ada diatas selesai, well kita lanjut. langkah selanjutnya silahkan Anda cari lagi kode < / head > ( tanpa spasi ) saya kasih spasi karena error saat di publish, ok lanjut 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() > 400) {
            $('#kislidingbox').css({'right':'0px'});
        } else {
            $('#kislidingbox').css({'right':'-360px'});
        }
    });
  
$(document).ready(function(){
 var kislidingbox      = $('#kislidingbox');
    var closed      = $('#kislidingbox-close');
    var minimize    = $('#kislidingbox-minimize');
    var maximize    = $('#kislidingbox-maximize');
  
    maximize.hide();
  
    closed.click(function(){
        kislidingbox.css({'right':'-350px'});
        kislidingbox.fadeOut('slow');
    })
    minimize.click(function(){
        kislidingbox.toggleClass('hide');
        $(this).hide();
        maximize.show();
    })
    maximize.click(function(){
        kislidingbox.toggleClass('hide');
        $(this).hide();
        minimize.show();
    })
});
</script>

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

Baca : Cara Memasang Widget Translate di Blog

Langsung copy dan paste script dibawah ini lalu letakkan dibawah kode tadi tepat dibawahnya

<!-- Related Post with Sliding -->

<b:if cond='data:blog.pageType == "item"'>

<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 == "item"'>

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

          "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>

      </b:loop></b:if>];

  var relatedPostConfig = {

      homePage: "<data:blog.homepageUrl/>",

      widgetTitle: "<h4></h4>",

      numPosts: 2,

      summaryLength: 35,

      titleLength: "auto",

      thumbnailSize: 45,

      noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

      containerId: "sliding-tab",

      newTabLink: false,

      moreText: "",

      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.

Kekurangan dari menggunakan widget ini adalah akan mengurangi kecepatan loading blog Anda. Dimana loading blog adalah hal yang penting dalam hal SEO. Tapi saya rasa tidak akan memakan begitu banyak loading blog anda jadi masih bisa dipakai lah. Toh manfaatnya selain mengurangi bounce rate juga akan membuat blog mendapatkan traffic.

So sekian tips Cara Buat Slide Box semoga dapat bermanfaat, silahkan share jika artikel ini bermanfaat, terima kasih.