Widget Iklan Melayang dengan Close Button

Cara Membuat Widget Iklan Floating Responsive Di Bawah Tampilan Blog Kita tentu sering menemukan website atau blog yang menggunakan floating view seperti ini.

Karena memang tidak dipungkiri dengan memasang widget ini dapat meningkatkan click through rate atau peningkatan rasio klik tayang dari iklan Google Adsense dan penyedia periklanan lainnya.

Baca Juga :Apa itu GPT? Apa Perbedaannya Dengan MBR?

Saat iklan terus menempel atau mengambang di bagian bawah tampilan seluler, hal itu menarik lebih banyak perhatian pengunjung Anda.

Aturan Iklan Terapung Widget Ketat

 Menempatkan iklan di lokasi strategis yang mudah dilihat oleh pengunjung memiliki tantangan tersendiri. Di satu sisi kita ingin iklan kita segera terlihat untuk memperbesar kemungkinan iklan diklik, di sisi lain bayangan peringatan pelanggaran Google cenderung membayangi.

Baca Juga :Menggunakan Deep Freeze untuk Menjaga Komputer tetap Aman

Kita tahu peraturan Google cukup ketat mengenai praktik penggunaan floating ads di website, dan kita bisa mempelajari aturan dan batasan penggunaan floating ads di halaman tersebut. Ini termasuk:

Aturan Iklan melayang Vertikal

Subscribe Youtube

• tidak boleh memenuhi halaman dengan iklan
• hanya untuk iklan pada tampilan desktop
• tidak boleh menutupi atau ditutupi oleh konten halaman
• tidak boleh menyababkan perubahan ukuran jendela
• Iklan harus bergerak di sumbu vertikal saja

Baca Juga :Masalah Yang Tidak Dapat Menemukan Drive Saat Menginstal Windows 10

harus berada di posisi yang tetap pada layar tanpa ada jeda, potongan, atau penundaan ketika pengguna menggulir konten

Aturan Iklan melayang Horizontal

• tidak boleh memenuhi halaman dengan iklan
• perbedaan yang jelas antara iklan dan konten
• untuk iklan pada situs selular dan desktop
• tidak boleh menyababkan perubahan ukuran jendela
• tidak boleh melayang menjauh dari tepi jendela

tidak boleh terlihat tersendat, terpotong, atau tertunda ketika pengguna men-scroll konten

Baca Juga :Plugin Kutools for Excel

Jika dilihat dari beberapa aturan tertulis diatas dapat diambil kesimpulan bahwa sebaiknya iklan melayang yang kita pasang tidak mengganggu pengunjung blog kita.

Kita dapat mengambil contoh dari produk floating ads milik google sendiri yakni Anchor Ads, atau widget iklan jangkar. Yakni dengan cara membedakan tampilan antara iklan dan konten, tidak terlalu kebangetan menutupi konten/artikel, dan mudah di tutup (close)

Cara Pasang Widget Iklan Melayang

1. Buka Blogger dan login dengan akun kalian
2. Pada halaman utama pilih menu Layout
3. Pilih Add a Gadget di sidebar maupun footer terserah sobat
4. Pilih widget HTML/Javascript
5. Masukan kode iklan melekat dengan tombol tutup dibawah
6. Save widget dan lihat hasilnya

Kode iklan melayang dengan tombol close

Floating Ads by Arlina

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;left:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1_lD8tP_aA1Aqc8Dm4jWjHByJYIQNn-C2HPmtukXLeUprTMXc15urAC3MeW7eWLZRZ-TlcZX6tsabTn63ZIY-rfsAYmT3If33bvSloKbGGXUXMJ4ppsEiuQ6x2uvO8PIlZPenIVsgNsEE/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<!--Kode iklan mulai dari sini-->
<a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUJwCcwTk5Wh7cTZ_r3aUwP1Yx0YbELFeLnkJYgM5BZrdPEJ2zcn_RXVtTYpUFIXdB2kUzrKXZ9Rx1eelqz5QCEvxpYgJfgb_YJJmQAy4zUWw7NxfvUjb3bfxBTUzrJVO0v10ojdkkctI/s1600/arlina-tea.png'/></a>
<!--Kode iklan sampai sini-->
</div>
</div>

Floating Ads seperti CatatanDroid

<script>window.onload = function(){ document.getElementById('closefloat').onclick = function(){ this.parentNode.parentNode.parentNode .removeChild(this.parentNode.parentNode); return false; }; };</script>
<div class="fb-btn-zuamsyah"><div class="fb-btn-zuamsyah2">
<!--Kode iklan mulai dari sini-->
<a href="#" title="Banner ad here"><img style="max-width:100%;height:auto;vertical-align:middle" alt="Banner iklan disini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUJwCcwTk5Wh7cTZ_r3aUwP1Yx0YbELFeLnkJYgM5BZrdPEJ2zcn_RXVtTYpUFIXdB2kUzrKXZ9Rx1eelqz5QCEvxpYgJfgb_YJJmQAy4zUWw7NxfvUjb3bfxBTUzrJVO0v10ojdkkctI/s1600/arlina-tea.png"></a>
<!--Kode iklan sampai sini-->
</div><span id="closefloat"><svg style="height:14px;width:14px" viewbox="0 0 24 24"><path d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z" fill="white"></path></svg></span></div>
<style>#closefloat{cursor:pointer;font-size:5px;position:absolute;right:0;top:40%;background:rgba(1,0,1,.4);padding:2px 2px 0 2px;border-radius:50% 0 0 50%;z-index:8}.fb-btn-zuamsyah{border-radius:5px;background:rgba(1,0,1,.4);position:fixed;bottom:0;left:0;z-index:9;box-shadow:0 1px 4px rgb(0 0 0 / 20%);display:block;-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;border-radius:2px;width:100%;max-width:720px;max-height:100px}.fb-btn-zuamsyah2{-moz-animation:atas 10s;-webkit-animation:atas 10s;animation:atas 10s;position:relative}.fb-btn-zuamsyah a:link,.fb-btn-zuamsyah a:visited{color:#fff}.fb-btn-zuamsyah a:hover{color:#fff}.post-body h2{display:block;padding:5px 22px;background:#636363;color:#fff;font-size:1.45rem;border-radius:4px;box-shadow:grey 0 2px 5px}</style>

Floating Ads seperti Median-ui

<style>.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:-104px;left:0;width:100%;z-index:999;max-height:104px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:12px 0 0 0;cursor:pointer}.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}:active,:focus{outline:0}</style>
<div class="sticky-ad" id="sticky-ad">
<!--Kode iklan mulai dari sini-->
<a href="#" title="Banner ad here"><img alt="Banner iklan disini" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigUJwCcwTk5Wh7cTZ_r3aUwP1Yx0YbELFeLnkJYgM5BZrdPEJ2zcn_RXVtTYpUFIXdB2kUzrKXZ9Rx1eelqz5QCEvxpYgJfgb_YJJmQAy4zUWw7NxfvUjb3bfxBTUzrJVO0v10ojdkkctI/s1600/arlina-tea.png" style="height: auto; max-width: 100%; vertical-align: middle;" /></a>
<!--Kode iklan sampai sini-->
<button aria-label="Close this ad" class="sticky-ad-close-button" onclick="document.getElementById('sticky-ad').style.display='none';"></button>
</div>
<script>window.addEventListener("scroll",function(){var t=document.getElementById("sticky-ad");window.pageYOffset>300&&(t.style.bottom="0")},!1);</script>

Ganti kode html <a href ... /> banner diatas dengan kode iklan sobat maupun dengan kode banner lain.

ADVERTISEMENT

SCROLL TO RESUME CONTENT