Membuat Banner Iklan Melayang di Blog

Cara Membuat Banner Iklan Melayang di Blogger

Pada kali ini kita akan membahas bagaimana Cara Membuat Banner Iklan Melayang Responsive dengan Tombol Close di Blog yang bisa kita gunakan untuk meningkatkan performa iklan di blog kita.

Banner iklan yang akan kita bahas disini bersifat melayang atau sticky dengan ukuran yang dapat menyesuaikan secara otomatis dan terdapat tombol close di bagian atas untuk menghilangkan banner iklan tersebut apabila pengunjung merasa terganggu.

Iklan banner yang melayang yang terdapat tombol close mungkin sering Anda temukan di situs-situs besar. Bagi Anda yang ingin memaksimalkan iklan terutama iklan dari Google AdSense, maka widget banner ini mungkin bisa anda coba.

Cara Membuat Banner Iklan Melayang

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

<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/AVvXsEhCFvXC0RyYXkB-_RhSlLBJIbI38hHPRXxstB9JdjbmOGW15Up62CTJCYbf5Jnofslrpi9CDoOAmkUugnH2uZfYjsiJqRRZKg5f16L__E_83qFnxIOiV6TwK-jkZkHKvhdgdjd12rsQDbsQ/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/AVvXsEgyY0N14hkMwhjSzBUUZVYHj6ckqttepydGj1KpvCzxge-uBbYU53HPmxcphbtwktKTfiErHbX2MykIPzW_3x8kti-YlM4eJAMDPgXf_6IiAILwOn9HSEvpvdFcnuLNLF3whkvl6wohOqFuiqe10quRct-weV8jMjkDy4yHwBImxYnoYdR23HRws_WM0A2P/s1600/www.noerway.my.png'/></a>
</div>
</div>

Selanjutnya, silahkan Simpan Tema, kemudian lihat hasilnya.

Membuat banner iklan yang melayang memang mudah. Apabila kita tidak ingin menampilkan banner iklan ini di tampilan versi mobile, maka kita bisa menggunakan kode dibawah 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/AVvXsEhCFvXC0RyYXkB-_RhSlLBJIbI38hHPRXxstB9JdjbmOGW15Up62CTJCYbf5Jnofslrpi9CDoOAmkUugnH2uZfYjsiJqRRZKg5f16L__E_83qFnxIOiV6TwK-jkZkHKvhdgdjd12rsQDbsQ/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/AVvXsEgyY0N14hkMwhjSzBUUZVYHj6ckqttepydGj1KpvCzxge-uBbYU53HPmxcphbtwktKTfiErHbX2MykIPzW_3x8kti-YlM4eJAMDPgXf_6IiAILwOn9HSEvpvdFcnuLNLF3whkvl6wohOqFuiqe10quRct-weV8jMjkDy4yHwBImxYnoYdR23HRws_WM0A2P/s1600/www.noerway.my.png'/></a>
</div>
</div>
</b:if>

Kemudian jika kita 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/AVvXsEhCFvXC0RyYXkB-_RhSlLBJIbI38hHPRXxstB9JdjbmOGW15Up62CTJCYbf5Jnofslrpi9CDoOAmkUugnH2uZfYjsiJqRRZKg5f16L__E_83qFnxIOiV6TwK-jkZkHKvhdgdjd12rsQDbsQ/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>

Berikut contoh tampilannya menggunakan iklan adsense: