Ditulis oleh: Ditulis pada: 11/23/2017
Ini terinspirasi oleh iklan billboard yang ada di Youtube, coba lihat iklan di bagian atas halaman homepage Youtube yang berukuran 970x250 atau unit iklan billboard Adsense.Dan tidak ada salahnya kita mencoba bereksperiment dengan unit iklan billboard ini, siapa tahu rejekinya ada di unit tersebut.
Dan sepertinya memang masih belum banyak blogger yang menggunakan unit iklan billboard 970x250 ini, mungkin karena ukurannya yang besar sehingga memakan banyak ruang di blog.
Untuk itu, unit iklan ini kita lengkapi dengan tombol show hide ad, jadi jika ada pengunjung yang merasa terganggu dengan slot ini maka iklan bisa disembunyikan seperti halnya di halaman Youtube juga menggunakan tombol show hide iklan.
Untuk contohnya bisa Anda lihat di bloggue.xyz.
Jika Anda ingin mencobanya, silahkan ikuti langkah-lankahnya di bawah ini.
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}
Kemudian silahkan simpan HTML berikut di bawah kode
<body>
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "error_page"'>
<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' denan unit iklan responsive Anda.Dan pastikan Anda sudah memasang js amp-ad di blog Anda.