Cara Membuat Space Banner Iklan di Blog

Membuat Space Banner Iklan di Blog – Jika kalian ingin memasang space iklan di blog yang disertai hover image dengan sedikit jQuery agar terlihat lebih menarik caranya cukup mudah bahkan simple. Langsung saja 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://samdaboribo.blogspot.com/2014/06/contact-us.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://samdaboribo.blogspot.com/2014/06/contact-us.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://samdaboribo.blogspot.com/2014/06/contact-us.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=s207-p-no" alt="banner iklan"/></a>
<a class="iklan" href="http://samdaboribo.blogspot.com/2014/06/contact-us.html" title="Pasang Iklan Disini Ukuran 125 x 125">
<img src="https://lh5.googleusercontent.com/Vb5XDGiirdUoTVZU4fmkfyI9ILW8Tj3IardP27PloAU=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.
Ubah juga link berwarna merah muda Dengan URL "contact us" milik kalian.

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.

Selamat mencoba!!! ^_^

Artikel terkait :