Buat sobat rocket4rt, kali ini saya akan berbagi cara membuat tombol back to top, back to top adalah tombol button yang berfungsi dimana untuk kembali pada halaman paling atas di blog ataupun web, untuk contohnya sobat bisa lihat sendiri di blog ini , saat sobat scroll halaman blog ke bawah nanti sobat bisa lihat sendiri di sebelah kanan pojok bawah akan mucul anak panah dengan gambar menuju atas dan bila gambar sobat klik nanti otomatis halaman blog ini akan kembali ke atas, jadi sobat tidak perlu lagi deh capek-capek scroll halaman ke atas,,,,, nah untuk caranya sobat bisa simak di bawah ini...
1. Pertama login di blogger sobat.
2. Setelah itu sobat bisa buka menu template lalu edit template.
3. Selanjutnya sobat bisa tekan ctrl+f lalu ketikan kode </head>
4. Setelah ketemu kodenya, taruh kode di bawah ini di atas kode </head>
Keterangan : sobat bisa lihat kode jquery yang berwarna di atas, bila di template sobat sudah ada kode jquery, kode jquery di atas tidak usah di masukan ya,,, kode jqery cukup satu saja, bila sudah sobat bisa save tempalte terlebih dahulu.
5. Selanjutnya sobat menuju tata letak , lalu tambah gadget HTML di mana aja terserah sobat lalu masukan kode di bawah ini.
Keterangan : pada url yang berwarna merah adalah url gambar untuk tombol back to top, silahkan sobat bisa ganti sendiri dengan url gambar kesukaan sobat.
Nah gimana mudah bukan, segini dulu ya untuk tutorialnya, semoga bermanfaat... ^_^ Membuat Tombol Back to Top dengan Efek Bounce, Cara Membuat Tombol Back To Top Keren Di Blogger, Cara Mudah Pasang Tombol Back to Top/Kembali ke Atas
1. Pertama login di blogger sobat.
2. Setelah itu sobat bisa buka menu template lalu edit template.
3. Selanjutnya sobat bisa tekan ctrl+f lalu ketikan kode </head>
4. Setelah ketemu kodenya, taruh kode di bawah ini di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#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>
Keterangan : sobat bisa lihat kode jquery yang berwarna di atas, bila di template sobat sudah ada kode jquery, kode jquery di atas tidak usah di masukan ya,,, kode jqery cukup satu saja, bila sudah sobat bisa save tempalte terlebih dahulu.
5. Selanjutnya sobat menuju tata letak , lalu tambah gadget HTML di mana aja terserah sobat lalu masukan kode di bawah ini.
<style type='text/css' scoped='scoped'>
#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/AVvXsEjbvsCGA4ISd_U4Bv25PL9wOXvXc-HZzcBOG5t16fXdlDsnGBOQ_Jv56ucA8R02tgTyPN8Et_IIa61eYFexudU9Y7o2_kRskhwNpLkJWwC-jFVRkp8TS0Q9YLs7KqDo1a8AgEjvQq4203o/s1600/back+to+top+button.png'/></div>
Keterangan : pada url yang berwarna merah adalah url gambar untuk tombol back to top, silahkan sobat bisa ganti sendiri dengan url gambar kesukaan sobat.
Nah gimana mudah bukan, segini dulu ya untuk tutorialnya, semoga bermanfaat... ^_^ Membuat Tombol Back to Top dengan Efek Bounce, Cara Membuat Tombol Back To Top Keren Di Blogger, Cara Mudah Pasang Tombol Back to Top/Kembali ke Atas
Mudahnya Cara Membuat Tombol Back To Top Di Blog
4/
5
Oleh
hello
