Cara Buat Iklan Melayang di Blog dengan Tombol Close Responsive

Saiful Huda

October 29, 2022

Update:April 07, 2024

Cara Buat Iklan Melayang di Blog

Cara buat iklan melayang di blog. Ini merupakan tutorial memasang floating ads pada blog. Dengan harapan agar pengunjung blog tertarik pada periklanan dan menyebabkan terjadinya klik pada iklan yang ditawarkan. SaifulHuda.com pun juga memasang floating ads yang responsive dalam widget blog.

Untuk floating ads responsive jika blog Anda terhubung google adsense. Maka secara otomatis muncul sendiri tanpa harus membuat iklan melayang manual. Tapi kemunculan floating ads google adsense tersebut tak tentu. Kadang iklan melayang (floating ads) muncul diatas header atau dibawah footer blog.

Sedikit informasi apabila Anda ingin menghapus floating ads (anchor ads} bawaan dari google adsense. Anda bisa mensettingnya dengan cara menonaktifkan tombol iklan otomatis di dashboard google adsense. Dengan menonaktifkan iklan otomatis tersebut maka floating ads tidak akan muncul lagi di dalam blog.

Meskipun menonaktifkan iklan otomatis google adsense. Blog tetap bisa menayangkan iklan google adsense jika sudah terpasang script kode adsense di widget blog. Dan Anda bisa mengaktifkan iklan otomatis google adsense tersebut kapanpun di dashboard adsense.

Cara Buat Iklan Melayang di Blog

Anda bisa membuat iklan melayang atau floating ads secara manual di dalam blog. Dengan cara manual tersebut akan lebih leluasa menentukan di area mana floating ads akan muncul. Kebanyakan iklan melayang dipasang dibawah footer.

SaifulHuda.com membagikan beberapa script iklan melayang reponsive untuk blog. Pilih salah satu yang cocok untuk theme blog Anda. Semoga script ini bisa membuat konversi yang bagus pada penghasilan Anda. Tak perlu khawatir script ini aman untuk adsense.

Untuk yang tidak terhubung dengan google adsense. Script iklan melayang tersebut bisa untuk media perikalan lainnya, misalnya MGID, adsterra, affiliate marketplace, atau produk Anda sendiri. Hanya dengan memodifikasinya sendikit di bagian script iklan.

Mari kita masuk pada cara buat iklan melayang di blog dengan tombol close (adsense floating ads) responsive. Sebelumnya saya mengajak Anda membaca panduan cara buat iklan melayang di blog ini sampai bawah ya. Berikut ini script iklan melayang dengan tombol close yang responsive untuk blog.

1. Script Iklan Melayang 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">

<a href="#" title="Banner ad here"><img alt="Banner iklan disini" src="http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png" style="height: auto; max-width: 100%; vertical-align: middle;" /></a>

<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>

Keterangan Script Floating Ads seperti Median UI

Untuk Script yang berwarna Merah gantilah dengan Script Kode Iklan Anda.
Cara agar Ukuran Space Floating Ads sesuai dengan Tinggi Iklan, bisa mengubah Angka pada script berwarna Biru.

2. Script Floating Ads dari Arlina Code

<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').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('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pEEvhiqCJ02JAVegWcMUax3iK4D-OeWv9NSs1OUoVV2eS0RhDBGHEAT8CM8CkG2rxfLpEH0jtZSCa8ZARgT5G_rV7LZ70L1vqdXF5grKKFbRzi2ENSSy5ROjF86oP7SEgHSjonxRvvcj/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'>

<a href='#' title='Banner ad here'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>

</div>
</div>

Keterangan Script Iklan Melayang dari Arlina Code

Gantilah Script yang berwarna Merah dengan Script Kode Iklan Anda.
Untuk Script yang berwarna Biru Anda bisa merubahnya sesuai Ukuran Lebar Iklan Anda. Jika ukuran iklan lebih lebar 728px maka ubahlah Angka tersebut dan bila lebih kecil lebih baik biarkan saja.

3. Script Iklan Melayang dengan Tombol Close Klik 2x

<style type="text/css">
#gb{position:fixed;top:10px;right:10px;z-index:+1000;}
* html #gb{position:relative;}
.gbcontent{float:right;border:2px solid #A5BD51;background:#ffffff;padding:10px;}
</style>
<script type="text/javascript">
function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}
function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb"><div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent"><div style="text-align:right"><a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>

<center>
Masukan Kode Iklan Disini
</center>

<script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (30-gb.offsetWidth).toString() + "px";</script>
</div>
</div>

Keterangan Script Floating Ads dengan Tombol Close Klik 2x

Ubahlah tulisan yang berwarna Merah menjadi Script Kode Iklan Anda.

4. Script Floating Ads Kanan Kiri pada Blog

<script type='text/javascript'>$(document).ready(function() {$('img#closed').click(function(){$('#btm_banner').hide(90);});});</script>
<script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
</script>
<script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script>

<div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJ9xFByeW6cgQLaP0-9NhoPKFQ6dsC0NmBK2dDzNz3zFoKJqCFNeZ-UC45t4oBO6mqBCbsm6fMW2yz2KUKlPW8dY_2yxskJCbsV5Ls_rLcIoyeIdazrs-sZjA5WqDafT9RX_qa7t4WSm2/s1600/close3.png' alt='close' title='close button'/></center></a></div>


Masukan Script Iklan Di sini Untuk Iklan Melayang di Kiri Blog


</div>



<div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">
<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJ9xFByeW6cgQLaP0-9NhoPKFQ6dsC0NmBK2dDzNz3zFoKJqCFNeZ-UC45t4oBO6mqBCbsm6fMW2yz2KUKlPW8dY_2yxskJCbsV5Ls_rLcIoyeIdazrs-sZjA5WqDafT9RX_qa7t4WSm2/s1600/close3.png' alt='close' title='close button'/></center></a></div>


Masukan Script Iklan Di sini Untuk Iklan Melayang di Kanan Blog


</div>

Keterangan Script Iklan Melayang Kanan Kiri pada Blog

Gantlah tulisan berwarna Merah menjadi Script Kode Iklan Anda.
Script ini hanya tambahan saja. Tidak direkomendasikan untuk dipakai. Jika theme Anda tidak mendukung script kanan kiri tersebut Memasang script kanan kiri bisa menutupi tampilan konten pada blog Anda.

Cara Pasang Iklan Melayang di Blog

Selanjutnya setelah Anda memilih script iklan melayang yang pas untuk template blog. Saatnya memasang script floating ads tersebut di dalam blog. Untuk cara pasang iklan melayang di blog, ada 2 tutorial yang bisa dipilih di bawah ini.

1. Memasang Iklan Melayang di HTML Blog

Buka blogger.com Anda.
Klik Menu Tema dan Pilih Edit HTML
Cari kode </body> agar lebih cepat gunakan Ctrl+F
Letakan Script Iklan Melayang tepat berada diatas kode </body>
Simpan Tema
FInish. Anda bisa melihat hasilnya.

2. Memasang Iklan Floating Ads di Widget Blog

Buka akun Blogger Anda
Pilih Tata Letak dan Klik Tambahkan Gadget
Pilih dan Klik HTML/JavaScript
Tempelkan Script Floating Ads dan Klik Simpan
Selesai. Silahkan cek hasilnya.

Anda bisa memilih dimana tempat yang tepat untuk memasang script floating ads. Saya mencantumkan 2 tutorial cara pasang iklan melayang di blog karena ada beberapa template blogspot yang tidak ada fitur tambahan gadgetnya. Biasanya ada pada template lawas atau klasik.

Akhir Kata - Cara Buat Iklan Melayang di Blog

Dengan memasang script floating ads atau iklan melayang di blog. Harapannya bisa meningkatkan RTK atau CTR pada iklan yang tampil. Untuk lebih aman dalam pasang iklan melayang (adsense floating ads) sebaiknya jangan sampai menggangu pengunjung blog.

Apabila Anda mengunakan script iklan melayang untuk adsense. Supaya lebih yakin bisa membaca kebijkaan dari google adsense terlebih dahulu. Sejauh ini untuk www.saifulhuda.com aman memasang script adsense floating ads tersebut. Ukuran iklan yang saya rekomendasi kan untuk anchor ads yaitu 728x90 atau 728x200 bisa di pasang di bagian footer atau bawah blog.

Baiklah saya akhiri artikel dari cara buat iklan melayang di blog dengan tombol close (adsense floating ads) responsive. Apabila ada yang mau di tanyakan kita bisa beralih ke kolom komentar. Terimakasih telah berkunjung di SaifulHuda.com. Semoga bermanfaat.