Back to top button, atau dalam bahasa indonesianya adalah tombol untuk kembali ke atas pada web/blog sudah sangat umum digunakan.
Hampir semua template blog terbaru sudah dipasang fitur to top button ini, termasuk template Median UI 1.6, yang fungsinya mempermudah pengunjung atau pembaca untuk kembali ke bagian atas layar hanya dengan menekan sebuah tombol. Jadi pembaca tidak perlu melakukan scroll manual, apalagi jika artikel yang sedang dibuka sangat panjang.
Tombol Back to Top Default
Tombol back to top secara default umumnya berada dibagian paling bawah layar sejajar dengan footer. Posisi yang demikian tentu memiliki kekurangan dan kelebihan.
Kelebihan
Karena tombol back to top berada dibagian paling bawah halaman, jadi tidak mengganggu area pandang pembaca pada halaman.
Kekurangan
Pembaca diharuskan melakukan scroll atau gulir halaman secara manual hingga mencapai paling bawah layar sampai menemukan tombol back to top.
Jika artikel lumayan panjang tentu akan sangat menyulitkan pembaca untuk bisa kembali ke bagian atas halaman.
Tombol Back to Top Sticky
Posisi tombol back to top adalah sticky, yang artinya akan selalu terlihat walaupun halaman di gulir ke atas atau kebawah. Sama halnya pada header pada blog ini atau beberapa blog/web lain yang menerapkan posisi sticky.
Kelebihan
Mempermudah pembaca jika ingin kembali ke bagian atas halaman, karena tombol back to top selalu muncul di posisi bawah halaman
Kekurangan
Karena tombol ini selalu muncul maka kemungkinan akan mengganggu area pandang pengunjung pada halaman, terutama pada device dengan layar sempit. Namun kemungkinan ini sangat jarang ditemui.
Untuk mengatasinya kamu bisa mencoba menambahkan Script
untuk membuat tombol hanya muncul hanya jika pada posisi tengah sampai ke bawah halaman.
Cara membuat tombol Back to Top Sticky Median UI 1.6
Sebenarnya tombol back to top baik default ataupun sticky ini sudah disediakan oleh sang kreator M. Maki pada template Median UI, hanya saja bagaimana mengaktifkanya mungkin belum banyak yang tau.
Jika kamu tertarik menjadikan tombol back to top template median menjadi sticky seperti yang ada pada blog ini, silakan ikuti langkah berikut ini.
- Silakan masuk ke Dashboard Blogger
- Masuk ke menu
Layout
kemudian cariBack to top
. - Pada kolom
Number of items to show in list
ganti dengan Angka 1. - Kemudian pindahkan
Top Sticky
ke posisi paling atas. - Simpan
Menyesuaikan posisi tombol Back to top Sticky Median UI 1.6
Untuk mengubah posisi tinggi atau rendahnya tombol back to top sticky, silakan ikuti langkah berikut.
- Silakan masuk ke Dashboard Blogger
- Masuk ke menu
Tema
kemudian cariEdit HTML
. - Silakan cari dengan Tekan
CTRL + F
kode berikut..toTopF{ display:flex; align-items:center; justify-content:center; width:45px; height:45px border-radius:50%; background:var(--linkB); position:fixed; bottom:75px; right:20px; z-index:2; overflow:hidden; }
Pada kode yang aku tandai silakan sesuaikan. Semakin besar nilainya maka posisi tombol akan semakin tinggi. - Simpan dan silakan lihat hasilnya.
Posting Komentar