Agar Header atau Navigasi Tidak Bergeser ke Bawah Saat Muncul Page Level Ads

Agar Header atau Navigasi Tidak Turun ke Bawah Saat Muncul Page Level Ads

Pada artikel sebelumnya kita sudah belajar membuat Page Level Ads yang secara default akan tampil melayang di atas layar, tapi bisa juga dimodifikasi agar tampil di bawah. Sekarang kita lanjut ke cara modifikasi lain yang bisa diterapkan secara aman di blog.

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.

Mencegah Header Navigasi Bergeser ke Bawah Akibat Page Level Ads

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.


Cara Agar Posisi Header Fix di Atas Saat Muncul Page Level Ads

Trik ini cuma butuh 1 baris kode yang bahkan tidak sampai 30 karakter! Wow!

  1. Pastikan sudah memasang iklan Page Level Ads di blog terlebih dulu. Kemudian masuk ke pengaturan HTML dan cari kode CSS dari selector body.
  2. Tambahkan kode berikut di dalamnya tanpa menghapus kode yang sudah ada:
    padding:0px !important;
    Jika sudah ada property padding maka tinggal diganti valuenya menjadi 0px !important.
  3. Hasilnya kurang lebih seperti ini:
    body {
      ...
      ...
      padding: 0px !important;
      ...
      ...
    }
  4. Jangan lupa simpan pengaturan dan cek kembali tampilan iklan di handphone. Iya, kan Page Level Ads cuma tampil di blog versi seluler (mobile) saja.

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.

Solusi Header Navigasi Blog Tetap di Atas Jika Ada Page Level Ads
Jika sukses, header akan tetap di atas dan tertutup Page Level Ads

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?


PRO

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.

Menu Navigasi Tertutup Page Level Ads

Pengecualian kalau menunya punya posisi relative atau static, kayanya nggak perlu deh pakai cara ini. Namun kembali lagi ke template masing-masing sih karena kode CSSnya pasti berbeda-beda. Sesuaikan dengan kebutuhan saja. Ada juga kok yang pakai position:fixed tapi tidak perlu pakai ini.


KONTRA

Seperti yang sudah disebutkan di paragraf sebelumnya, posisi header akan tetap berada di atas dan tertutup Page Level Ads. Mungkin bagi pengunjung malah keliatan aneh, bahkan ada yang beranggapan header dan menunya hilang (pengalaman pribadi). Padahal sih cuma ketutupan doang.

Cara mencegah header navigasi bergeser ke bawah akibat Page Level Ads ini aman diterapkan karena hanya sedikit memodifikasi CSS saja. Mau diterapkan atau tidak? Semuanya tergantung selera.

Artikel Terkait

23 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Komptik.
    14/1/22
    Profil: https://www.blogger.com/profile/12539447420583352703
    Makasih mbak.
  • ILIYAS SHAIKH
    1/11/21
    Profil: https://www.blogger.com/profile/12138515619496397498
    Igniel please check my site. its not work https://www.therepublicpost.in
  • Moch Dzikry Nur Alam (03)
    9/7/21
    Profil: https://www.blogger.com/profile/06893378825974813409
    Untuk wordpress gimana ya mbak?
  • Han Farhan
    30/10/20
    Profil: https://www.blogger.com/profile/05826918822005935931
    terimakasih mbak sangat membantu
  • Sultan Bisnis Online
    31/8/20
    Profil: https://www.blogger.com/profile/03857057477811086661
    Thanks untuk tips nya teh.
  • Anonim
    Anonim 30/5/20
    Mbak. Mohon bantuannya saya sudah cari kodenya kok tidak ketemu. Saya pame template linkmagz.
  • Unknown
    29/2/20
    Profil: https://www.blogger.com/profile/17163696379316304195
    Sekarang page level ads agak mengganggu

    Navigasi bagian kiri atas tertutup
    • Unknown
      29/2/20
      Profil: https://www.blogger.com/profile/17163696379316304195
      Di situs mba igniel juga nggak bisa di buka menunya

      Coba tes pakai HP
  • Karin3110
    29/12/19
    Profil: https://www.blogger.com/profile/18189741460212808559
    Permisi mbak, mau tanya nih, kebetulan saya pakai template dari mbak yang tekstrim, nah terus saya edit biar pagespeed dan yslow semua 100, terus sisa bagian yslow yg kurang masih 99%, kalau bagian ini ( inline <5cript> tag #1 ) itu script yg mana yah? ini blog saya https://coffe31.blogspot.com/
  • satriaryan22
    27/12/19
    Profil: https://www.blogger.com/profile/11131722359995290918
    Cara buat menu slide nya gmna ya mbak? Ada tutor nya gak mbak?
    • Igniel
      30/12/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Menu slide yang mana maksidnya?
  • Ozik Jarwo
    15/12/19
    Profil: https://www.blogger.com/profile/17745819766519032109
    Ini sih mantep banget, terima kasih mba!
  • Egbujor Victor Chinedu
    29/11/19
    Profil: https://www.blogger.com/profile/10394649788848833852
    Ma'am, i am having little issue with the post; i've already implemented page level ads on the blog without adding link.

    Where will i place the padding: 0px !important; code?

    Or might it be because i translated the page to english? i didn't get the full tutorial. Please Help.
    • Igniel
      29/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      It's inside <body> tag. You can see the example on the article. Hope it helps.
    • Egbujor Victor Chinedu
      29/11/19
      Profil: https://www.blogger.com/profile/10394649788848833852
      Thanks, worked on it.. I get it now.
  • Afriant Ishaq
    21/11/19
    Profil: https://www.blogger.com/profile/05138011198740500251
    Ijin sadap Mba..
  • Ahmad Fauzie
    20/11/19
    Profil: https://www.blogger.com/profile/10353851471811920907
    Mbak... template igniel.com djual ndk
    • Igniel
      21/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak
  • Jurnalis
    20/11/19
    Profil: https://www.blogger.com/profile/10668643000251508781
    Cara membolongi element terus memasang iklan tetap dibawahnya gimana bang?

    Seperti halaman ini, di scrolll ada element yang bolong trus dibawah lapisan nya iklan gitu.
    • Igniel
      21/11/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iklan parallax namanya.
    • Muhammad Rutami
      14/8/20
      Profil: https://www.blogger.com/profile/10134243616370516021
      Ada tutorial cara bikinnya mbak ?
  • bagi pengalaman
    19/11/19
    Profil: https://www.blogger.com/profile/00064183411085459586
    assik, new ngelmu
  • Riedayme
    19/11/19
    Profil: https://www.blogger.com/profile/06842964811765796933
    mantap :v