Pages

Cara Pasang Back top Untuk Blogspot

Cara Memasang Back to Top untuk Blogger
Cara Memasang Back to Top Keren untuk Blogger

Tombol Back to Top untuk Blogger ini muncul saat halaman discroll ke bawah. Posisinya juga di samping kanan bawah, sehingga tidak mengganggu halaman.

Back to Top merupakan bagian dari trend desain website/blog karena user friendly, yaitu berfungsi memudahkan pengunjung kembali ke halaman bagian teratas dengan satu klik, tidak mestik scroll atau "usap layar" (HP). Tinggal klik, maka halaman otomatis kembali ke atas.


Cara Pasang Kode Back to Top di Blogger

1. Pastikan blog Anda sudah dipasang link ke jQuery, seperti ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Jika belum ada, maka pasang kode tersebut di atas kode </head>

2. Layout > Add a Gadget > pilih HTML/JavaScript
3. Copas kode berikut ini di kolom content:

<!--Smooth Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color:transparent;
font-size: 12px;
padding: 1em;
display: none;
z-index:9999;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->

, ganti kode gambar warna merah di atas dengan link gambar berikut ini:

https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.gif

4. Save!

Follow by Email