Cara Membuat Space Banner Iklan di Blog

Membuat banner space di blog - membuat banner space sangatlah mudah hanya dengan memasukan kode di bawah ini ke dalam widget pada blog maka banner space pun siap terpampang di blog anda, dan apabila ingin merubah image default ubah saja pada bagian URL gambar atau banner iklan.

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://fachryblogs.blogspot.com//2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3w_hDOzB7BvPdqv9WiKWFppqSCkZhniG3pgkyHKvHNFDSjOnj-rTOcMnoeIqN9vm4slxjLBk6nIM7lVu4Bsf2V2E1u0tizKI5wUXeZFubZItRI7VGotzuDWQXhd64s517r1Sv9MBiF54/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://fachryblogs.blogspot.com//2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3w_hDOzB7BvPdqv9WiKWFppqSCkZhniG3pgkyHKvHNFDSjOnj-rTOcMnoeIqN9vm4slxjLBk6nIM7lVu4Bsf2V2E1u0tizKI5wUXeZFubZItRI7VGotzuDWQXhd64s517r1Sv9MBiF54/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://fachryblogs.blogspot.com//2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3w_hDOzB7BvPdqv9WiKWFppqSCkZhniG3pgkyHKvHNFDSjOnj-rTOcMnoeIqN9vm4slxjLBk6nIM7lVu4Bsf2V2E1u0tizKI5wUXeZFubZItRI7VGotzuDWQXhd64s517r1Sv9MBiF54/s207-p-no/" alt="banner iklan"/></a>
<a class="iklan" href="http://fachryblogs.blogspot.com//2012/11/contact-me.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3w_hDOzB7BvPdqv9WiKWFppqSCkZhniG3pgkyHKvHNFDSjOnj-rTOcMnoeIqN9vm4slxjLBk6nIM7lVu4Bsf2V2E1u0tizKI5wUXeZFubZItRI7VGotzuDWQXhd64s517r1Sv9MBiF54/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.

Semoga bermanfaat.....

Tweet