Ubah Posisi Scroll Button di HTML Blog

Cara Edit Posisi Scroll Blog | Ubah Scroll di Evo Magz Blog | Tombol Scroll atau Scroll Button merupakan salah satu tombol penting untuk kenyamanan pengunjung blog. Lalu bagaimana cara mengatur posisi tombol scroll yang sudah terpasang?

Kebetulan, salah satu blog yang Madya miliki menggunakan template dari Mas Sugeng yang bernama Evo Magz. Di dalam template tersebut, terdapat beragam widget yang menarik dan bagus. Salah satunya adalah tombol scroll.

Nah, saat mencoba memasang widget ShareThis, Madya mengalami kesulitan. Kesulitannya adalah tombol scroll nya tertutup oleh tombol share. Sehingga memaksa Madya untuk mengedit posisinya. Biasanya, kasus ini terjadi saat membuka blog via ponsel.

Lalu bagaimana cara mengatur posisi tombol scroll agar tidak tertutup atau tertimbun tombol lain? Tak ada cara lain selain mengedit kode HTML dari tombol scroll nya sendiri. Dan di sini Madya berhasil lakukan menggunakan template Evo MAgz. Kemungkinan bisa digunakan di template lain.

#1 Buka Tab TEMPLATE dan klik EDIT HTML

#2 Cari kode bertuliskan /* BACK TO TOP BUTTON */

Jika kesulitan mencari nya, gunakan tombol Ctrl dan F lalu ketik /* BACK TO TOP BUTTON */

Jika tidak menemukan kata yang mirip, coba ganti kata-katanya. Misal BACK TO TOP atau TO TOP atau BTN dan lain-lain. Kata-katanya tidak jauh dari kata tersebut. Atau cari yang ada kata BUTTON nya bisa jadi ketemu.

#3 Setelah ketemu, harus nya dibawahnya terdapat kode-kode

Kode-kode yang dimaksud adalah kode-kode yang digunakan untuk membuat tombol scroll nya. Misalnya, kode-kode scroll button milik template Evo Magz seperti di bawah ini :

/* BACK TO TOP BUTTON */
#back-to-top {
background:#FF4F4F;
color:#ffffff;
padding:8px 10px;
font-size:24px;
}
.back-to-top {
position:fixed !important;
position:absolute;
bottom:80px;
right:20px;
z-index:999;
}

Jika kode-kode di atas sudah ketemu, maka dari sini Anda dengan mudah dapat bereksperimen. Misal untuk merubah ukuran kotak tombol scrollnya, Anda dapat ubah angka yang ada di kode "padding". Mengubah font nya di "font-size".

#4 Ubah kode posisi

Lalu bagaimana cara mengubah posisi tombolnya? Secara default nya, tombol scroll itu dibuat di posisi bawah sebelah kanan atau pojok kanan. Berarti, yang dapat diubah adalah posisi dari bawah ke atas dan dari kanan ke kiri.

Untuk mengubah posisi dari bawah ke atas, silahkan ubah angka yang ada di kode "bottom" misal menjadi "bottom:100px" maka posisi tombol nya akan sedikit naik.

Untuk mengubah posisi dari kanan ke kiri, silahkan ubah angka yang ada di kode "right" misal menjadi "right:50px" maka posisi tombol nya aka sedikit ke kiri atau ke tengah.

Bagaimana? Mudah, bukan?! Demikian artikel singkat mengenai cara ubah posisi scroll button di blog. Terutama blog di template Evo Magz.