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
lihat css berikut ini:
4. Cari kode berikut 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...
1 komentar
Bloked link! Link tidak di ijinkan baca disini.
BalasHapusTautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.
Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>