Ikuti kami di Blogger atau di Google News
...
Membuat Tombol ToTop Sticky di Median UI 1.6

Membuat Tombol ToTop Sticky di Median UI 1.6

Cara membuat tombol back to top sticky median ui 1.6
Membuat Tombol ToTop Sticky di Median UI 1.6

Totop Button sticky 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 bacl 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 Kalian 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 Kalian tertarik menjadikan tombol back to top template median menjadi sticky seperti yang ada pada blog ini, silahkan ikuti langkah berikut ini.

Step 1: Silahkan masuk ke Dashboard Blogger Kalian..

Step 2: Masuk ke menu Layout kemudian cari Back to top.

Membuat Tombol ToTop Sticky di Median UI 1.6

Step 3 : Pada kolom Number of items to show in list ganti dengan Angka 1.

Membuat Tombol ToTop Sticky di Median UI 1.6

Kemudian pindahkan Top Sticky ke posisi paling atas.

Step 4 : Simpan

Sekarang seharusnya tombol back to top sudah muncul dibagian bawah kanan blog Kalian.

Menyesuaikan posisi tombol Back to top Sticky Median UI 1.6

Untuk mengubah posisi tinggi atau rendahnya tombol back to top sticky, silahkan ikuti langkah berikut.

Step 1: Silahkan masuk ke Dashboard Blogger Kalian.

Step 2: Masuk ke menu Tema kemudian cari Edit HTML.

Step 3 : Silahkan 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 saya tandai silahkan sesuaikan. Semakin besar nilainya maka posisi tombol akan semakin tinggi.

Step 4 : Simpan dan silahkan lihat hasilnya.

Penutup

Sekian cara membuat back to top button sticky pada template Median UI 1.6, semoga bermanfaat dan jika ada pertanyaan silahkan tinggalkan komentar
Baca juga

Advertisement

Dare to be Different!

Posting Komentar

Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code