Sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas.]
Sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, 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 Layout > Edit HTML
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:
6. Simpan dech....
7. Coba lihat hasilnya...
Keterangan:
- Warna Biru > url gambar
- right:2px;top:2px; > posisi gambar pada template adalah 2 pixel dari atas dan kanan.
info: untuk gambar / tombolnya bisa anda download disini.
Jangan Lp Untuk Lihat Contoh Back to Top Lainnya :
1. Back To Top Atas/Bawah Transparent
Berikut Cara Membuat Smoothscroll Go to Top
1. Login ke akun Blogger anda
2. Pilih Layout > Edit HTML
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/AVvXsEhBNALHsWO39AvLrWf37qSQilFlKFEgt77EaGMVIh06xpy7B2kuaSCC-9sg5Sz9qgD_PH1aO8SEIR9eENHx-qAdHTZXIM4FiCX1-6c5XyIelSbfv7nvsGmYRpJ5TvKSkKhiU7aYJwKn7D3k/s1600/Go-To-Top.png' style='right:2px;top:2px;position:fixed'/>
</a>
</div>
6. Simpan dech....
7. Coba lihat hasilnya...
Keterangan:
- Warna Biru > url gambar
- right:2px;top:2px; > posisi gambar pada template adalah 2 pixel dari atas dan kanan.
info: untuk gambar / tombolnya bisa anda download disini.
Jangan Lp Untuk Lihat Contoh Back to Top Lainnya :
1. Back To Top Atas/Bawah Transparent
TV One - Berita Terkini
0 komentar:
Posting Komentar