Cara Memasang Tombol "Back to Top" di Blog Blogspot. Hanya Muncul Saat Halaman Blog Discroll ke Bawah.
DSYCODE.com - TOMBOL "Back to Top" (Kembali ke Atas) adalah elemen ekstra dalam sebuah blog atau situs web untuk memudahkan pengunjung kembali ke bagian atas blog tanpa scroll mouse.
Dengan adanya tombol back to top, pengunjung tinggal klik tombol itu dan tampilan bagian atas blog akan muncul secara otomatis.
Tombol Back to Top ini HANYA MUNCUL jika halaman blog dicroll ke bawah. Itu dia kelebihannya.
Cara Memasang Tombol "Back to Top" :
1. Tempate > Edit HTML
2. Copas kode CSS berikut ini di atas kode ]]</b:skin>
#MD-StoTop {padding:12px;position:fixed;bottom:5px;right:3px;cursor:pointer;z-index:999}
3. Pasang kode Javascript berikut ini di atas kode </head>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#MD-StoTop").scrollToTop();
});
</script>
4. Pasang kode HTML berikut ini di atas kode </body>
<a href='#' id='MD-StoTop'><img alt='back to top' src='http://2.bp.blogspot.com/-USm_7qiKVXc/UxUYG09tz_I/AAAAAAAACTA/6BRDkVAwLek/s1600/backtotop.PNG'/></a>
NB : Kita bisa mengganti gambar panah (Tombol "Back to Top" ) dengan gambar pilihan sendiri dengan cara mengganti URL Gambar yang berwarna merah , Bisa diganti dengan gambar back to top sesuai keinginan anda .
5. Save Template!
Kini Tombol "Back to Top" sudah terpasang di Blog Blogspot Anda . Terimakasih Telah Berkunjung dan Membaca
EmoticonEmoticon