Pertama" saya akan jelaskan fungsi Tombol Back To Top ini, Fungsi dari widget ini tidak lain ialah mengembalikan tampilan blog yang dibuka ke bagian paling atas dengan hanya mengklik saja pada tombol tersebut. Sehingga pengguna tidak perlu memainkan kursor lagi untuk kembali ke bagian paling atas blog.
Tombol Kembali ke Atas (Back To Top Button) ini merupakan trend desain website. Situs-situs ternama juga menggunakannya, termasuk Yahoo dan situs-situs berita.
Cara Memasang Tombol Back To Top
Ada dua kode (HTML & JavaScript) yang harus dipasang di template, jika blog Anda belum memiliki tombol Back To Top ini..gif "Tombol Back To Top")
Namun, karena gambar panah ke atasnya menggukana Awesome Font, maka kita harus pasang LINK ke CSS Awesome Font alias "Huruf Idaman" berupa kode-kode yang membentuk gambar icon di blog.
LINK ke Font Awesome
Pasang di atas kode </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
KODE CSS Back to Top Blogger
Pasang di atas kode ]]></b:skin> atau </style>
/* Back To Top */
#back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px}
.back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}
KODE JavaScript Back to Top Bloger
Pasang di atas kode </body>
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</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>
Save Template!
Nah Bagaimana ? bisa tidak ? Jika ada kesalahan bisa ditanyakan lewat komentar
