Cara Menyembunyikan Iklan dengan Tombol Show Hide

auqri - Cara menyembunyikan iklan Google Adsense dengan tombol show hide /  close ads di blog. Tombol show hide ini bisa menyembunyikan dan memunculkan kembali iklan yang tampil di blog, sehingga pengunjung tidak merasa terganggu dengan iklan yang tayang. 

Cukup klik tombol show hide maka iklan akan langsung hilang, lebih ringan dan tidak membebankan ke loading blog juga. Penasaran bagaimana cara membuatnya? Simak langkah-langkahnya dibawah ini:

Cara Menyembunyikan Iklan dengan Tombol Show Hide

Langkah awal yang harus kamu lakukan ialah login atau masuk ke dashboard blogger kamu, lalu pilih menu Tema/Template dan pilih opsi EDIT HTML.

Selanjutnya cari kode </head>, lalu salin dan tempelkan kode dibawah ini tepat diatas tag penutup </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<style type='text/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;}
}
</style>
</b:if>

Lalu simpan template blog kamu. Langkah selanjutnya kamu buka dashboard Blogger lalu pergi ke menu Tata Letak dan tambahkan widget HTML dan Javascript pada kolom yang tersedia. Setelah itu salin dan tempel kode dibawah ini kedalamnya. 

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<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 Ads</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 Ads</button>
  </div>
</b:if>

Lalu silahkan ganti teks yang saya tandai warna merah dengan kode adsense kamu, jangan lupa pada bagian class adsbygoogle tambahkan class adsenseresponsive agar tombolnya bisa berfungsi. Selesai.

***

Nah bagaimana, berhasil bukan? Untuk demonya kamu bisa melihat langsung di halaman auqri.blogspot.com yang berada dibawah header atau menu. Demikianlah tutorial cara menyembunyikan iklan dengan tombol show hide. Semoga bermanfaat.