Memunculkan Tombol Back to Top di Median Ui 1.6

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 cari Back to top.
Pada kolom Number of items to show in list ganti dengan Angka 1.
Kemudian pindahkan Top Sticky ke posisi paling atas.
Simpan

Sekarang seharusnya tombol back to topsudah muncul dibagian bawah kanan blogmu.

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 cari Edit 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.