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

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog ...
19 komentar
Baca selengkapnya

Cara Mengembalikan Partisi Disk ke dalam Keadaan Semula

Partisi pada hardisk drive terlanjur terformat, tiba tiba hilang atau telah terhapus. Kalau partisi hilang dengan sendirinya itu mungkin karena habis melakukan install ulang windows seperti yang pernah saya alami, atau hal lainnya. Jika seperti itu partisinya sudah tidak muncul lagi. Di dalam keadaan seperti itu sangat dimungkinkan partisi disk bisa dikembalikan/restore seperti semula. Cara kerjanya hampir sama dengan mengembalikan/recovery data yang hilang atau terhapus. Bagian hardisk yang tidak terformat akan menunjukkan "Unallocated". Bagian itulah yang di recovery, dengan menganalisa terlebih dulu lalu mengembalikan partisi dapat dilacak seperti semula. Serta bisa juga untuk dilakukan pada bagian harddisk yang sudah terformat. Tidak hanya untuk hardisk saja, recovery juga bisa digunakan pada memori SD card, dan juga drive external. Kenapa Tidak Menggunakan Data Recovery saja Mungkin ada yang berpikir untuk melakukan recovery, tapi itu butuh waktu yang sangat lama. Jadi a...
22 komentar
Baca selengkapnya