Membuat atau Memasang Tombol Back to Top
Membuat tombol back to top atau kembali ke atas merupakan salah satu yang penting dalam sebuah blog. Dengan memasang tombol back to top ini para pembaca atau pengunjung akan mudah untuk kembali ke atas dalam halaman blog kamu.
Tombol back to top yang saya berikan ini sangat sederhana tidak ada efek bounce seperti yang telah dibagikan oleh +Kang Ismet dalam blognya.
Langkah pertamanya adalah pergi ke mode pengeditan template kamu untuk memasang script jQuery dibawah ini diatas kode </head>, jika dalam blog kamu sudah tertera jQuery saya sarankan untuk tidak memasangnya lagi.
Langkah kedua yaitu cari kode pertama dari </style> atau ]]></b:skin> lalu letakkan kode CSS ini tepat diatasnya.
Langkah terakhir atau yang ketiga yaitu cari kode </body> lalu letakkan script ini tepat diatasnya.
Catatan :
Kamu dapat mengubah link ini untuk mengganti tipe atau gambar back to top diatas.
Terimakasih kepada +Kang Mousir yang telah membagikan tutor ini.
Terimakasih telah membaca Membuat atau Memasang Tombol Back to Top. Jika Anda menemukan sebuah masalah atau jika Anda memiliki masukan buat kemajuan Blog ini silahkan berkomentar dengan baik dibawah ini.
Tombol back to top yang saya berikan ini sangat sederhana tidak ada efek bounce seperti yang telah dibagikan oleh +Kang Ismet dalam blognya.
Langkah pertamanya adalah pergi ke mode pengeditan template kamu untuk memasang script jQuery dibawah ini diatas kode </head>, jika dalam blog kamu sudah tertera jQuery saya sarankan untuk tidak memasangnya lagi.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>Langkah kedua yaitu cari kode pertama dari </style> atau ]]></b:skin> lalu letakkan kode CSS ini tepat diatasnya.
/*Back To Top*/
#top{background-color:#444;margin:0;padding:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#E73138}Langkah terakhir atau yang ketiga yaitu cari kode </body> lalu letakkan script ini tepat diatasnya.
<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLqhkd4JLNRCAqg2nZmtSs_8E4Rqvh8gYgObFzDFwsxuMVNddZBEyf7yTficRl8kij5JY7ctuc7J5MCNtDDaZsT7HEOnZiwDq0ZnjT-fJdXvlcSfAa7ATahTeWYqDcRovjherFZrD_gYaC/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>Catatan :
Kamu dapat mengubah link ini untuk mengganti tipe atau gambar back to top diatas.
Terimakasih kepada +Kang Mousir yang telah membagikan tutor ini.
Terimakasih telah membaca Membuat atau Memasang Tombol Back to Top. Jika Anda menemukan sebuah masalah atau jika Anda memiliki masukan buat kemajuan Blog ini silahkan berkomentar dengan baik dibawah ini.
