Pasang Banner Iklan 125x125 Hover Box dengan CSS3

 
Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. 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 */

NB :
- 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, adalah warna hover pada gambar Iklan banner..anda ganti dengan warna yang sobat inginkan.

7. 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>

NB:
- 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.

8. Save

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post