CARA MEMBUAT BACK TO TOP DENGAN CSS

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.
trik membuatnya melalui css
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:

  1. Masuk kepengaturan blogger
  2. Pilih tema
  3. 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 &gt; 20 || document.documentElement.scrollTop &gt; 20) {
    document.getElementById(&quot;myBtn&quot;).style.display = &quot;block&quot;;
  } else {
    document.getElementById(&quot;myBtn&quot;).style.display = &quot;none&quot;;
  }
}
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 :
  1. Tanpa link awsome
  2. Tanpa link eksternal image
  3. Ringan sekali
DEMO
www.editblogtema.net


Comments

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP