Beranda » Javascript » jQuery » Smooth scrolling pada komentar

Smooth scrolling pada komentar

Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini:

Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini

1. Login ke akun blogger Anda.
2. Pilih Template » Edit HTML.
3. Pastikan template Anda terpasang jQuery library yang terletak diatas </head>

lihat css berikut ini:

div:target .comment_inner{
border:1px solid #6db500;
-webkit-transition:border-color 5s ease-out;-moz-transition:border-color 5s ease-out;-ms-transition:border-color 5s ease-out;-o-transition:border-color 5s ease-out;transition:border-color 5s ease-out;
}
div:target .comment_child .comment_wrap .comment_inner{
background: #fff;border:1px solid #2f4f45;
}

4. Cari kode berikut ini:

<b:includable id='comments' var='post'>

lalu letakkan css diatas di dibawahnya dalam kode <style>...</style> atau jika malas taruh saja diatas </b:skin>

Sedangkan anda yang masih menggunakan komentar bertingkat bawaan blogger bisa memakai css dibawah ini

.comment .comment-block:target{border:2px solid #800000;}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:2px solid #bbb;}

5. Kemudian cari kode tag ini dalam template anda </body>
6. Tepat diatasnya, pastekan kode di bawah ini:

<script type='text/javascript'>  
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });
}
jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
</script>

7. Simpan perubahan dan selesai.

Lihat perubahan pada daftar komentar blog anda. semoga berguna...

Smooth scrolling pada komentar

Belum ada tanggapan untuk "Smooth scrolling pada komentar"

Post a Comment