Cara Membuat Iklan Banner Melayang Responsive Dengan Tombol Close

Sahabatgadget -  Pada kesempatan kali ini saya akan membahas mengenai cara membuat iklan melayang responsive dengan tombol close yang dimana sobat bisa meningkatkan performa iklan sobat. 

Baner iklan yang akan saya bahas ini bersifat melayan dengan ukuran menyesuaikan secara otomatis terdapat tombol close (x) sehingga para pengunjung bisa menghilangkan iklan tersebut apabila pengunjung terganggu saat membaca.

iklan baner melayang ini sering digunakan oleh blog atau forum lainnya jika sobat ingin meningkatkan performa Google Adsense sobat , maka widget ini mungkin bisa sobat coba.

Cara Membuat Banner Iklan Melayang

Silahkan sobat buka blogger, kemudian pilih tema/template lalu klik EDIT HTML, silahkan sobat copy kode di bawah ini lalu sobat cari kata </body> dan paste/tempel di atas kata </body> pada template sobat.

<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;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/AVvXsEiylLGcoyiE0tVGFNOgqwff1Z-GMQL2E1xpwc6Vn1G43lQdDUStKoa-zrvjxal3PJq9AFdEIMxYO2xISL01H2OOLwNLINrdH3qBi-X6_XteMY-p8KMOnje9ZXfrihyTZqX6ftiorgY2renA/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 iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyhcUCO7fCp70HQiObtwypvJQXQnt5dWedu1WAxw8gontVISyDamwt7Sg1qtqb05xt4NnR7K5SnxmiytvSE8uHFqMhoKaFjIOPXGlwMIinMm1wxJ3VIxNbA44GwEvfx2mzfFdGuw2h2wLw/s1600/arlina-tea.png'/></a>
</div>
</div>

Selanjutnya simpan template/tema sobat, kemudian lihat hasilnya
Jika kalian tidak ingin menampilakan iklan banner melayang di versi mobile silahkan sobat salin kode di bawah ini

<b:if cond='data:blog.isMobileRequest == "false"'>
<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;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/AVvXsEiylLGcoyiE0tVGFNOgqwff1Z-GMQL2E1xpwc6Vn1G43lQdDUStKoa-zrvjxal3PJq9AFdEIMxYO2xISL01H2OOLwNLINrdH3qBi-X6_XteMY-p8KMOnje9ZXfrihyTZqX6ftiorgY2renA/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 iklan disini'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Banner iklan disini' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyhcUCO7fCp70HQiObtwypvJQXQnt5dWedu1WAxw8gontVISyDamwt7Sg1qtqb05xt4NnR7K5SnxmiytvSE8uHFqMhoKaFjIOPXGlwMIinMm1wxJ3VIxNbA44GwEvfx2mzfFdGuw2h2wLw/s1600/arlina-tea.png'/></a>
</div>
</div>
</b:if>

Jika sobat ingin memasang iklan dari Google Adsense silahkan sobat saling kode di bawah ini.

<script type="text/javascript">
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id="fixedban" style="-webkit-transform: translatez(0); bottom: 0; float: none; margin: auto; overflow: hidden; text-align: center; width: 100%; z-index: 999;">
<div>
<a href="https://www.blogger.com/null" id="close-fixedban" onclick="document.getElementById('fixedban').style.display = 'none';" style="cursor: pointer;"><img alt="close" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylLGcoyiE0tVGFNOgqwff1Z-GMQL2E1xpwc6Vn1G43lQdDUStKoa-zrvjxal3PJq9AFdEIMxYO2xISL01H2OOLwNLINrdH3qBi-X6_XteMY-p8KMOnje9ZXfrihyTZqX6ftiorgY2renA/s1600/btn_close.gif" style="vertical-align: middle;" title="close button" /></a></div>
<div style="display: block; height: auto; margin: auto; max-width: 728px; overflow: hidden; text-align: center;">
Letakkan kode iklan adsense anda disini
</div>
</div>

Berikut contoh tampilannya :

Demikian yang bisa saya sampaikan mengenai Cara Membuat Iklan Melayang Responsive Dengan Tombol Close semoga artikel ini bisa bermanfaat untuk sobat-sobat yang mempunyai blog, Jika ada yang ingin ditanyakan silahkan sobat bertanya pada kolom komentar di bawah ini.

Related Posts

Share this post

Subscribe Our Newsletter