Sebuah Unit Iklan Billboard Adsense memiliki ukuran yang sangat besar yaitu 970x250 terlalu memakan banyak ruang. Tapi juga memiliki nilai yang cukup tinggi. Tidak ada salahnya jika memasang Unit Iklan Billboard untuk mencoba dan bereksperiment.
Karena iklan billboard memiliki ukuran yang besar, maka bisa dipasang tombol open dan close untuk menutup dan membuka iklan, agar jika pengunjung terganggu bisa menutup iklannya. Awalnya teinspirasi dari blog kompi dan mencobanya.
Kali ini cara membuatnya dengan tombol show hide untuk blog AMP dan Non AMP yang bisa dipilih. Untuk Tampilannya mirip seperti pada tampilan dekstop blog ini. Jika di tutup iklan akan hilang dan ketika dibuka akan muncul iklan dengan yang baru.
Membuat Show Hide Iklan Billboard AMP
Bagi yang menggunakan blog amp untuk cara memasang cukup mudah dan tidak terlalu riber. Tombol show hide menggunakan action atau shortcode. Pertama simpan style CSS berikut di style amp-custom.
/* Top Banner */.ad-c{text-align: center;padding-bottom: 20px;position: relative;margin-bottom: 10px;}.ad-top{display:inline-block;max-width:970px;width:100%;height:250px}#btn_ad{right:10px;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;width: 80px;}.btn_ad-open{right:calc(50% - 40px)}#btn_ad:focus{outline:0}Simpan HTML berikut dibawah kode <body> atau bisa juga dalam tag lain yang lebarnya panjang seperti diatas wrapper.
<b:if cond='data:blog.pageType != "static_page" ordata:blog.pageType != "error_page"'><div class='ad-c'><div id='ad-top'><amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxxxx' height='250' layout='fixed-height' type='adsense'> </amp-ad> </div><button id='btn_ad' on='tap:topbanner.hide, close_topbanner.hide, open_topbanner.show' role='button' tabindex='0' title='Close'>Close Ad</button><button hidden='' id='btn_ad' class='btn_ad-open' on='tap:topbanner.show, close_topbanner.show, open_topbanner.hide' role='button' tabindex='0' title='Open'>Open Ad</button> </div></b:if>
Sesuaikan kode atribut data-ad-client='ca-pub-xxxxxxxxxxxxxx' dan data-ad-slot='xxxxxxxxxx' dengan Unit iklan bilboard atau bisa juga dengan unit responsive.
Membuat Show Hide Iklan Billboard Non AMP
Tampilann iklan pada blog non amp jika disembunyikan dan ditampilkan lagi dengan menggunakan css display, hasil tampilan iklan masih tetap sama. Dan disini saya buat berdeda, dengan memerlukan beberapa javascript. Pertama simpan style CSS di style amp-custom, sama seperti di atas hanya saja tidak ada btn_ad-open.
/* Top Banner */.ad-c{text-align: center;padding-bottom: 20px;position: relative;margin-bottom: 5px;}.ad-top{display:inline-block;max-width:970px;width:100%;height:250px}#btn_ad{right:10px;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;width: 80px;}#btn_ad:focus{outline:0}Selanjutnya simpan kode berikut dibawah tag body atau di dalam element lain yang lebarnya panjang.
<b:if cond='data:blog.pageType != "static_page" ordata:blog.pageType != "error_page"'><div class='ad-c'><div id='ad-top'><ins data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" class="adsbygoogle ad-top"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><button id="btn_ad" onclick="adtop()">Close Ad</button><script>//<![CDATA[function adtop(){var e=document.getElementById("ad-top"),t=e.getElementsByTagName("ins")[0],d=document.getElementById("btn_ad");if(void 0!==t&&null!=t)for(;e.firstChild;)e.removeChild(e.firstChild),d.innerHTML="Open Ad",d.style.right="calc(50% - 40px)";else{var a=document.createElement("INS"),n=document.createAttribute("class");n.value="adsbygoogle ad-top",a.setAttribute("data-ad-client","ca-pub-xxxxxxxxxxxxxxxx"),a.setAttribute("data-ad-slot","xxxxxxxxxx"),a.setAttributeNode(n),e.appendChild(a);var o=document.createElement("SCRIPT"),l=document.createTextNode("(adsbygoogle = window.adsbygoogle || []).push({});");o.appendChild(l),e.appendChild(o),d.innerHTML="Close Ad",d.style.right="10px"}}//]]></script></div></b:if>Sesuaikan kode dengan Unit Iklan Billboard pada element dan juga scriptnya. Dan untuk script js tidak perlu, karena pastinya sudah memasang satu, dan itu sudah cukup. Cek iklan dan tes tombolnya apakah sudah normal.
Tanpa Tombol Show Hide
Jika kalian ingin menggunakannya tanpa tombol Show hide, hapus kedua element button. Dan
Untuk non-amp hapus element button dan juga scriptnya.
Unit iklan yang dipasang sudah responsive dan secara otomatis lebar Iklan akan menyesuaikan dengan lebar element.
Mau bertanya mas Arif, Terkadang iklan yang muncul di blog ini khususnya iklan billboard bisa iklan jenis tautan maupun gambar dengan ukuran menyesuaikan dengan jenis iklan yang muncul. Itu bagaimana cara membuatnya mas? Apakah menggunakan autoads? atau menggunakan kode iklan berjenis responsive?
BalasHapusDi halaman index, menggunakan iklan Billboard. Sedangkan halaman item menggunakan iklan tautan. Rencananya ingin menggunakan iklan auto responsive juga di halaman index.
HapusOh, pke tag kondisional ya mas? Oke mkasih mas
BalasHapus