Cara Membuat Tombol Kembali ke Atas

Tips blogging berikut saat menginstal atau membuat tombol kembali ke atas (kembali ke atas tombol).

Tombol ini kembali ke atas telah menjadi desain tren.

Ini berfungsi untuk membuatnya lebih mudah bagi pembaca kembali ke atas halaman blog yang sedang dibuka dengan mudah. Dengan hanya klik atau ketuk (sentuh), halaman akan bergulir secara otomatis ke atas.

Template blogger default belum diinstal kembali ke atas Tombil. Karena itu, kita harus menginstal Sendri.

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

Berikut ini cara memasang kode tombol kembali ke atas versi dinadino.com

1. Klik Tema > Edit HTML
2. Copas 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}

3. Copas kode JavaScript Back to Top 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>
4.  Copas kode berikut ini di atas kode </head> 

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js’></script>
<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/>

Catatan:– Kode nomor 4 biasanya sudah ada di template blog Anda. Kalau sudah ada, abaikan kode nomor 4, yaitu link ke kode jQuery dan link ke Awesomefont.
5. Save! Simpan template.

Ayo Berbagi Tips

Leave a Reply

Your email address will not be published. Required fields are marked *