Cara Membuat Iklan Melayang Responsive di Blog

Hallo semua!!

Pada kesempatan kali ini saya akan memberikan sebuah tutorial singkat mengenai cara membuat iklan melayang dan menjadikannya responsive dengan tambahan tombol close dibawah blog. Sebagian besar orang memulai menjadi blogger karena hobi, mencari teman, jualan online dan ada juga yang mempunyai tujuan untuk memperbanyak pengetahuan. Sebgai sarana pendukung, aktivitas ngeblog pun bisa membantu anda untuk bisa menghasilkan uang. Contohnya, dengan menjadi publisher iklan.

Kenapa kita dibayar? Karena kita membantu advertiser untuk mempromosikan produknya.

Banyak produk layanan iklan yang bisa kita gunakan diblogger dan dibayar pula. Bagaimana cara dibayarnya? Dibayarnya ketika ada pengunjung yang mengklik iklan di blog anda lalu iklan yang diklik tersebut akan menjadi lumbung uang bagi anda. Anda paham !!

Baiklah, kali saya tidak akan membahas layanan iklan lagi.

Langsung saja kita ke materi cara membuat iklan melayang responsive diblog. Pada dasarnya iklan bannner yang melayang dengan tombol close mungkin sering anda temui di blog - blog lain yang memasangnya.

Apasih kak, gunanya tombol close itu?

Perlu anda ketahui bahwa tombol close ini berfungsi sebagai alternatif jika ada pengunjung yang merasa terganggu karena tulisan yang ia baca terhalangi oleh banner/iklan yang melayang. Cara mengatasinya ada dibawah ini;

Buka Blogger anda > Template > Kemudian tambahkan kode dibawah ini sebelum <body>

Kode HTML

<script type='text/javascript'>
$(document).ready(function(){$('
img#closed&#39:).click(function(){$(&
#39;#bl_banner').hide(90);});});
</script>
<div id='fixedban' style='width:100%;
margin:auto;text-align:center;float:
none;overflow:hidden;display:scroll;
positiom:fixed;bottom:0;z-index:999;-
webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='
document.getElementById('
fixedban').style.display = &apos
;none';' style='cursor:pointer
;'><img alt='close' src='http://1.bp.
blogspot.com/-_A83iDM6JYc/VhtxROLILrl
/AAAAAAAADK4/aM4iklA6aql/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 iklandisini'><img style='max-width:100%;
height:auto;vertical-align:middle;'
alt='banner iklan lu disini' src'http:/
/3.bp.blogspot.com/-9h86Fhn6zZU/
VhtxRDTM4ql/AAAAAAAADK0/
fQN3Z00kWwk/s
1600/sandi-wahyudi.png'/></a>
</div></div>

Yang berwarna merah adalah ukuran lebarnya, bisa diganti sesuai selera. Lalu yang warna biru itu adalah tempat menaruh kode iklan banner anda.

Demikianlah postingan yang dapat saya bagikan, semoga bermanfaat untuk anda semua.

Stay positive