Mengatasi Sticky Widget Menutupi Laman Dibawahnya

Sticky kerap dimanfaatkan kebanyakan blogger sebagai wadah atau tempat berlangganan email. Tidak jarang juga dimanfaatkan sebagai tempat pemasangan iklan.

Meskipun sticky widget cukup baik untuk menarik perhatian pengunjung, sebaiknya Anda perhatikan juga poin penting ini.

1. Pastikan situs atau blog Anda sudah responsive. Setidaknya untuk stickynya saja sudah cukup.
2. Periksa beberapa halaman posting Anda, mulai dari posting pendek sampai posting terpanjang.

Jika Anda menggunakan sticky widget pada sidebar, maka ketika pengunjung menggulir halaman posting Anda sampai ke titik fokus, maka widget tersebut tidak akan terseret kebawah.

Nah, apabila widget sticky tersebut Anda letakkan diatas beberapa widget lain, maka widget yang ada dibawah tersebut akan tertutupi oleh sticky.

Untuk itu, sebaiknya Anda siapkan juga CSS responsive untuk mengantisipasinya. Misalnya kusus untuk pengguna mobile layar 600px kebawah fungsi sticky di matikan dsb. Namun jika itu sudah ada tidak ada masalah.

Kemudian, pastikan css sticky Anda diberi z-index lebih rendah dari widget dibawahnya.

Coba perhatikan hasil screnshoot dibawah ini:
dan

Penampakan diatas pada sticky yang belum di rapikan jelas menggangu pemandangan. Pengalaman itu akan semakin terasa ketika membuka menggunakan layar lebih sempit.

Tidak perlu melakukan perubahan yang banyak untuk melakukan itu.
Seperti yang telah saya urai diatas tadi, pastikan z-index sticky lebih kecil dibanding widget dibawahnya atau bisa juga dengan menggunakan z-index:0

Contoh
Misalnya pada Widget sticky Anda menggunakan id HTML6
Sedangkan widget dibawahnya menggunakan id HTML7
Maka solusinya adalah:
#HTML6{z-index:0}
#HTML7{position:relative;background-color:white}
CSS diatas sudah cukup untuk memperbaiki sticky widget yang menutupi widget dibawahnya.

Setiap kode pada template tidak selalu sama, perhatikan pula poin itu agar berhasil mulus. Jika masih ada yang ingin ditanyakan silahkan.
URL

2 Tanggapan » Lihat

mas masih belom ngerti gimana caranya

hanya penambahan CSS sob. silahkan perjelas poin mana yang belum ngerti / tulis alamat situsnya sob, nanti coba saya intip elemen yang dimaksud

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini