Cara Membuat Efek Smooth Scrolling pada Komentar Blogger dengan jQuery/JavaScript - Tutorial kali ini cukup sederhana tapi membuat hati pengunjung menjadi woles dan tenang, hehe karena dengan memakai efek smooth scrolling pada komentar blogger, sesuai dengan judulnya smooth scrolling = scroll lembut artinya ketika anda sudah berkomentar di blog ini, anda akan merasakan scroll yang lembut dan membawa anda kebawah (komentar yang baru anda terbitkan), dan menamdai komentar terbaru (maksudnya anda yang berkomentarnya) dengan garis warna biru, biasanya kan polos, style nya bisa sobat ganti dan tidak terpaku hanya border, tapi anda juga dapat menggantinya/menambahkannya dengan background yang berbeda warnanya dari yang lain, bisa disesuaikan oleh sobat warnanya. Klik link demo dibawah ini dan tunggu hingga loadingnya selesai (cuman 1 detik kok, hehe).
Berikut cara pemasangannya
smooth scrolling pada komentar blogger :
1. Login ke blogger.com
2. Pada dashboar -> template -> klik edit HTML
3. Kemudian cari kode
</head> dan
tambahkan kode jQuery dibawah ini diatasnya
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Pastikan bahwa jQuery ditemplate anda hanya 1, bila terdapat 2 script atau lebih akan terjadi error dibeberapa bagian script tidak bekerja. Apabila ingin mengganti versi cukup ganti Linknya saja.
4. Kemudian cari kode
</body>
5. Tambahkan kode dibawah ini di atas
</body>
<script type='text/javascript'>
// Efek Smooth Scrolling pada Komentar Blog by Blog Krizeer (blogkrizeer.blogspot.com)
$(function(){if(window.location.hash){var x=window.location.href.split("#")[1];$('html,body').animate({scrollTop:$('#'+x).offset().top-150},3000)}})
</script>
Kode yang saya kasih tanda diatas bisa anda ganti dengan kode lagi.
- Kode pertama 150 itu kode jarak antara atas dengan komentar terbaru, semakin kecil angkanya maka akan semakin atas elemen komentar terbarunya.
- Kode kedua 3000 itu kode waktu yang ditentukan, semakin besar kodenya maka akan semakin lambat proses scrolling kebawahnya, sebaliknya semakin kecil kodenya maka akan semakin cepat scrolling kebawah nya.
6. Kemudian tambahkan sedikit bumbu CSS target untuk memberi Efek.
div:target .comment_body{border:1px solid #03a1d5;box-shadow:0 0 5px #ddd}
div:target .comment_child .comment_wrap .comment_body{border:1px solid #03a1d5;box-shadow:0 0 5px #ddd}
Bagi anda pengguna Thread Comment bawaan Blogger, bisa menggunakan kode dibawah ini:
.comment .comment-block:target{border:1px solid #03a1d5;box-shadow:0 0 5px #ddd}
.comments .comment-thread.inline-thread .comment .comment-block:target{border:1px solid #03a1d5;box-shadow:0 0 5px #ddd}
Silahkan sesuaikan kode diatas dengan template masing-masing. Dan kreasikan sesuai keinginan anda.
7. Klik Simpan pada template.
Untuk mengetest berfungsi atau tidak nya, langsung saja sobat berkomentar di blog sendiri, apa ada efek smooth nya apa ngga?
Fungsi dari
Pemakaian Efek smooth scrolling ini selain mempercantik tampilan komentar baru yang baru tampilkan juga berfungsi sebagai penanda bahwa komentar yang berefek adalah yang baru saja ditampilkan, selain itu tidak akan menambah Loading blog sobat maksudnya
tutorial Membuat Efek Smooth Scrolling ini tidak memberatkan blog karena tidak memakai link.
mantap gan :D Keep Posting :)
BalasHapusBlogwalking Andrekocak Blog - Blog Cerita
oke gan
Hapusklo boleh tau, ada tutorial buat black quote yang hitam dan ada scroll nya itu gak?
BalasHapusmasuk kesini sob http://blogkrizeer.blogspot.com/2013/12/cara-memasang-prism-syntaxhighlighter.html
Hapusnambah ilmu nich sob . . . makasi tutorialnya
BalasHapussama-sama sob, makasih sudah berkunjung
Hapusijin nyimak saja sob :D
BalasHapusntuh bumbu CSSnya taro dimana?
BalasHapusTerima kasih banyak gan, sekarang udah saya pasang di blog saya dan lancar :)
BalasHapusmakasih
BalasHapusblogwalking gan'
BalasHapushttp://hafidz-fr-chp04.blogspot.co.id/