Pada artikel sebelumnya kita sudah belajar membangun Page Level Ads yang secara default akan tampil melayang di atas layar, akan tetapi bisa pula dimodifikasi supaya tampil dalam bawah. Sekarang kita lanjut ke cara modifikasi lain yang mampu diterapkan secara kondusif pada blog.
Cara Agar Posisi Header Fix pada Atas Saat Muncul Page Level Ads
- Pastikan sudah memasang iklan Page Level Ads di blog terlebih dulu. Kemudian masuk ke pengaturan HTML dan cari kode CSS dari selector
body. - Tambahkan kode berikut di dalamnya tanpa menghapus kode yang sudah ada:
Jika sudah ada propertypadding:0px !Important;
padding maka tinggal diganti valuenya menjadi 0px !Important.body ... ...
padding: 0px !Important;
... ...
PRO
KONTRA
Cara mencegah header navigasi bergeser ke bawah imbas Page Level Ads ini aman diterapkan karena hanya sedikit memodifikasi CSS saja. Mau diterapkan atau tidak? Semuanya tergantung selera.
Seperti yang sudah disebutkan pada paragraf sebelumnya, posisi header akan tetap berada dalam atas & tertutup Page Level Ads. Mungkin bagi pengunjung malah keliatan aneh, bahkan masih ada yang beranggapan header dan menunya hilang (pengalaman tertentu). Padahal sih cuma ketutupan doang.
Pengecualian apabila menunya punya posisi relative atau static, kayanya nggak perlu deh pakai cara ini. Tetapi balik lagi ke template masing-masing sih lantaran kode CSSnya pasti berbeda-beda. Sesuaikan dengan kebutuhan saja. Ada pula kok yang pakai position:fixed tapi nir perlu pakai ini.
Saya rasa cara ini patut diterapkan bagi template dengan menu navigasi yang berada di samping dan muncul secara slide ketika meng-klik tombol. Dengan catatan posisinya fixed menggunakan CSS position:fixed (seperti template saya). Karena kalau tidak diterapkan nanti malah munculnya kaya gambar ini. Header sih memang turun, eh tapi kok menunya tetap di atas sih. Tombol open / close menu jadi ketutup deh.
Sudah capek-capek baca dari awal, ternyata triknya sepele cuma gitu doang. Ya memang sih, ternyata solusi dari masalah tidak selalu harus panjang lebar dan rumit. Kalau ada yang sederhana kenapa mesti dibuat ribet?
Kenapa bisa terjadi? Ini karena ada CSS yang ditambahkan otomatis oleh Google ketika script AdSense dijalankan. Tujuannya sih bagus, biar header tidak terutup iklan dengan efek samping posisi layout blog akan sedikit turun. CSS yang ditambahkan otomatis adalah property padding untuk selector body. Maka dari itu kita membutuhkan !important agar jarak padding tidak terpengaruh oleh kode CSS yang ditambahkan Google.
Trik ini cuma butuh 1 baris kode yang bahkan tidak sampai 30 karakter! Wow!
Namun ada beberapa orang yang ternyata malah kurang suka kalau headernya tergeser ke bawah. Kamu salah satu yang suka headernya tetap di atas nggak? Kalau iya, silakan dibaca sampai habis tutorial membuat posisi header tidak turun ke bawah akibat Page Level Ads berikut ini.
Ketika Page Level Ads muncul baik di atas maupun bawah, dia akan mendorong elemen HTML lain sehingga posisinya akan bergeser. Seperti contoh ini, dia akan menggeser header atau navigasi yang membuat elemen tersebut memiliki jarak dari batas atas layar.
