Cara Membuat Tombol / Button Back To Top. Sobat blogger, kali ini saya ingin membuat artikel tentang tutorial, pada artikel saya kali ini saya ingin membuat sebuah tutorial tentang bagaimana cara membuat tombol atau button back to top di blog, dalam bahasa indonesia tombol kembali ke atas. tombol back to top ini sangat berguna sekali untuk memudahkan pengunjung blog sobat ke halaman atas saat pengunjung menggulirkan halaman situs kita kebawah.
Jelas sekali penggunaan tombol atau button ini sangat bermanfaat bagi pengunjung yang sudah menggulirkan halaman kebawah, tidak perlu repot-repot lagi menggulirkan ke atas, karena dengan menekan button atau tombol back to top ini, secara otomatis akan langsung dengan cepat menggulirkan halaman ke atas.
Oke sobat blogger, jika sobat ingin memasangnya diblog sobat, silahkan simak dan ikuti tutorialnya, saya harap juga sobat sebelum melakukan tutorial ini untuk memback up terlebih dahulu templatenya, karena kemungkinan bisa saja terjadi kesalahan.
Cara Membuat Tombol / Button Back To Top
1. Buka akun blogger.
2. Pilih template >> Edit HTML.
3 Sekarang letakan kode font dibawah ini diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
4. Selanjutnya letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 10px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
}
5. Sekarang letakan kode dibawah ini tepat diatas kode </body>
</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});
</script>
6. Sekarang save template sobat.
Jika ada pertanyaan untuk tutorial ini silahkan ajukan di kolom komentar, sekian dulu untuk tutorial cara membuat button back to top menu di blog, lebih dan kurangnya saya mohon maaf.
