Membuat Banner Iklan 125x125 dengn Kode CSS3

Dengan membaca judulnya mungkin sobat blogger kepikiran untuk menampilkan banner iklan 125x125 dengan bentuk kotak (persegi). Namun dalam tips yang akan saya berikan kali ini sebenarnya akan menampilkan animasi budar/bulat. Dimana saat pengunjung blog anda mengarahkan kursor ke banner ini, maka bannernya akan berubah bentuk menjadi kotak (persegi). Cukup menarik kan?. Banner ini sedikit menggunkan sentuhan kode CSS3 yang tentunya akna menghasilkan tampilan yang menarik buat sobat blogger. Untuk pratinjau dari tips ini silahkan lihat di situs kami di bawah ini:

DEMO

Nah mungkin sobabt blogger sudah lebih jelas dengan melihat contoh bannernya dalam Demo Situs kami tersebut. Jika sobat blogger memnginginkan banner ini, caranya cukup mudah ko. 

Berikut cara-cara menampilkan banner iklan 125x125 dengan sentuhan kode CSS3:

1. Login ke blogger dengan account anda
2. Pada dasbhoardblog anda, silahkan pilih Template => Edit HTML=> Lanjutkan.
3. Letakkan kode berikut ini di atas kode ]]></b:skin>

#kotak-iklan-125x125 {margin: 0px;padding: 5px;text-align: center;}
#kotak-iklan-125x125 img {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c0c0c0;-webkit-border-radius:70px;-moz-border-radius:70px;-o-border-radius:70px;border-radius:70px;-webkit-transition: all 0.45s ease-out;-moz-transition: all 0.45s ease-out;-o-transition: all 0.45s ease-out;transition: all 0.45s ease-out;}
#kotak-iklan-125x125 img:hover {margin: 0px 8px 4px 0px;padding: 3px;text-align: center;border: 3px solid #c33f00;-webkit-border-radius:0px;-moz-border-radius:0px;-o-border-radius:0px;border-radius:0px;}

4. Kemudian Simpan Template blog anda.
5. Setelah itu untuk mnemapilkan bannernya pada sidebar blog, silahkan beralih pada Tata Letak => Tambah Gadget => HTML/JavaScript.
6. Letakkan kode CSS berikut kedalam kotak HTML/JavaScript nya

<div id="kotak-iklan-125x125">

<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AAhW6apuBvjP0DdyGprRZW7d40s4AlHb_K_Dv4eJYlyT0buksUP_d-8cF1Mw5cdXloa_UyX44wT_RS2x3yGZMWY3IDfPXii4u3ePEhWjij8-aDKsIrmWzAyp2V69ZyrqSY2e-8SBg3M/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AAhW6apuBvjP0DdyGprRZW7d40s4AlHb_K_Dv4eJYlyT0buksUP_d-8cF1Mw5cdXloa_UyX44wT_RS2x3yGZMWY3IDfPXii4u3ePEhWjij8-aDKsIrmWzAyp2V69ZyrqSY2e-8SBg3M/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AAhW6apuBvjP0DdyGprRZW7d40s4AlHb_K_Dv4eJYlyT0buksUP_d-8cF1Mw5cdXloa_UyX44wT_RS2x3yGZMWY3IDfPXii4u3ePEhWjij8-aDKsIrmWzAyp2V69ZyrqSY2e-8SBg3M/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://tips-untuk-blogger.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AAhW6apuBvjP0DdyGprRZW7d40s4AlHb_K_Dv4eJYlyT0buksUP_d-8cF1Mw5cdXloa_UyX44wT_RS2x3yGZMWY3IDfPXii4u3ePEhWjij8-aDKsIrmWzAyp2V69ZyrqSY2e-8SBg3M/s1600/125x125.png" border="0"/></a>

</div>

Note:
Silahkan ganti tulisan yang berwarna merah dengan alamat URL iklan yang anda pasang pada bannernya.

Jika sudah selesai, silahkan  Save. Lihat perubhan yang terjadi pad blog anda. Semoga bermanfaat dan mohon maaf jika ada kesalahan. (Jkt/2012)