Pasang Banner Iklan 125x125 Hover Box dengan CSS3

Baiklah kali ini saya ingin sharing mengenai Banner (Ads) Iklan 125x125, disini saya akan memberikan banner dengan efek hover box, dan saya sudah memasangnya diblog ini, tampilan lumayan keren koq, kalau ngga percaya, coba deh sobah pehatikan banner saya yang berada di sidebar saya..

gimana??? tertarik untuk membuatnya,...
baiklah sobat bisa langsung mencobanya,.. berikut cara-caranya :
seperti biasa
1. Pastikan login Blogger terlebih dahulu.
2. Klik pilihan Tata Letak => Edit HTML
3. Carilah kode ]]></b:skin> kalau sudah ketemu, letakkan kode berikut tepat di atas :

/* Start Banner 125x125 */
.contentCenter {
text-align:center;
}
.adsbanner {
background:url("http://i7.photobucket.com/albums/y284/StubbyOstrich/animated%20gif/Rasengan.gif");
background-position:center;
-moz-border-radius:8px; -webkit-border-radius:8px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out;
margin:1em 0 1em 0; line-height:1.6em; margin:20px 4px; padding:10px 6px;
}
.adsbanner:hover {margin:20px 4px; -moz-border-radius:13px; -webkit-border-radius:13px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;}
.adsbanner ul{
list-style-type:none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
width:300px;
overflow:hidden;
}
.adsbanner ul li{
list-style-type:none;
margin: 0px 1px 0px 0px;
padding: 5px 0px 5px 5px;
float:left;
display:inline;
}
.adsbanner ul li:hover {-moz-border-radius:15px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
/* End Banner 125x125 */

:::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah,adlh URL Gambar, dan dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna hijau adlh warna pikiran kotak box, sedangkan teks yang berwarna biru, itu adalh warna kotak box saat hover.
- dan yang terakhir teks yg berwarna orange, adlh warna hover pada gambar Iklan banner..sobat ganti dengan warna yang sobat inginkan.untuk melihat warna bisa klik disini.

4. Setelah itu Cari kode <div id='sidebar-wrapper'> , kemudian letakkan kode berikut tepat di bawahnya atau tepat diatas kode <b:section class='sidebar' id='sidebar' preferred='yes'> :

<div class='banner'>
<div class='adsbanner'>
<ul>
<li>

<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
<li>
<a href='URL-LINK-BANNER-HERE' rel='bookmark' target='_blank' title='ADS 125x125'><img alt='ads' border='0' src='http://gickr.com/results4/anim_ecab1e10-ab2b-f1d4-15e8-c3c58f0f395f.gif' style='vertical-align:bottom;'/></a>
</li>
</ul>
</div></div>

:::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah,adlh URL Gambar Banner, dan dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna orange, adlh URL-LINK-BANNER.
- dan teks yang berwarna kuning, adlh title judul banner.

5. Terakhir Priview dl, juga sudah tampil disidebar sobat, baru sobat bisa simpan template. SELESAI....

jangan lupa yach tuk berikan komentar anda,...

terimah kasih..!