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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmdPK52h_4LkFSlOZgzpe4ePpwS_5hX3B0BrQjMdhrhac3NSz-nYpWZV0nZBZwqqItPzC9gINEvKVovguLGm7oIYANlejJ52Ote6EkC0BTh-fKWRNNGVIn3ycYGwbVm8-e_1Z-tQO/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/AVvXsEgepYKE4lU25BY_xZzOFHDC4KPjFu1uxgAZv2kVbyw5ScA9I3Y6x3LSQc4BiECcLpRAUyUONuuPbKNkB9Lbat_VwaQYP9gNod-lYViJAhfq11zFfwN6icNegbbfjO_69cZImlMyJxSx/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/AVvXsEiuMV4aJUTrVhqlxI-w1VAv2QZD5QhZMOJCc2g7clImkIhPBkDbEUELPkoy_f-ARxMGbwPJYz7exKA6qyK_x3mg_1FG9vLLviVk5uUXUPCXBvvq3PXZcBILM-3yhT9VsOJ-HYIbV7wb/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 . . .

75 comments

  1. Terimakasih gan sudah berbagi...

    ReplyDelete
    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. jgn lupa folbak... www.wapskin.us

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

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

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

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

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

    gg mempengaruhi loading blog

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

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

    ReplyDelete
  24. 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
  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. @hekos aesya sobb , , ,
    sekedar berbagi . . .

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

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

    ReplyDelete
  35. Sorry mas baru bisa berkunjung sekarang :)

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

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

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

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

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

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

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

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

    ReplyDelete
  43. 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
  44. keren sob.. Mau saya coba tpi blm ada wktu.. Thankz sob info nya.. Sukses selalu..

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

    ReplyDelete
  46. keren juga pake gitu ya
    ntar dicoba deh

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

    izin follow sama minta follbacknya :)

    ReplyDelete
  48. kalau di wordpress gimana ini mas caranya

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

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

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

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

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

    ReplyDelete
  54. 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
  55. Oh gini to cara buatnya.. sering liat saat blogwalking sobat..

    ReplyDelete
  56. 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
  57. thanx, this is very Informational Post to Read now I am Waiting for your next post
    Descolab

    ReplyDelete