Mungkin sobat pernah mengunjungi beberapa situs yang menggunakan slidebox recommendation, atau kotak yang bergeser ke samping ketika mouse discroll ke bawah yang berisi tulisan Rekomendasi Untuk Anda. Slide box seperti ini bisa sobat temukan di situs Ncahlongtube.blogspot.com

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. 

Artikel ini saya temukan Ketika berkeliling di salah satu blog sobat Blogger dan script ini jelas bukan buatan saya, Saya hanya sekedar berbagi apa yang saya tau dari sobat" blogger kita. 



Bagi sobat yang ingin menerapkan, silahkan ikuti langkah mudahnya :

Langkah 1 : Simpan kode ini di atas  ]]></b:skin>
/* Related Post with Sliding CSS by Kang Ismet*/ #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 : Simpan kode 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 : Simpan kode ini di bawah <div class='post-footer'>  yang ke 2 ,



<!-- Related Post with Sliding by Kang Ismet -->
<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='http://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='http://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='http://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='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 -->

Save , , ,Semoga bermanfaat . . .

77 comments

  1. Replies
    1. Wah kira kira ini akan menambah beban loading nda ya?
      Soalnya sudah banyak script sih

      Delete
  2. Banyak juga kode script yang harus dimasukkan ya mas.Terima kasih telah berbagi ini mas.

    ReplyDelete
  3. @infosaja.comIya gan , , ,

    tapi dijamin Work gan ,,, ,

    ReplyDelete
  4. Mantap gan slide box'a . . .
    kapan-kapan saya coba ya!

    ReplyDelete
  5. @Meutrap Barangthanks gann , , , ,
    silahkan dicoba gann , , , ,

    ReplyDelete
  6. Wah bisa saya coba kapan2 nih sob, trims sob

    ReplyDelete
  7. Wah bisa saya coba kapan2 nih sob, trims sob

    ReplyDelete
  8. slamat mlm sobat salam kenal son. trmksih banyak sob infonya tutornya sangat bagus sob mkasih y son.

    ReplyDelete
  9. saya bungkus dulu yah sob script nya.. Kalo ada waktu saya coba.. Thankz sob infonya.. :-)

    ReplyDelete
  10. Sudah pernah pakai sob, tapi sekarang sudah gak lagi. Btw, nice tutorial.. :)

    ReplyDelete
  11. menarik sekali setelah melihat demonya.
    bisa di coba dan diterapkan

    ReplyDelete
  12. Berkenaan slide box di atas sepertinya menarik nih untuk di coba.. Mantab gan!

    ReplyDelete
  13. Haduh trlalu bnyak om kodenya, gak sempat kalo msukin smwanya..

    ReplyDelete
  14. wah manteb sob, ijin pasang

    diblog ini gk diterapin ya sob?

    ReplyDelete
  15. mantap gan,,, izin pasang di blog saya... hehe :D

    ReplyDelete
  16. Banyak sekali scriptnya ya mas,,,
    oke dech ntar dicoba,,,
    makasih nice infonya :)

    ReplyDelete
  17. Manteb Mas, ntar coba saya terapkan ke blog saya.
    Salam

    ReplyDelete
  18. @Indri Lidiawatiiya,,tapi dijamin work kok , , ,
    silahkan dicoba,,,
    sama" . . . .

    ReplyDelete
  19. yang kaya facebook itu yah? mantap kodenya sob, banyak :D

    ReplyDelete
  20. @Intan Sudibjoyang mana sob ? ? ? ?
    hahaha begitu lah ada nya sob , , , ,
    tapi work kok, , ,

    gg mempengaruhi loading blog

    ReplyDelete
  21. Bagus tutorialnya. Thanks master atas ilmunya :)

    ReplyDelete
  22. kodenya panjang juga ya ? tapi demonya sangat menarik.

    ReplyDelete
  23. wah keren sob, buat pemula seperti saya kayaknya harus langsung dicoba praktekin nie secara saya suka mencoba-coba hal-hal yang memang blom saya ketahui...
    terimakasih sob udah share infonya!

    ReplyDelete
  24. Share bagus dan patut dicoba tentang slidebox recomendation. Terima kasih, gan...

    ReplyDelete
  25. Perlu dicoba nih... kebetulan saya belum pakai yang seperti ini :D

    ReplyDelete
  26. bagus dan menarik mas, ijin kopas script dan tutorialnya untuk di coba.

    ReplyDelete
  27. Scriptnya banyak amat mas,,, hmmm...
    oke dech ntar dicoba,,, makasih infonya :)

    ReplyDelete
  28. hahaha ternyata pke slide box dari kang ismet juga,, saya malah sudah pasang di blog :D

    sekalian saya tambah back to top biar lebih sempurna, nice share gan.

    ReplyDelete
  29. dilihat dari demo nya keren juga mas..
    thanks ilmu nya

    ReplyDelete
  30. oh iya.. ijin follow blog nya gan :)

    ReplyDelete
  31. bagus mas tutornya.. terimakasih udah share

    ReplyDelete
  32. Nanti saya coba di blog blogspot saya ah...

    ReplyDelete
  33. Wah bagus juga yah sob pake slide box di samping, sangat bermanfaat nih tapi banyak juga yah kodenya :)

    ReplyDelete
  34. Sorry mas baru bisa berkunjung sekarang :)

    ReplyDelete
  35. wah ini dia nih yang di cari-cari.
    keren :)

    ReplyDelete
  36. Seperti Artikel Terkait ya mas :) hanya saja cara kerjanya seperti slider ..

    ReplyDelete
  37. Langsung praktek mas. Mohon bimbingannya ya. Soalnya kode nya banyak banget hehehe :)

    ReplyDelete
  38. perlu coba nehhh
    Cuman skripnya
    Panjang amier...

    ReplyDelete
    Replies
    1. Ada Yang singkat tapi berpengaruh di blog . . .

      Delete
  39. yang biasa ada dibawah sebelah kanan itu ya gan ? terimakasih atas sharingnya.

    ReplyDelete
  40. Wah! Tapi gue benci bgt kalo berkunjung ke blog yg ada slide-nya! Apalagi yg ngikut sroll dan gak ilang2 sblm diclose! Hoho

    ReplyDelete
  41. thanks 4 share, kpn2 di coba praktek :)

    ReplyDelete
  42. saya bookmark dl gan, nanti saya praktekin,:)
    jgn lupa kunjung balik yah gan
    http://caramengatasibekasjerawat.blogspot.com/2013/10/5-tips-ampuh-mengatasi-kulit-kering.html

    ReplyDelete
  43. keren sob.. Mau saya coba tpi blm ada wktu.. Thankz sob info nya.. Sukses selalu..

    ReplyDelete
  44. keren sob.. Mau saya coba tpi blm ada wktu.. Thankz sob info nya.. Sukses selalu..

    ReplyDelete
  45. keren juga pake gitu ya
    ntar dicoba deh

    ReplyDelete
  46. nice info ini gan lumayan buat coba-coba

    izin follow sama minta follbacknya :)

    ReplyDelete
  47. kalau di wordpress gimana ini mas caranya

    ReplyDelete
  48. Wahh Keren Nih Sob Ilmunya saya Juga udah Pake Tuhh hehe |o| |o|

    ReplyDelete
  49. Wah kalau diberi slide ini, tampilan mirip web berbayar yang mahal. dan bisa membuat pengunjung betah lama-lama berkunjung di blog kita

    ReplyDelete
  50. Boleh juga dicoba, thanks,,,nice shared, Sob!

    ReplyDelete
  51. apakah nanti loading blognya jadi lambat sob ??

    ReplyDelete
  52. info yang bermanfaat, tapi belum berminat untuk mencobanya sobat ^^

    ReplyDelete
  53. Nah ini dia yang saya cari-cari sob, beberapa hari yang lalu saya pernah mengunjungi blog yg menggunakan widget seperti ini terus terang saya tertarik pengen bikin juga hanya saja saya belum menemukan tutorialnya ternyata nemu juga disini. Makasi sob udah share tutorialnya, saya coba praktekin nie :)

    ReplyDelete
  54. Oh gini to cara buatnya.. sering liat saat blogwalking sobat..

    ReplyDelete
  55. sliding ini memang dari awal permikiran saya, tp saya gagal mengabungkan, yang jelas sliding yang pertama dari mas adhy, redated post dari DTE, yang bikin dari kang ismet.

    ReplyDelete
  56. I had visited your website which was really good Plastic Manufacturer

    ReplyDelete
  57. thanx, this is very Informational Post to Read now I am Waiting for your next post
    Descolab

    ReplyDelete