Skip to main content

Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog AMP HTML

Karena masih banyak sahabat blogger yang belum menggunakan unit iklan billboard ini, jadi disini Saya akan coba share untuk sahabat blogger, barangkali ada yang ingin mencoba menggunakan unit iklan billboard. Artikel ini Saya dapatkan dari blog Kompi Ajaib.

Unit iklan billboard ini ukurannya cukup besar yaitu 970x250, sehingga memakan banyak ruang pada blog. Maka dari itu, unit iklan ini di lengkapi dengan tombol show hide ad, jadi jika ada pengunjung yang merasa terganggu dengan slot ini maka iklan bisa disembunyikan oleh pengunjung seperti halnya di halaman Youtube yang juga menggunakan tombol show hide iklan.

Untuk Demonya bisa Anda lihat di blog Coba Ngetik.

Jika Anda ingin mencobanya, silahkan ikuti langkah-lankahnya di bawah ini.

Yang Pertama.

Silahkan simpan CSS berikut di style amp-custom blog Anda.


/* Top Banner */
.top_banner{margin:20px auto;padding:0 10px 20px;position:relative;width:100%;max-width:990px;height:auto}
#close_topbanner,#open_topbanner{font-family:Roboto,sans-serif;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}

Yang Kedua.

Kemudian silahkan simpan HTML berikut ini dibawah kode <body>


<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'>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='250' layout='fixed-height' type='adsense'>
 </amp-ad>
  </div>
<button id='close_topbanner' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Close Ad</button>
<button hidden='' id='open_topbanner' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button>
  </div>
</b:if>

Silahkan sesuaikan kode data-ad-client='ca-pub-xxxxxxxxxxxxxx' dan data-ad-slot='xxxxxxxxxx' dengan unit iklan responsive Anda.

Dan pastikan Anda sudah memasang js amp-ad di blog Anda. Nah hanya itu saja yang bisa saya share tentang Membuat Slot Iklan Adsense Billboard Dengan Tombol Show Hide Ad Untuk Blog AMP HTML. Selamat mencoba.


You Might Also Like:

Buka Komentar