Cara Membuat Iklan Melayang Responsive di Layar Bawah Blog

Santos el Salam

28 Juli 2020

Jika blog anda telah diterima sebagai publisher google adsense, ada berbagai variasi jenis iklan yang bisa anda coba untuk dapat meningkatkan penghasilan anda. Salah satunya yaitu jenis iklan melayang (floating ads) yang akan selalu tampil ketika halaman artikel digulir baik ke atas maupun ke bawah. Ketika tidak diclose, iklan ini akan tetap terlihat sehingga berpeluang besar untuk mendapatkan klik dari pengunjung. 

Pada artikel terdahulu, saya pernah membagikan tentang Cara Membuat Iklan Adsense Menempel (Sticky) di layar bawah Blog secara manual. Nah, pada kesempatan kali ini, saya ingin membagikan tutorial tentang cara membuat iklan melayang di Layar bawah Blog. 

Meskipun namanya iklan melayang, iklan ini sebenarnya memiliki fungsi yang sama dengan iklan sticky yang pernah saya bagikan tersebut. Meski tampilannya sedikit berbeda, iklan ini juga disertai dengan tombol close sehingga pengunjung dapat menutupnya dengan mudah. Iklan ini juga tidak menutupi halaman atau tumpang tindih dengan konten sehingga tidak melanggar ketentuan layanan (TOS) publisher adsense. 

Selain itu, kelebihan iklan ini juga mempunyai tampilan yang responsive sehingga dapat tampil dengan baik pada tampilan PC, tablet, maupun mobile. Lihat penampakannya berikut ini:

versi web

versi mobile

Jika dilihat melalui layar laptop, maka iklan ini menjadi jenis iklan banner yang melayang di bagian layar bawah dengan ukuran 728 x 90. Namun jika dibuka lewat mobile (hp), maka tampilannya menjadi seperti iklan sticky yang muncul di layar bawah ponsel anda. Bagaimana cara memasangnya?, simak langkah-langkah di bawah ini. 

Cara Memasang Iklan Melayang Responsive di Layar Bawah Blog

Untuk memasang atau mengatur agar iklan adsense melayang di bagian bawah layar, caranya cukup mudah. Kita hanya perlu menambahkan beberapa kode CSS dan sedikit javascript agar iklan dapat muncul sesuai harapan. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode </body> dan letakkan kode berikut ini di atasnya:

<b:if cond='data:blog.searchQuery'> <b:else/> <b:if cond='data:blog.pageType != &quot;error_page&quot;'><script type='text/javascript'> $(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#btm_banner&#39;).hide(90);});}); </script> <!--start: floating ads--> <div id='floatads' style='width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999'> <div><a id='close-floatads' onclick='document.getElementById(&apos;floatads&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0chfaLhbWX-SlRIZJFBWp_nEH2kfkKIcu_S2itvudPXU9E94YHzEuARSnWhdPk_f3zGImqnz-uyh14-bD3ayAKgqR24OeYQ_IcxXjWc-LDnJlP4yLlVAgtiRETqvNVqrLK1ZTQZf0_cw/s1600/btn_close.gif' title='close button'/></a></div> <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'><!--Letakkan kode iklan anda disini--> </div> </div><!--end: floating ads--> </b:if></b:if>

Keterangan: 

• Ganti "letakkan kode iklan anda disini" dengan kode iklan anda yang sudah diparse terlebih dulu. Gunakan format iklan display dengan ukuran tetap yaitu 728 x 90. 
• Dengan pengaturan di atas, iklan tidak akan tampil pada halaman hasil pencarian dan halaman error sehingga lebih aman. 

4. Silahkan simpan kembali template anda dan lihat hasilnya. 

Demikianlah tutorial tentang Cara Membuat Iklan Melayang Responsive di Layar Bawah Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Iklan Melayang Responsive di Layar Bawah Blog. Please share...!

Facebook

Twitter