Pasti bagi anda pencipta blog, Pasti blog anda ingin ada tombol back to top. Animasi ini digunakan untuk kembali langsung ke pos paling atas, untuk memudahkan orang melihat postingan anda dan kembali ke postingan paling atas lagi. Nah saya sudah menyiapkan langkah-langkahnya untuk membuat tombol back to top :
Langkah Pertama :
- Log in ke Blogger.
- Lalu masuk ke menu template.
- Klik Edit HTML.
- Cari kode <head> (gunakan ctrl+f untuk memudahkan).
- Masukkan kode (dibawah) tepat dibawah kode <head> .<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop() > 100) { $('#HermanbagusTop').fadeIn(); } else { $('#HermanbagusTop').fadeOut(); } });$('#HermanbagusTop > img').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>
- Lalu setelah itu Simpan Template.
Langkah Kedua :
- Setelah langkah pertama selesai. Sekarang tinggal Langkah kedua yaitu masuk ke menu Tata Letak.
- Klik Add Gadget(Tambahkan Gadget).
- Pilih HTML/Java Script
- Lalu masukkan kode dibawah :
<style>
#HermanbagusTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='HermanbagusTop'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AcFbZIRxcNl1XtIe0AmKBWLTVKnRxsTtE6B9ms8YR9HYq62syM-r1A-p4o6JsRBYwypxS_xR2CnmwDfw080Q_QOmSXsD24suwI9mYWrrZkiN4ALvRTX0PCsiCPGb7-8fj5iN2H3Zapw/s150/back+to+top+hermanbagus.png' style='margin-right:-9px'/></div>
Keterangan:
- Kode yang berwarna Hijau adalah kode yang harus anda cari.
- Kode yang berwarna Merah adalah url gambar yang bisa anda ganti dengan url gambar kalian sendiri.
0 komentar:
Posting Komentar