Membuat Back To Top Muncul Saat di Scroll dengan Efek Jquery - Technology Tower
Tau tombol back to top/kembali keatas kan sob? jika tombol itu di klik maka halaman blog yang sedang dibuka akan otomatis kembali keatas.
Ini akan sangat berguna jika sedang membaca artikel yang sangat panjang sudah sampai bawah lalu sobat perlu kembali keatas, dengan satu klik halamanpun akan kembali keatas.
Namun back to top yang akan Technology Tower posting ini diberi tambahan efek jquery sehingga akan kelihata sedikit elegant :)
oke ini caranya:
1. Masuk dashboard blogger> Rancangan > Edit HTML > centang 'Expand Template Widget'
2. Cari kode </head> kalau susah gunakan CTRL+F untuk mencarinya, lalu paste kode berikut dibawah kode </head> :
<!-- 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 -->
3. Cari kode <body>, lalu masukkan atribut id='top' ke dalam tag <body>, maka hasilnya akan seperti <body id='top'>
4. 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/AVvXsEjn0gW4Obts9veT5NhE8aqDwvcps9r4VrVq_0CL9Nvb64_T_VSPOLN7D7N2jYfLZdMmTgn-N21pCUhZ9q-ilFO2Swmv9lKKjJgYV3E8MOiF1VBEtoYmAo127AUS3cD83VHJs-sYKI7-v1A/s400/arrow1-blue-32.png' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>
Keterangan:
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn0gW4Obts9veT5NhE8aqDwvcps9r4VrVq_0CL9Nvb64_T_VSPOLN7D7N2jYfLZdMmTgn-N21pCUhZ9q-ilFO2Swmv9lKKjJgYV3E8MOiF1VBEtoYmAo127AUS3cD83VHJs-sYKI7-v1A/s400/arrow1-blue-32.png > url gambar, kalian dapat menggantinya
- right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.
5. Simpan Template dan lihat hasilnya
semoga artikel tentang Tutorial Membuat Back To Top dengan Jquery ini dapat baermanfaat
1 comments:
makasihlah bang, lumayan elok lah...
:D
Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
Dan berkomentarlah dengan kata-kata yang sopan.
"Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)
Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>