Cara Membuat Space Banner Iklan di Blog

setelah pada sebelumnya pernah membahas mengenai cara membuat iklan seperti google adsense di blog dengan menggunakan CSS dan HTML, maka sekarang apabila ingin memasang iklan di blog yang disertai hover image dengan sedikit jQuery agar terlihat lebih menarik caranya cukup mudah bahkan simple. Cukup dengan memasukan kode yang terdapat di bawah lalu menaruh kode tersebut kedalam widget blog maka space banner pun siap terpajang di blog. Apabila ingin merubah default image ubah saja pada bagian URL gambar dengan gambar atau banner iklan yang akan dimasukan. Jika sudah terdapat space banner yang terdapat di sidebar blog atau bagian blog lainnya dan trafik blog sudah meningkat maka visitor jika ingin menempel iklannya ke dalam blog tersebut juga tidak sungkan. Untuk membuat ruang banner pada widget blog, berikut tutorial Cara Membuat Space Banner Iklan di Blog.

1. Login ke akun blogger.
2. Copy kode berikut ini.

<style type="text/css">
div#banner a { text-decoration:none; color:#fff; text-align:center;}
div#banner { width:260px; margin:0 auto; }
#banner .iklan { display:block; width:125px; height:125px; border:2px solid #52e052; float:left; position:relative; }
#banner .iklan img{ display:block; width:125px; height:125px;}
#banner .iklan .caption { position:absolute; top:90px; left:2px; padding:3px; font:bold 10px arial; width:115px; display:none; background:#000; }
.clear { clear:both; }
.effect { box-shadow: 0 0 10px #52e052; }
</style>
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery-spotlight.js"></script>
<script type="text/javascript"> $(document).ready(function () { $('#banner .iklan').each(function () { title = $(this).attr('title'); $(this).append('<span class="caption">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .iklan').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.caption').show(); }, function () { $(this).children('.caption').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script>

<div id="banner">
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUNdkiN9ju5bYrZ5WO_JB2CaPzu-aUgn1ogljbbBHnglvKZdFPGzvRjhS8qHLzW6Ni_yJasHYL8INcxjfTdsZMDzaqFBEpDZnlwaGUjIqeca96_iqubjQqQ6pgbvdsEdwvlZHplQu3a0/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUNdkiN9ju5bYrZ5WO_JB2CaPzu-aUgn1ogljbbBHnglvKZdFPGzvRjhS8qHLzW6Ni_yJasHYL8INcxjfTdsZMDzaqFBEpDZnlwaGUjIqeca96_iqubjQqQ6pgbvdsEdwvlZHplQu3a0/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUNdkiN9ju5bYrZ5WO_JB2CaPzu-aUgn1ogljbbBHnglvKZdFPGzvRjhS8qHLzW6Ni_yJasHYL8INcxjfTdsZMDzaqFBEpDZnlwaGUjIqeca96_iqubjQqQ6pgbvdsEdwvlZHplQu3a0/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://mas-andes.blogspot.com/2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfUNdkiN9ju5bYrZ5WO_JB2CaPzu-aUgn1ogljbbBHnglvKZdFPGzvRjhS8qHLzW6Ni_yJasHYL8INcxjfTdsZMDzaqFBEpDZnlwaGUjIqeca96_iqubjQqQ6pgbvdsEdwvlZHplQu3a0/s207-p-no/" alt="banner iklan"/></a>
</div>
<div class="clear"></div>

Silahkan ubah banner yang ingin di pasang dengan mengganti URL gambar berwarna merah dengan ukuran 125 X 125.

3. Masuk menu Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.
4. Selesai dan space banner sudah terpasang kedalam blog.

Demikian tutorial Cara Membuat Space Banner Iklan di Blog dengan mudah dan sederhana.