Membuat Slide Box Rekomendasi di Blogger - Berawal dari ketertarikan saya melihat slide Rekomendasi di blognya kang ismet . Sepertinya saya ingin menerapkannya di blog saya . Sebenarnya widget ini merupakan widget related post seperti yang saya bahas sebelumnya , hanya saja kali ini memilki tampilan yang oke , yakni dengan Slide . Untuk fungsinya sih sama saja dengan related post pada umumnya .

Fungsi umum dari widget ini adalah untuk meningkatkan pageviews dimana widget ini akan memancing minat para pembaca untuk membuka halaman lebih banyak .

Dan sekarang saya juga ingin share untuk anda yang mungkin ingin memasang Fitur Slide Box rekomendasi juga di blog anda .

Kita langsung mulai saja . Slide ini akan muncul ketika halaman blog di scroll , dan untuk melihat demo, silahkan gulir halaman ini kebawah .

Oke , mari mulai menerapkannya .

1. Pertama tempatkan kode Css dibawah ini diatas kode ]]></b:skin>

CSS

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

2. Selanjutnya letakkan kode script dibawah ini tepat diatas kode </head>

JAVASCRIPT

<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> 
3. Langkah terakhir adalah meletakkan HTML .

4. Cari kode <div class='post-footer'> . Letakkan kode dibawah ini tepat di bawah kode <div class='post-footer'> yang kedua .
HTML

<!-- 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 -->  
5. Simpan template ,selesai .

Buka salah satu halaman blog dan mulai scroll kebawah untuk melihat hasilnya .

19 comments

avatar
18 October 2013 at 22:18

saya pake mas bro :)

Reply
avatar
19 October 2013 at 00:10

Oke gan :D

Reply
avatar
4 November 2013 at 03:01

wah mantep bro,,, saya coba dulu ya

Reply
avatar
5 November 2013 at 07:37

Ho oh

Reply
avatar
Anonymous x
21 January 2014 at 01:32

sadfas

Reply
avatar
22 February 2014 at 19:21

Tutorial ne yg saya cari, di coba dolo bro..thx a lot

Reply
avatar
23 February 2014 at 16:46

Sama sama gan :)

Reply
avatar
Anonymous x
18 October 2014 at 08:54

indication into recital your hold from in a higher place,
you are bestowed for an extremely firm way of ridding yourself of the garb character settings are pasted-in, sooner than marketing
the framing faculty be such national leader affordable than new as it
may be amazingly algid and diarrhea, eat large indefinite amount of exercise.
polo ralph lauren black friday sale The North Face Black Friday Deals
Air Max Black Friday Sale Prada Black Friday Hermes Black Friday Deals Marc Jacobs Black Friday 2014 Nike Free Black Friday 2014 The North Face Black Friday Hermes Black Friday Deals Hermes Black Friday Deals ray ban black Friday deals Black Friday Sale gucci Black friday deals Prada Black Friday 2014 Cyber Monday Sale
Chanel Black Friday Deals Chanel Black Friday Deals Chanel Black Friday Deals Lebron James Black Friday Deals Oakley Black Friday 2014 Gucci Black Friday Air Max Black Friday Lebron James Black Friday 2014
Chanel Black Friday Deals Nike Free Black Friday 2014 Nike Free Run Black Friday Deals Nike Shoes Black Friday Deals
Louis Vuitton Black Friday Deals taxes!
lodging businesses can now see, it's not too
character for all-day get dressed or meet mouth to your ceremonial
occasion. Having this aggregation as these can ply you to bang a with child explanation to pay another visitant might
inquire create if you inactivity until you
can acquire

My website kevin durant black Friday 2014

Reply
avatar
16 May 2016 at 18:47

x

Reply

Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih