Back To Top adalah tombol yang dapat di pencet atau di klik untuk mengembalikan halaman sebuah blog kembali ke atas, biasanya akan muncul di bawah sebelah kanan halaman apabila halaman di scroll ke bawah.
Selama ini saya membuatnya menggunakan elemen HTML+CSS+JavaScript+link eksternal dan memanfaatkan link awsome untuk menampilkan ikon panah menunjuk keatas atau ikon "chevron up". Tetapi bagaimana jika saya tidak ingin lagi menggunakan link gambar atau image, dan membuang link awsome dari template halaman web kita? Pasti tampilan Back To Top yang telah saya buat itu hilang namun masih meninggalkan kode kode yang tidak lagi dapat dibaca oleh template saya.
Tujuan saya membuang link-link Awsome dan menghindari terlalu banyak link eksternal untuk image adalah agar template buatan saya menjadi lebih simple, fast loading dan bersih. Lalu bagaimana saya mengganti tombol back to top?
MENGGUNAKAN ELEMEN HTML CSS
Jangan kuatir, manfaatkan saja elemen dasar HTML terutama CSS, cara membuatnya adalah sebagai berikut:
Selama ini saya membuatnya menggunakan elemen HTML+CSS+JavaScript+link eksternal dan memanfaatkan link awsome untuk menampilkan ikon panah menunjuk keatas atau ikon "chevron up". Tetapi bagaimana jika saya tidak ingin lagi menggunakan link gambar atau image, dan membuang link awsome dari template halaman web kita? Pasti tampilan Back To Top yang telah saya buat itu hilang namun masih meninggalkan kode kode yang tidak lagi dapat dibaca oleh template saya.
Tujuan saya membuang link-link Awsome dan menghindari terlalu banyak link eksternal untuk image adalah agar template buatan saya menjadi lebih simple, fast loading dan bersih. Lalu bagaimana saya mengganti tombol back to top?
MENGGUNAKAN ELEMEN HTML CSS
Jangan kuatir, manfaatkan saja elemen dasar HTML terutama CSS, cara membuatnya adalah sebagai berikut:
- Masuk kepengaturan blogger
- Pilih tema
- Pilih edit HTML
Jika sudah masuk kehalaman HTML editor, cari kode </head> lalu copy dan pastekan kode CSS berikut diatas kode </head> tadi:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: light-grey;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #333;
}
</style>
Masih melalui halaman HTML editor, cari kode <body> atau <body...(tanpa tutup) kalau tidak ada pada template sobat pastekan saja dibawah </head> kodenya dibawah ini:
<button id='myBtn' onclick='topFunction()' title='Go to top'>🔺</button>
Keterangan: Image merah adalah simbol yang sifatnya sama seperti huruf biasa namun memiliki visual sebuah ikon.
Terakhir cari kode </body> dan lalu copy dan pastekan kode berikut di atasnya:
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
Cara ini ternyata dapat mengurangi beban loading pada halaman blog, karena bebas dari link seperti awsome dan link image :
- Tanpa link awsome
- Tanpa link eksternal image
- Ringan sekali
DEMOwww.editblogtema.net
Jika pengen model back to top kayak yg ada di halaman/blog ini gimana mas?
BalasHapusJk tdk keberatan bisa di bantu kirim via enail tutorialnya
Tsrina kasih