Tutorial: Cara Membuat Tombol Kembali ke Atas (Back to Top Button) di Blogger.

Cara Membuat Tombol Kembali ke Atas (Back to Top Button) di Blogger.

1. Silahkan buka dashboard blogger anda.
2. Kemudian pilih menu Tema/Theme.
3. Edit HTML
4. Copy kode dibawah ini dan letakan diatas kode </body>

<a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a>

 

5. Oke sekarang mari kita berikan sedikit sentuhan kode CSS nya
6. Copy kode dibawah ini lalu letakan diatas kode ]]></b:skin>

#return-to-top
{
position:fixed;
bottom:20px;
right:20px;
background:#000;
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;
-webkit-transition:all .3s linear;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease
}

#return-to-top i
{
color:#fff;
margin:0;
position:relative;
left:16px;
top:13px;
font-size:19px;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-ms-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease
} 
#return-to-top:hover
{background:rgba(0,0,0,0.9)} 
#return-to-top:hover i{color:#fff;top:5px}

7. Setelah itu mari tambahkan javascriptnya
8. copy kode dibawah ini lalu letakan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(window).resize(function () {
var w = $(window).width();
if (w > 800 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
//]]>
</script>

9. Lalu SAVE TEMPLATE dan lihat hasilnya

JAGOAN KODE