Membuat Slide Box Rekomendasi Di Blogger

 

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. 

• Demo

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