Cara membuat back to top ringan

Telah banyak trik pembuatan back to top oleh para master, semua tujuan sama, yakni: Tombol Back to Top itu di tujukan sebagai tombol navigasi halaman. Letaknya bisasanya di bagian bawah sebelah kiri halaman web atau blog kita, ia muncul terutama pada saat halaman di scroll ke bawah berupa tanda panah menuju ke atas dan apabila di klik halaman akan meluncur kembali ke atas seperti awal di buka.
back to top
Yang membedakan tombol back to top dengan tombol sama yang lain adalah:
  • Bentuknya
  • warnanya
  • kecepatannya
Saya menyarankan kalian memilih yang sederhana saja lagi cepat adapun hal yang mungkin membuat Tombol back to top jadi memberatkan kecepatan loading blog adalah:
  1. Menggunakan ikon awesome, karena ikon ini menyertakan script pemanggil yang dapat memblokir kecepatan halaman blog pada saat merender data.
  2. Menggunakan Javascript, karena penggunaan Javascript yang berlebihan dapat memblokir kecepatan halaman blog secara signifikan.
Bayangkan tombol back to top yang di buat dengan dua musuh kecepatan diatas.

Nah saya akan memberikan tutrorial berdasarkan halaman w3school yang sedikit saya modifikasi sumber kodenya. Ikon back to top ini menggunakan ikon SVG sebagai tombol panahnya.

1. Tambahkan CSS.

Masuk ke pengaturan dasbor blogger
Pilih Tema
Pilih Edit HTML
Cari kode ]]></b:skin>

Lalu copy dan pastekan kode berikut ke atas kode ]]></b:skin> tadi.
body {
  font-family: IM Fell English, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 1px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: transparent;
  color: black;
  cursor: pointer;
  padding: 0px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


2. Tambahkan Ikon SVG.

Masih di dalam halaman editor HTML blogger cari kode <body> atau <body...dengan sambungan..>. Lalu copy kode berikut dan pastekan di atas kode <body> tersebut.

<button id='myBtn' onclick='topFunction()' title='Go to top'><svg style='width:44px;height:44px' viewBox='0 0 24 24'>
<path d='M16.59,9.42L12,4.83L7.41,9.42L6,8L12,2L18,8L16.59,9.42M16.59,15.42L12,10.83L7.41,15.42L6,14L12,8L18,14L16.59,15.42M16.59,21.42L12,16.83L7.41,21.42L6,20L12,14L18,20L16.59,21.42Z' fill='#60c'/>
</svg></button>

3. Tambahkan Javascript

Sekarang cari kode </body> dan copy kode berikut di bawah ini lalu pastekan tepat di atasnya:
<script> //Get the button
var mybutton = document.getElementById(&quot;myBtn&quot;);

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
    mybutton.style.display = &quot;block&quot;;
  } else {
    mybutton.style.display = &quot;none&quot;;
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>
Save Template.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. saya selalu kagum dengan blogger tutorial karena aku nubi banget masalah utak atik template

    BalasHapus
    Balasan
    1. Aku juga nubi kok, hanya saja ingin berbagi pengatahuan sebagai motiviasinya, kali kali aja bakat jadi guru :D

      Hapus
Lebih baru Lebih lama

Formulir Kontak