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.
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:
- Menggunakan ikon awesome, karena ikon ini menyertakan script pemanggil yang dapat memblokir kecepatan halaman blog pada saat merender data.
- 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 buttonvar mybutton = document.getElementById("myBtn");// When the user scrolls down 20px from the top of the document, show the buttonwindow.onscroll = function() {scrollFunction()};function scrollFunction() {if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {mybutton.style.display = "block";} else {mybutton.style.display = "none";}}// When the user clicks on the button, scroll to the top of the documentfunction topFunction() {document.body.scrollTop = 0;document.documentElement.scrollTop = 0;}</script>
Save Template.
saya selalu kagum dengan blogger tutorial karena aku nubi banget masalah utak atik template
BalasHapusAku juga nubi kok, hanya saja ingin berbagi pengatahuan sebagai motiviasinya, kali kali aja bakat jadi guru :D
Hapus