Cara Pasang Kode Back to Top di Blogger Terbaru dan Terbaik

Baca Juga

Cara Pasang Kode Back to Top di Blogger Terbaru dan Terbaik karena paling keren, simple, ringan (fast loading), dan minim kode.

Back to Top adalah tombol berupa gambar panah di bawah kanan halaman blog/website untuk memudahkan pembaca kembali ke bagian atas halaman web. 

Cara Pasang Kode Back to Top di Blogger

Berikut ini cara memasang tombol back to top di blog Blogger. Kode tombol kembali ke atas inilah yang dipasang di blog ini.

1. Klik Tema > Edit HTML
2. Pastikan ada link ke awesome font di atas kode </head> seperti ini:

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Jika belum ada, pasang dong! Copas kode tersebut di atas kode </head>

3. Kode CSS Back to Top

Pasang kode berikut ini di atas kode ]]></b:skin>

#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}

4. Kode JavaScript Back to Top

Pasang kode berikut ini 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() &gt; 200) {
$(&#39;#back-to-top&#39;).fadeIn();
} else {
$(&#39;#back-to-top&#39;).fadeOut();
}
});
$(&#39;#back-to-top&#39;).hide().click(function() {
$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
return false;
});
</script>

Demikian Cara Pasang Kode Back to Top di Blogger Terbaru dan Terbaik