Cara MembuatTombol Back To Top Di Blogger [Terbaru]
Seperti namanya button back to top yang berarti dimana tombol ketika di klik/pencet akan mengarah ke bagian awal/atas website. Biasanya tombol ini terletak di bagian pojok kanan bawah di sebuah blog atau website.
Kegunaan dari tombol ini yaitu untuk mempermudah user mengembalikan ke bagian awal sebuah website atau artikel tanpa harus scrolling.
Langsung saja kita masuk ke langkah-langkahnya :
1. Buka blog anda > Tema / Template > Edit HTML.
2. Tambahkan atau copy - paste code di bawah ini tepat di atas </head> atau di bawah <head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>3. Lalu tambahkan code di bawah ini tepat di atas </style> atau ]]></b:skin>
/* Back To Top */
#back-to-top{background:#4682B4;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
*Untuk menyesuaikan warna yang kalian inginkan kalian bisa mengganti tulisan yang diberi warna merah, sesuai warna yang kalian inginkan.
4. Tambahkan code berikut tepat di atas </body>
<div class="back-to-top">
<a href="https://www.blogger.com/blogger.g?blogID=90221396511449265#" id="back-to-top" title="back to top">
<i class="fa fa-chevron-up">
</i></a></div>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>5. Simpan template.
Post a Comment