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

Baca Juga

Tips Blogging berikut ini tentang cara memasang atau membuat tombol kembali ke atas (Back to Top Button).

Tombol Kembali ke Atas ini sudah menjadi trending design.

Fungsinya untuk memudahkan pembaca kembali ke bagian atas halaman blog yang sedang dibuka dengan mudah. Dengan ekali klik atau tap (sentuh) saja, halaman akan scroll otomatis ke bagian atas.

Template bawaan blogger belum dipasangi tombil back to top ini. Karenanya, kita harus memasang sendri.

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

Berikut ini cara memasang kode tombol kembali ke atas.

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.

Demikian Cara Memasang Back to Top untuk Blogger. (www.romelteamedia.com).

Sumber

See the Pen Floating Back to Top Button with Smooth Scroll using CSS & JQuey by Rohan Hapani (@desirecode) on CodePen.