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:
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('sticky-ad').style.display='none';'/>
</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
}
Auto Ads Adsense
Atau jika Anda ingin tetap menggunakan auto ads, Anda bisa memindah posisi iklan anchor di bagian bawah (seperti yang sudah disebutkan di atas secara default anchor ads Adsense tampil di bagian atas).
Saya asumsikan auto ads sudah aktif, Anda tinggal membuat:
- Buat Elements -> Hooks
- Hook: wp_head
- Display Rules: Entire Site
- Masukkan kode Adsense di bawah ini (dan sesuaikan dengan kode milik Anda).
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567891234567" crossorigin="anonymous"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1234567891234567",
enable_page_level_ads: true,
overlays: {bottom: true}
});
</script>
</head>
Silahkan pilih cara mana yang menurut Anda paling mudah digunakan. Mudah kan? Semoga berhasil.
Tombol close cma berfungsi di template generatepress ketika pakai template lain seperti sahifa tombol close tidak berfungsi mas. Apa yang salah itu?
Yang salah apa ya? Pastinya ini tutorial khusus untuk theme GeneratePress 😀 sedangkan digunakan di theme lain, jadi mungkin di situ letak kesalahannya. Maaf belum pernah mencoba teknik ini di selain GeneratePress.
yang pakai auto ads kok masih muncul di bagian atas ya mas?
Nemu juga blog ini. Makasih mas.
Masih berkutat dengan page speed belum Nemu settingan yg bener
okok mas siappp. Trimakasih. Sukses trus mas, tutorialnya bermanfaat
Terimakasih mas tutorialnya. Untuk improvement dari hasil adsensenya sendiri gimana ya mas setelah menggunakan iklan sticky footer?
Silahkan dicoba aja dulu selama 1 bulan gan, selama pasang metode ini di wpnesia ya memang kurang greget 😀 maklum pengunjungnya rata-rata paham teknologi dan para blogger itu sendiri, jadinya pada malas klik iklan atau pakai adblocker hehe
Tapi saya coba di blog lain yang membahas niche lain, cukup memberikan dampak pada pemasukan. Intinya, dicoba saja dulu 1-2 bulanan apakah ada hasilnya atau tidak.
untuk penambahan code css nya naruh nya dimana ya Mas?
Tampilan – Sesuaikan – CSS tambahan
Mau tanya mas, cara menambahkan post by kategori di homepage gimana ya? Jadi nanti post by categorynya ada di bawah artikel terbaru. Sebelumnya makasih mas
penjelasannya panjang bisa jadi artikel, intinya menggunakan plugin wp show post dan menampilkannya menggunakan element yang pengaturan display rules: blog
cocok nih, buatin artikelnya dong gan hehe, mantep kayanya
Terima kasih tutorialnya mas. Untuk menambahkan tombol x (close) bagaimana yah mas.
Sudah saya update supaya bisa menambahkan tombol close (x) silahkan coba kembali