Menampilkan Iklan Adsense Sticky Footer di GeneratePress

Bagaimana cara menampilkan iklan Adsense sticky di bagian footer GeneratePress? Untungnya artikel ini bisa dan akan membantu Anda yang sedang mencari caranya.

Seperti yang kita ketahui, Google Adsense sebenarnya sudah memiliki iklan unit bernama Auto Ads yang secara otomatis bisa menampilkan iklan sticky. Namun masalahnya adalah, iklan ini akan tampil di bagian atas baik itu untuk mobile dan desktop.

Dan tidak semua orang cocok dengan “perilaku” Auto Ads yang biasanya malah akan menampilkan iklan secara berlebihan yang cenderung mengganggu pengunjung web.

Untuk menampilkan iklan sticky terutama di bagian footer, salah satu solusinya adalah menampilkannya secara manual.

Beruntung sekali bagi Anda pengguna theme GeneratePress Premium, ada cara mudah yang bisa kita lakukan untuk menampilkan iklan Adsense sticky di bagian footer baik untuk desktop dan mobile.

Untuk menerapkan cara ini, Anda harus sudah menggunakan theme GeneratePress Premium. Untuk pengguna versi gratis, cara ini tidak bisa dilakukan. Butuh versi premium? Anda bisa membeli di WPNesia dengan harga terjangkau.

Seperti gambar berikut inilah tampilan yang akan muncul di versi desktop.

Sedangkan untuk versi mobile akan tampil seperti gambar berikut ini.

Disclaimer: saya tidak bertanggung jawab terkait segala resiko yang mungkin akan terjadi dengan akun Adsense Anda setelah menerapkan cara ini. Saya kurang paham apakah cara ini diperbolehkan dalam kebijakan Adsense.

Buat Unit Iklan Adsense

Langkah pertama silahkan membuat unit iklan Adsense dengan ukuran 728×90. Jika ingin menggunakan unit responsif bisa namun tampilannya cenderung akan sangat besar dan menutupi sekitar 20% bagian footer.

Atau Anda silahkan melakukan eksperimen sendiri terkait penggunaan ukuran ini. Pilih yang paling tepat menurut Anda dan dirasa aman serta tidak melanggar peraturan dan kebijakan Adsense.

Buat Element

Selanjutnya silahkan buat Element -> Hook dan silahkan beri nama bebas terserah Anda dan kemudian masukkan kode berikut ini.

<div class="grid-container sticky-footer-element">
	<center> <!-- masukkan kode adsense disini --> </center>
</div>

• Hook: wp_footer
• Priority: 20
• Display Rules -> Location: Entire Site
• Terbitkan.

Tambah Kode CSS

Setelah membuat Element dan diterbitkan, langkah selanjutnya adalah masukkan kode CSS berikut ini di CSS Tambahan.

/* Iklan Sticky Footer WPNesia */
.sticky-footer-element {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
}
    body {
        margin-bottom: 100px;    
}

Simpan dan selesai. Anda hanya tinggal menunggu iklan untuk tampil.

Baca juga:

Cara Menghilangkan Kolom URL di Komentar GeneratePress

Apakah bisa menghilangkan kolom URL di komentar WordPress dan khususnya tema GeneratePress? Tentu saja bisa dan caranya sangat mudah. Inilah panduannya.

www.wpnesia.id

Update: Sticky Adsense Footer dengan Close

Agar memiliki tombol close (x) bisa menggunakan cara berikut ini.

Element

Masukkan kode berikut di Elements:

<div class='sticky-ad' id='sticky-ad'>
    <center> masukkan kode iklan di sini </center>
    <button aria-label='Tutup Iklan' class='sticky-ad-close-button' onclick='document.getElementById(&apos;sticky-ad&apos;).style.display=&apos;none&apos;;'/>
</div>

• Hook: wp_footer
• Priority: 20
• Display Rules -> Location: Entire Site
• Terbitkan.

Kode CSS

Dan kemudian masukkan kode CSS berikut ini di CSS Tambahan:

/* Sticky Adsense  */
.sticky-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
}
    
.sticky-ad-close-button {	
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  right: 0;
  background-image: url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");
  background-size: 13px 13px;
  background-position: 9px;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 12px 0 0 0;
  cursor: pointer;
}

.sticky-ad-close-button:before {
  position: absolute;
  content: "";
  top: -20px;
  right: 0;
  left: -20px;
  bottom: 0;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:active,
:focus {
  outline: 0
}

Mudah kan? Semoga berhasil.