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

Bagaimana supaya header tidak bergeser atau terdorong ke bawah ketika ada iklan Page Level Ads. Solusi agar navigasi tidak turun menggunakan modifikasi yang aman untuk AdSense.
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.

21
Agar Header atau Navigasi Tidak Bergeser ke Bawah Saat Muncul Page Level Ads
Agar Header atau Navigasi Tidak Bergeser ke Bawah Saat Muncul Page Level Ads
Bagaimana supaya header tidak bergeser atau terdorong ke bawah ketika ada iklan Page Level Ads. Solusi agar navigasi tidak turun menggunakan modifikasi yang aman untuk AdSense.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

21 komentar

  • 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Komptik.
    14 Januari, 2022
    Profil: https://www.blogger.com/profile/12539447420583352703
    Makasih mbak.
  • ILIYAS SHAIKH
    01 November, 2021
    Profil: https://www.blogger.com/profile/12138515619496397498
    Igniel please check my site. its not work https://www.therepublicpost.in
  • Moch Dzikry Nur Alam (03)
    09 Juli, 2021
    Profil: https://www.blogger.com/profile/06893378825974813409
    Untuk wordpress gimana ya mbak?
  • Han Farhan
    30 Oktober, 2020
    Profil: https://www.blogger.com/profile/05826918822005935931
    terimakasih mbak sangat membantu
  • Sultan Bisnis Online
    31 Agustus, 2020
    Profil: https://www.blogger.com/profile/03857057477811086661
    Thanks untuk tips nya teh.
  • Anonim
    Anonim30 Mei, 2020
    Mbak. Mohon bantuannya saya sudah cari kodenya kok tidak ketemu. Saya pame template linkmagz.
  • Karin3110
    29 Desember, 2019
    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 Desember, 2019
    Profil: https://www.blogger.com/profile/11131722359995290918
    Cara buat menu slide nya gmna ya mbak? Ada tutor nya gak mbak?
  • Ozik Jarwo
    15 Desember, 2019
    Profil: https://www.blogger.com/profile/17745819766519032109
    Ini sih mantep banget, terima kasih mba!
  • Egbujor Victor Chinedu
    29 November, 2019
    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 November, 2019
      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 November, 2019
      Profil: https://www.blogger.com/profile/10394649788848833852
      Thanks, worked on it.. I get it now.
  • Afriant Ishaq
    21 November, 2019
    Profil: https://www.blogger.com/profile/05138011198740500251
    Ijin sadap Mba..
  • Ahmad Fauzie
    20 November, 2019
    Profil: https://www.blogger.com/profile/10353851471811920907
    Mbak... template igniel.com djual ndk
  • Jurnalis
    20 November, 2019
    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.
  • bagi pengalaman
    19 November, 2019
    Profil: https://www.blogger.com/profile/00064183411085459586
    assik, new ngelmu
  • Riedayme
    19 November, 2019
    Profil: https://www.blogger.com/profile/06842964811765796933
    mantap :v