Membuat Slot Iklan Adsense Billboard 970X250 Dengan Tombol Show Hide Ad Untuk Amp Html
Ini terinspirasi oleh iklan billboard yang ada di Youtube, coba lihat iklan di bab 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 tampaknya memang masih belum banyak blogger yang memakai unit iklan billboard 970x250 ini, mungkin alasannya yaitu ukurannya yang besar sehingga memakan banyak ruang di blog.
Untuk itu, unit iklan ini kita lengkapi dengan tombol show hide ad, jadi bila ada pengunjung yang merasa terganggu dengan slot ini maka iklan dapat disembunyikan menyerupai halnya di halaman Youtube juga memakai tombol show hide iklan.
Untuk misalnya dapat 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 instruksi
<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 instruksi
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.
0 Response to "Membuat Slot Iklan Adsense Billboard 970X250 Dengan Tombol Show Hide Ad Untuk Amp Html"
Post a Comment