Dengan adanya tombol back to top, pengunjung tinggal klik tombol itu dan tampilan bagian atas blog akan muncul secara otomatis.
Sebelumnya CB sudah dua kali share tentang Cara Menampilkan, Membuat, atau Memasang "Back to Top" Bottom (Tombol Kembali ke Atas) di Blog Blogspot, yaitu Cara Memasang Back to Top di Blog Versi 1 dan Cara Memasang Back to Top di Blog Versi 2.
Tombol "kembali ke atas" versi 1 menggunakan Javascript. BtT versi 2 menggunakan CSS/HTML saja, tanpa JS, sehingga Fast Loading.
Kali ini, sebut saja Versi 3, CB share Cara Memasang Tombol "Back to Top" yang kodenya diambil dari template blog Newswire yang sudah CB modif menjadi Newswire CB (for sale!).
Tutorial dan kode-kode untuk memasang tombol Back to Top (BtT) ini sudah dipraktekkan dan sukses di template demo New Max Mag. Di template aslinya, Max Mag, tidak ada tombol kembali ke atas.
Apa bedanya tombol BtT yang versi 3 ini dengan versi sebelumnya? Bedanya, dua BtT sebelumnya muncul terus, halaman discroll ataupun tidak. Sedangkan versi 3 ini, tombol "kembali ke atas" alias Back to Top itu HANYA MUNCUL jika halaman blog dicroll ke bawah. Itu dia kelebihannya.
Cara Memasang Tombol "Back to Top"
1. Tempate > Edit HTML2. 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>
$(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>
Catatan:
1. Kita bisa mengganti gambar panah (Tombol "Back to Top" ) dengan gambar pilihan sendiri dengan cara mengganti URL Gambar yang berwarna merah.
2. Lihat: Koleksi Gambar Tombol Back to Top untuk Blog
5. Save Template!
Kini Tombol "Back to Top" sudah terpasang di Blog Blogspot Anda! Good Luck! (http://contohblognih.blogspot.com).*
