Cara Pasang Kode Back to Top di Blogger. Tombol Kembali ke Atas (Back to Top Button) merupakan trend desain blog/website kekinian.
Tombol Back to Top memudahkan pengunjung kembali ke bagian atas halaman dalam satu klik atau satu tap.
Back to Top sangat ramah pengguna (user friendly) dan disukasi mesin telusur karena memanjakan pembaca.
Selain kode di bawah ini, Anda juga bisa gunakan kode tombol ke atas dari W3Schools di Posting "How To Create a Scroll To Top Button".
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgowi47sjHkJOnF2MN7k1SrYeDvIeITnLiEgvqIrGCJGKMBc0E6TQPwAP-YboB8Icj6PUA94nmCzohOqQBMnr-lD0j-lxADMwqWU9uv_8wTEcIdeWwPOQPMXx7cjocJIEDOl9a0y3Ck8DgH/s1600/back+to+top+.png" alt="Back to Top" / /></a>
<!--Smooth Back to Top Button End-->
Save!
No comments:
Post a Comment