Home › Blogspot › Tutorial › Membuat Slide Box Rekomendasi di Blogger

Monday, 11 August 2014

Membuat Slide Box Rekomendasi di Blogger

- Blogspot, Tutorial
Ketika mengunjungi beberapa situs, kadang kita kaget tiba-tiba muncul sebuah box yang berisi tentang judul dan gambar artikel yang juga direkomendasikan untuk kita baca. Hal ini bertujuan agar pageview blog kita meningkat. Sejak lama saya mencari tutorial ini, alhamdulillah sekarang sudah ketemu caranya. Saya dapatkan dari kangismet.net. Slide box recommendation, atau kotak yang bergeser ke samping ketika mouse discroll ke bawah yang berisi tulisan Rekomendasi Untuk Anda.

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. Hal ini juga bertujuan agar pengunjung betah di blog dengan membaca beberapa artikel kita sekaligus.

Berikut langkah-langkanya:

Langkah 1 : Cari Kode ]]></b:skin> , lalu Letakkan kode dibawah ini diatasnya;

/* 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: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 */

Advertiser

Langkah 2 : Cari Kode </head>
Simpan kode dibawah 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 : Cari kode <div class='post-footer'> yang ke 2, lalu letakkan kode dibawah ini tepat dibawahnya;
Note:
Jika blog Anda tidak memiliki 2 kode script <div class='post-footer'>
Anda bisa menyimpannya tepat dibawah kode script
<data:post.body/>
atau dibawah;
<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;'>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/AVvXsEgkvZbOKQH6rrLForX5CFmvpBq3oXeApq0dsRXrIGIFikPc3_JCfyreXFkXmQgc3Chpa25iMHznqTZmBAB1DVnLEpU_GfnSmXO5uuM55ixkixWuJVBPkkxhc9EDSqI2jWoMXLDdINsT/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/AVvXsEgS6E16QulaecsehhRwQXE5124SeD_2mmUuSDHAD4bwxmG6oaRmCR32m9KhsxBP80kacuhSoEYx0pskmBe9Fz9fqSjTwzmkgbJAakwlOLMxkKm__Fccy9IwWhX03cTl9ktvyajkZgak/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/AVvXsEgyy8aqTWzpZ0UVtWQhce60zOJ3JOl2mKzvX_mjS3cwqiZD375zM8YLdxzl4EQJ94Ab19eiXlhjIHT37R6ZKNJb81wNwKxGc2urlROxUe8lgnKglBXMsDD7UF6IZMeCVAzaJjvEgaCm/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='https://my-relatedpost.googlecode.com/svn/relatedpostme.js' type='text/javascript'/>
</b:if>         
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->

Lalu SAVE dan lihat perubahannya setelah membuka sebuah postingan yang ada di blog Anda.

Delivered by FeedBurner