Membuat Tombol Back To Top Dengan Efek Bounce Di Blogger
Membuat Tombol Back To Top Dengan Efek Bounce Di Blogger- Back to top adalah sebuah tombol sederhana yang fungsinya adalah untuk kembali ke halaman teratas blog. Jadi, misalkan terdapat sebuah blog yang sangat panjang isi konten (artikel)nya, kemudian karena si pengunjung blog malas untuk menggunakan scrolling pada mouse untuk kembali ke halaman teratas, mereka dapat menggunakan tombol back to top ini.
Apa maksud dari efek bounce? Coba pikir, bounce dalam bahasa Inggris berarti memantul. Jadi, back to top dengan efek bounce adalah back to top yang mempunyai efek pantulan. Jadi, cara kerjanya adalah ketika tombol back to top diklik, maka otomatis halaman blog akan langsung ke bagian teratas halaman lalu disanalah terjadi efek pantulan. Nah, untuk membuatnya, silakan Anda ikuti langkah langkah berikut ini:
1. Kunjungi Template > Edit HTML.
2. Cari kode </head>. Letakkan kode jQuery berikut tepat diatasnya.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Apabila blog Anda sudah memiliki kode jQuery, lewati langkah ini karena blog tidak boleh memiliki lebih dari satu kode jQuery.
3. Masih pada kode </head>, letakkan kode berikut tepat diatasnya.
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
4. Simpan template. Sekarang kunjungi Tata Letak > Tambahkan Gadget > HTML/JavaScript.
5. Letakkan kode berikut pada kolom konten (judul abaikan saja):
<style type='text/css' scoped='scoped'>6. Klik simpan. Sekarang, kunjungi blog Anda untuk melihat hasilnya.
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlis88pp4WL8NFkDrmCWgLSNhPgDqR6zmU3dLAYbTAJWX-buBTOHwisNSURRlXmLvlFUVCZ-tP6X3-Lii52jNPMuEwD5coqTOo7SdpYXL1Sa_YfuLA2SHfoqlddKxfI3qgp3EJAa5bpQ/s1600/arrow-up_basic_blue.png'/></div>
P.S: Tombol back to top ini menggunakan efek fade in dan fade out yang artinya akan muncul perlahan. Maksudnya muncul perlahan adalah tombol back to top baru akan terlihat apabila halaman blog di scroll.
+di+blogger.png)
0 komentar