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

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

Melihat Perangkat yang Terhubung ke Jaringan Wi-Fi

Apakah jaringan atau Wi-Fi Anda berjalan lambat? Banyak perangkat dan aplikasi yang berbeda terhubung ke jaringan, dan hanya perlu satu perangkat atau aplikasi tersembunyi untuk memperlambat jaringan.Gunakan GlassWire untuk Melihat Aplikasi dan Perangkat Apa yang Memperlambat Jaringan Anda. Pertama instal aplikasi GlassWire untuk Windows . Setelah menginstal dan terbuka GlassWire klik tab "Things" untuk melihat daftar semua perangkat yang saat ini ada di jaringan. Kemudian dapat menuju ke menu GlassWire kiri atas dan pilih "Settings" kemudian klik "Security", lalu klik "Unlock" dan kemudian di bawahnya pilih "Things monitor" (yang paling atas). Sekarang centang kotak yang mengatakan " Notify me about network device activity " dan pilih " Report only new unknown devices ". GlassWire kemudian akan memberi tahu kapan saja perangkat baru yang tidak dikenal bergabung dengan jaringan. Lihat Apa yang Terhubung ke PC Secara ...
Posting Komentar
Baca selengkapnya

Apa itu Timeline di Windows 10, apa Fungsi dan Penggunannya

Timeline adalah bagian dari Task view Windows 10. Ini menunjukkan riwayat aktivitas yang telah dilakukan dan bahkan dapat menyinkronkan aktivitas di seluruh PC. Fitur ini tersedia di Windows 10's April 2018 Update. Ini juga dapat bekerja dengan aplikasi seluler yang di kaitkan dengan akun Microsoft, sehingga ketika melihat dokumen Word di iPhone atau ponsel Android maka akan muncul di Timeline pada PC. Cara Membuka Timeline Untuk membuka Task View, klik ikon "Task View" di taskbar sebelah kanan kotak Cortana. Jiak tidak ada mungkin pernah menyembunyikannya, unttuk menampilkan kembali, klik kanan taskbar dan klik "Show Task View Button". Task View juga dapat dibuka dengan menekan Windows + Tab pada keyboard Anda. Timeline muncul di jendela yang sedang terbuka. Gulir ke bawah untuk melihat daftar aktivitas baru-baru ini. Bilah gulir di sisi kanan memungkinkan untuk menggulung kembali hari-hari sebelumnya. Aktivitas yang yang ditampilkan tidak semuanya, hanya aplik...
Posting Komentar
Baca selengkapnya