Cara Membuat Slide Box Rekomendasi Artikel

Cara Membuat Slide Box Rekomendasi Artikel - Membuat slide box rekomendasi atau recommended artikel di sebelah kanan blog memang sangat mudah dan cocok untuk blogger yang berteman news atau informasi terbaru yang di bagikan pada blog tersebut. Tetapi apa boleh buat widget rekomendasi artikel ini bisa di gunakan oleh siapa saja, namun ada saja orang yang belum paham memasang widget slide box rekomendasi/recommended artikel pada blog mereka, itu dikarenakan ada beberapa template yang tidak memiliki kode script <div class='post-footer'> sebanyak 2 kode, dan hanya memiliki 1 kode script itu saja. Oleh karena itu banyak orang yang prustasi atau langsung saja meninggalkan tutorial cara memasang atau membuat widget slide box rekomendasi artikel pada blog mereka, padahal slide box rekomedasi ini bisa di pasang di setiap blog hanya saja Anda perlu memahami script-script yang ada pada blog Anda sehingga mudah untuk mengeditnya.

Bagi Anda yang ingin memasang atau membuat slide box rekomendasi artikel pada blog Anda silahkan baca kembali artikel ini dari blog Ficri Pebriyana mungkin ada sedikit perbedaan dengan artikel yang ada pada blog lain. Tentu saja, karena saya akan memberikan tutorialnya dengan lengkap dan jelas sehingga Anda bisa memasang slide box rekomendasi artikel pada blog Anda. Tak usah panjang lebar, mungkin Anda tidak akan membacanya yang ada di atas, padahal sedikit penting agar Anda lebih memahaminya. Langsung saja bagaimana cara memasang atau membuat slide box rekomendasi artikel pada blog ?
Silahkan simak tutorial Cara Membuat Slide Box Rekomendasi Artikel pada blog dibawah ini :

1. Cari kode script berikut ]]></b:skin> (gunakan Ctrl + F untuk mempercepat pencarian)
2. Copy kode script dibawah ini, lalu paste tepat di Atas kode script ]]></b:skin>

/* 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:335px;height:250px;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:Castellar, 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 */

Catatan :
Kode script yang berwarna Biru bisa Anda ganti sesuka hati Anda
width : 335 (lebar kotak rekomendasi artikel)
height : 250 (tinggi kotak rekomendasi artikel)
-10px : merupakan letak gambar dari sebelah kiri, jika semakin besar angka yang diberikan maka gambar akan semakin dekat dengan garis

3.  Cari kode script berikut </head> (gunakan Ctrl + F untuk mempercepat pencarian)
4. Copy kode script dibawah ini, lalu paste tepat di Atas kode script </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>

Catatan :
Kode script warna Hijau : Boleh Anda pasang atau tidak, sebaiknya Anda pasang agar membuat slide box rekomendasi artikel pada blog Anda berhasil. Tetapi sebelum di pasang apakah kode script tersebut sudah terpasang pada blog Anda atau belum, jika belum silahkan pasang dan jika sudah tidak dipasang juga tidak apa-apa
Kode script Biru : Bisa Anda ganti selain 400, bisa juga 500,600,700 atau bahkan lebih. Semakin besar angka yang diberikan maka akan semakin bawah slide box muncul pada blog Anda

5. Cari kode script berikut <div class='post-footer'>
6. Copy kode script dibawah ini, lalu paste tepat dibawah kode <div class='post-footer'> (kodenya yang ke 2)

Catatan :
Jika blog Anda tidak memiliki 2 kode script <div class='post-footer'>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
<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;'>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/AVvXsEjkikLg-q3Tzux19zwxBdlie-1RWMZPZnGWoVrlngel0_p6ERRhlKkX851lsBsStCwaHJfv-XoNRq-Dv0U7a-ErAT1dvMXxjI0YDVAKDZhj-0tgFZ6oR1wDNbO37wzbvYSBnsIZ0JfO/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/AVvXsEgAcErVMd4MY2YbKK1uknP3bV8IjBZqnHodXF1V5FbOR_JbOsdw7DnjkaMoIVeJCvimA6fWmqPvYIqq0P6eNCAs4S4kPJuN39MtW1qI2nd6rjjTryBfOhcKRXrFXcJxdJHQ37t4pGu0/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/AVvXsEgCLKThXE69pYg8QYarsHQWoRapJnPRe49gh9AswYGpLFs40Saj_xBeHvWrm6TEl9GUrxUhYXm8te_2a4MaDcOgPhgSWswc0DtSfEQjeB9C49J4GRbueQVpamcR-I640TSpB8oBhCFQ/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: 3,
      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://googledrive.com/host/0B9LjnohZPx_KeTNMQVViZkpaaFk/RelatedPost-HTML5.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if>
<!-- Related Post Widget End --> 

Catatan :
Baca Juga Artikel Ini = Bisa Anda ganti dengan kata-kata Anda sendiri, atau dengan kata-kata seperti ini :  Artikel Rekomendasi, Recommended Article, Rekomendasi Artikel, Mungkin Artikel Yang Anda Cari, dan lain-lain
 numPosts: 3 = Jumlah rekomendasi artikel yang muncul, bisa Anda ganti 1,2,3,4,5. Lebih dari 5 mungkin akan terlalu kebanyakan
thumbnailSize: 45 = Ukurang gambar yang tampil pada slide box rekomendasi artikel, bisa Anda ganti sesuai keinginan Anda
newTabLink: false = Artinya jika artikel yang ada pada kotak slide box rekomendasi Anda klik, maka artikel tersebut tidak akan muncul di tab baru. Jika Anda ganti menjadi true, maka artikel tersebut jika di klik akan muncul di tab baru

Jika ada yang belum paham atau tidak di mengerti silahkan berikan komentar, secepatnya akan saya balas.

Sebenarnya kode script di atas masih bisa kalian edit lagi sesuai dengan keinginan Anda. Tetapi itu saja yang bisa saya sampaikan mengenai Cara Membuat Slide Box Rekomendasi Artikel. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Last Update : 22/07/2016

Referensi kode script : blog.kangismet.net

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini