Membuat Iklan Adsense Billboard Dengan Tombol Show Hide

Membuat iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP. Artikel ini mendasarkan pada postingan kompiajaib dengan tema yang sama. Ada sedikit yang membedakan, yaitu trik ini dibuat oleh mas Adhy Suryadi untuk blogspot. Sedangkan tulisan yang Info Blogger sajikan dikhususkan pada blog WordPress.

Skrip atau kode hampir tidak ada perubahan, yang berbeda hanyalah penempatannya. Antara Blogger dan WordPress ada perbedaan yang mendasar meskipun pada prinsipnya cara kerjanya ada kesamaan. Jika untuk Blogger atau Blogspot, penggunaan kode menampilkan iklan Adsense billboard dengan tombol show hide Ad ini membutuhkan skrip <b:if>...</b:if>, dan untuk penggunaan di WordPress tidak memerlukannya.

Baca juga: Template Toko Online Blogspot Terbaik Indonesia

Lalu bagaimana bisa menggunakan kode Membuat iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP tersebut untuk bisa tampil di artikel dan tidak muncul di halaman statis atau halaman error. Jika di blogspot, pengaturannya memang melalui skrip <b:if>...</b:if> ini. Untuk blog WordPress, kita gunakan plugin ad inserter.

Konsep dari skrip cara menampilkan iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP ini diperuntukkan ukuran iklan yang akan tampil adalah billboard, yaitu unit iklan dengan ukuran panjang lebar 970×250 dan yang ukuran 300×250.

Selanjutnya iklan yang hendak ditampilkan dalam blog disetting responsive media query. Pada screen desktop atau laptop dengan ukuran 1024px ke atas maka iklan atau adsense yang tampil adalah ukuran 970×250. Dan jika ditampilkan di pada screen tablet atau smartphone dengan ukuran layar di bawah 1024px maka iklan atau adsense akan ditampilkan dengan ukuran hanya 300×250.

Langkah-langkah Membuat iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP

Jika blog sobat adalah wordpress, maka selayaknya dicoba menggunakan cara dibawah ini. Dan berikut cara Membuat iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP.

1. Install dulu plugin Ad Inserter di blog WordPress sobat
2. Silahkan salin dan simpan CSS style berikut pada menu wordpress sobat Appearance » Customize » Additional CSS
   

   /* Top Banner */
   .top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
   #close_topbanner,#open_topbanner{font-family:inherit;position:absolute;padding:0;bottom:0;background:0 0;border:none;cursor:pointer;color:#888;font-size:15px;font-weight:500;height:20px;line-height:20px;}
   #close_topbanner{right:10px}
   #open_topbanner{width:100px;text-align:center;right:50%;margin-right:-50px}
   #close_topbanner:focus,#open_topbanner:focus{outline:0}
   .adsenseresponsive{width:970px;height:250px;}
   @media screen and (max-width:960px){
   .top_banner{max-width:320px;}
   .adsenseresponsive{width:300px;height:250px;}
   }

3. Kemudian simpan kode berikut di blok plugin Ad Inserter yang sudah sobat install
   

   <div class='top_banner'><div id='topbanner'>
   <!-- Kode iklan simpan di bawah ini -->
   <ins class="adsbygoogle adsenseresponsive"
   style="display:block"
   data-ad-client="ca-pub-xxxxxxxxxxxxxx"
   data-ad-slot="xxxxxxxxxxx"></ins>
   <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
   </script>
   </div>
   <button id='close_topbanner' onclick="document.getElementById('topbanner').style.display='none';close_topbanner.style.display='none';open_topbanner.style.display='block';" role='button' tabindex='0' title='Close'>Close Ad</button>
   <button hidden='' id='open_topbanner' onclick="document.getElementById('topbanner').style.display='block';close_topbanner.style.display='block';open_topbanner.style.display='none';" role='button' tabindex='0' title='Open'>Open Ad</button>
   </div>

Silahkan tuliskan data-ad-clien dan data-ad-slot dengan unit Adsense responsive milik sobat.

Baca juga: Adsense melayang di bawah layar versi blog WordPress

Demikian Info Blogger tentang kode Membuat iklan Adsense billboard dengan tombol show hide Ad untuk Blog WordPress Non AMP.