Langsung ke konten utama

Membuat Unit Iklan Billboard dengan Tombol Buka Tutup

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 != &quot;static_page&quot; ordata:blog.pageType != &quot;error_page&quot;'><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 != &quot;static_page&quot; ordata:blog.pageType != &quot;error_page&quot;'><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.

Label:

Komentar

  1. Tedi Eka17 Jul 2018, 13.53.00

    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?

    BalasHapus
    Balasan
    1. Rohman17 Jul 2018, 18.37.00

      Di halaman index, menggunakan iklan Billboard. Sedangkan halaman item menggunakan iklan tautan. Rencananya ingin menggunakan iklan auto responsive juga di halaman index.

      Hapus
  2. Tedi Eka17 Jul 2018, 18.53.00

    Oh, pke tag kondisional ya mas? Oke mkasih mas

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Valid AMP dan Anti Backlink Spam

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a...
44 komentar
Baca selengkapnya

Perbedaan Windows 10 N, KN, Home, Pro, Enterprise dan VL

Perbedaan Windows 10 Pro dan Windows 10 Pro N? — banyak yang bertanya dengan pertanyaan itu, mungkin salah satunya ada kamu. Mana yang lebih bagus untuk dipilih dan apa maksudnya antara yang tidak ada N-nya dan yang ada N-nya. Memang Microsoft merilis beberapa edisi Sistem Operasi seperti pada Windows 10, ini tentunya memiliki alasan. Terkadang perbedaan ini akan membingungkan saat ingin mendownload, mau pilih yang mana windows 10 pro atau yang pro n. Ini juga sama di windows versi sebelumnya. Nah di artikel kali ini akan membahas tentang berbagai macam edisi Windows 10 dan mengetahui apa itu edisi Home, Pro, Enterprise, Education VL, N dan KN. Perbandingan setiap edisi Windows 10. Pilih mana Windows 10 atau Windows 10 N/KN Biar gak penasaran kita bahas dulu Apa itu Windows 10 N?. Windows 10 N adalah windows yang dirancang khusus bagi pengguna Eropa dan Swiss agar sesuai dengan hukum Uni Eropa. N berarti Not, merupakan Windows 10 yang "tidak disertakannya fitur atau aplikasi...
Posting Komentar
Baca selengkapnya

Mengatasi Item Data Terstruktur Hilang atau Tidak Valid pada Blog AMP

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp...
9 komentar
Baca selengkapnya