Cara Menciptakan Tombol Kembali Ke Atas (Back To Top) Di Blogger

Minggu, 04 Desember 2016

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

Tombol Kembali ke Atas ini sudah menjadi trending design.

Fungsinya untuk memudahkan pembaca kembali ke bab atas halaman blog yang sedang dibuka dengan mudah. Dengan ekali klik atau tap (sentuh) saja, halaman akan scroll otomatis ke bab 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 arahan tombol kembali ke atas.

1. Klik Tema > Edit HTML
2. Copas arahan berikut ini di atas arahan ]]></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 arahan JavaScript Back to Top berikut ini di atas arahan </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() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>

4. Copas arahan berikut ini di atas arahan </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 arahan nomor 4, yakni link ke arahan 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.

Sumber https://www.romelteamedia.com/