Membuat Banner Iklan Melayang di Blogger

Membuat Banner Iklan Melayang di Blogger. Yaa... walaupun blog saya belum ada iklan, mudah-mudahan dengan adanya tulisan ini akan segera dapat iklan. Aamiin. 😇

Pada artikel kali ini saya akan membahas bagaimana Cara Membuat Banner Iklan Melayang Responsive bersama dengan Tombol Close di Blog yang bisa anda menggunakan untuk meningkatkan performa iklan Anda.

Banner iklan yang akan saya bahas disini berbentuk melayang atau sticky bersama dengan ukuran yang bisa mengatur secara otomatis dan terkandung tombol close di bagian atas untuk menghalau banner iklan tersebut kalau pengunjung mulai terganggu.

Iklan banner yang melayang yang terkandung tombol close barangkali kerap Anda temukan di situs-situs besar. Bagi Anda yang ingin memaksimalkan iklan khususnya iklan berasal dari Google AdSense, maka widget banner ini barangkali bisa anda coba. 

Cara Membuat Banner Iklan Melayang

Silahkan buka dasbor Blogger, kemudian pilih menu Template, lalu klik Edit HTML. Silahkan salin kode dibawah ini dan tempatkan sebelum kode </body> pada template Anda.

<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/AVvXsEj1meigHDx_Su1nYQhGJY6RBjIAKfu8ioiX1J_c9S9QDJbz-T02j5-bysEbqdqlVCrCchLAZETD1L6511whxMozrkV-rcesu2TcHoLtuTPLjCXmUaaGJx5mNCj27swM3-vDzQHC7Jbpp1xx/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/AVvXsEg0dwei0bXt5TPluW0r_XgO_PKq_1FXZNOa9KVkSuXeE_YZf1XFqghZOvs_2pEz2fWNOH6R246k3VI5lo6AATypoOrSp2g4KPp76teiz09fF-fD8xJhPXQdgCbTzkktHVzzPY6rGUokuFoN/s1600/arlina-tea.png'/></a>
</div>
</div>

Selanjutnya, silakan Simpan Tema, kemudian kalan dapat melihat hasilnya.

Membuat banner iklan yang melayang sebetulnya mudah. Apabila Anda tidak dambakan menampilkan banner iklan ini di tampilan versi mobile, maka silakan manfaatkan 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/AVvXsEj1meigHDx_Su1nYQhGJY6RBjIAKfu8ioiX1J_c9S9QDJbz-T02j5-bysEbqdqlVCrCchLAZETD1L6511whxMozrkV-rcesu2TcHoLtuTPLjCXmUaaGJx5mNCj27swM3-vDzQHC7Jbpp1xx/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/AVvXsEg0dwei0bXt5TPluW0r_XgO_PKq_1FXZNOa9KVkSuXeE_YZf1XFqghZOvs_2pEz2fWNOH6R246k3VI5lo6AATypoOrSp2g4KPp76teiz09fF-fD8xJhPXQdgCbTzkktHVzzPY6rGUokuFoN/s1600/arlina-tea.png'/></a>
</div>
</div>
</b:if>

Jika Anda ingin menampilkan iklan dari Google AdSense, maka gunakan kode dibawah 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='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/AVvXsEj1meigHDx_Su1nYQhGJY6RBjIAKfu8ioiX1J_c9S9QDJbz-T02j5-bysEbqdqlVCrCchLAZETD1L6511whxMozrkV-rcesu2TcHoLtuTPLjCXmUaaGJx5mNCj27swM3-vDzQHC7Jbpp1xx/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'>
Letakkan kode iklan adsense anda disini
</div>
</div>

Demikian pembahasan artikel kali ini tentang Cara Membuat Banner Iklan Melayang Responsive semoga berguna untuk Anda. Jika masih ada hal yang belum jelas dan ingin ditanyakan, silakan menanyakan pada kolom komentar di bawah ini. 

Subscribe to receive free email updates: