Membuat Box Pesan Muncul Setelah Scroll

Kotak Pesan Menggantung Muncul Setelah Scroll - Di situs-situs berita populer seperti viva news dan detik kita sering menjumpai kotak rekomendasi artikel atau kotak artikel terkait yang menggantung di kanan, yang hanya muncul setelah pengunjung scroll halaman website kebawah. Banyak sekali sobat blogger yang menginginkan gadget semacam ini. Namun maaf baru sempet posting sekarang.

Untuk lebih mudahnya mari kita gunakan kode dari +Kang Ismet. Pada contoh kali ini kita akan membuat Gadget Artikel pada box tersebut.

Tambahkan kode CSS berikut 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 */

Kemudian tambahkan javascript berikut ini di atas </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>

Terakhir tambahkan HTML berikut ini di bawah <div class='post-footer'> yang kedua.

<!-- 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/AVvXsEg4hLwLl4zMH68TIME1qc9Esu9JO5yVz1ijEaYaE31EWC6QxAwuPM8JZh_tn6rHlYonoq28pynzs-q-swEUuktMfvVq7ydaAnQSmhpZ84vpCtod_q_sfPmD3b4MWHkN4YjV5bQw7atr/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/AVvXsEg3qvYn4n2CJNe5EHROnDY257rkh3XwUVPE1G_o3YH1D6P4mL0Va8JrVJhhKQpmLHD6pL65zhLtCTXwOrP_sNKYcBaCsPDsoazMH8LBCLOrzXG7tQ_odOz9lcOMA2XMfrwBlyojka-z/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/AVvXsEjBXFUT0F_qYySf218fPEz1R3l8m-TZtJviSYP5F0WKMRaliuWoqYWDru2gFnxQjT23N9o43uZJlh4rEfivYG_V-shVAWtGA7ORR8BkINQrGzeM_KfB5coPqe9wjQ5hooHa0r_iZ8D3/s1600/maximize.png' title='maximize'/></a></span>
    </div>
    <div class='kislidingbox-container'>
  <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'/>    
    </div>
</div>
</b:if>
<!-- Related Post Widget End -->  

Jika sudah silahkan Simpan Template Anda. Gadget ini hanya muncul di halaman postingan. Silahkan buka salah satu postingan di blog Anda kemudian scroll ke bawah.

Anda bisa juga memanfaatkan box melayang ini untuk gadget-gadget yang lain. Jika ingin mengganti widget artikel rekomendasi dengan widget yang lain, silahkan ganti kode yang   di stabilo hijau  pada kode HTML (kode ketiga) dengan kode gadget Anda.

Referensi:
- Kang Ismet, Tutorial Blog
- Goblogination:  Membuat Slide Box Rekomendasi

Item Info: Membuat Box Pesan Muncul Setelah Scroll