Di trik lama, kebanyakan orang menggunakan gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.
Berikut Cara Membuat Smoothscroll Go to Top
1. Login ke akun Blogger anda
2. Pilih Template > Edit HTML > Lanjutkan..
3. Cari kode </head>, lalu paste kode berikut di atasnya:
4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti <body id='top'>
5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nIsb2zf_2QyhOgQJIDP-29FwAVMALSPHfcAgWUZAL8yYKXEnGOt4Y9BSeyJAVw_Y8BIAcIjM6yAapqaFD3Bdgvtb5wNo5C7ok0te3x_qEOTeeBueI_HXmnLkdw3DuLxy-UWwvJ1ObZQ/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.
- Untuk gambarnya, sob semua bisa tanya sama sob google..hehe =)
6. Terakhir, klik Save Template.(Tutup)
Good Work Sob ...
Berikut Cara Membuat Smoothscroll Go to Top
1. Login ke akun Blogger anda
2. Pilih Template > Edit HTML > Lanjutkan..
3. Cari kode </head>, lalu paste kode berikut di atasnya:
<!-- SCROLLING BACK-TO-TOP -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini -->
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
<!-- SCROLLING BACK-TO-TOP END -->
4. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti <body id='top'>
5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:
<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nIsb2zf_2QyhOgQJIDP-29FwAVMALSPHfcAgWUZAL8yYKXEnGOt4Y9BSeyJAVw_Y8BIAcIjM6yAapqaFD3Bdgvtb5wNo5C7ok0te3x_qEOTeeBueI_HXmnLkdw3DuLxy-UWwvJ1ObZQ/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nIsb2zf_2QyhOgQJIDP-29FwAVMALSPHfcAgWUZAL8yYKXEnGOt4Y9BSeyJAVw_Y8BIAcIjM6yAapqaFD3Bdgvtb5wNo5C7ok0te3x_qEOTeeBueI_HXmnLkdw3DuLxy-UWwvJ1ObZQ/s400/arrow1-blue-32.png > url gambar
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.
- Untuk gambarnya, sob semua bisa tanya sama sob google..hehe =)
6. Terakhir, klik Save Template.(Tutup)
Good Work Sob ...
0 komentar