Banner Iklan 125x125 dengan CSS

Pada kesempatan kali ini, Mas Adhie akan berbagi widget kepada teman-teman Blogger khususnya yang kepengen memasang widget advertisement untuk blog mereka. Widget yang saya share ini adalah widget banner ads berukuran 125x125 (bisa juga di atur sesuai lebar sidebar yang ada di blog Anda)

Widget yang satu ini diberikan sedikit efek CSS sehingga saat kursor mouse Anda tidak berada diatas banner, sisi-sisi banner akan melengkung (radius) ketika diatas banner akan kembali normal.

Daripada bingung dengan penjelasan yang saya berikan, alangkah baiknya langsung mencoba tutorial dibawah ini, siapa tahu Anda tertarik dengan widget banner ads 125x125 berikut ini.

Cara Memasang Widget Banner Ads 125x125 Dengan CSS
1. Login ke akun Blogger
2. Pada dropdown pilih Tata Letak (Layout)
3. Klik Add Gadget >> Pilih HTML/Javascript, masukkan kode berikut
<style> #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; } </style> <div id="kotak-iklan-125x125"> <a href="http://www.mas-adhie.web.id" target="_blank" ><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86FKUmJM1B3wkbU2wVp5YzpHQJjcNdCOBK2D8i7Lc3eb6qjFV6HSqn7eHgBXUobpXu_UrhGpxQFnUz6WjIcZHIocLgoKE0ZCwnvqT9VfWCXMD-GuNgNV5V122sJDq_JnLtKZamu7ujI4/s1600/ad125x125.jpg" border="0" width="125px" height="125px"/></a> <a href="http://www.mas-adhie.web.id" target="_blank" ><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86FKUmJM1B3wkbU2wVp5YzpHQJjcNdCOBK2D8i7Lc3eb6qjFV6HSqn7eHgBXUobpXu_UrhGpxQFnUz6WjIcZHIocLgoKE0ZCwnvqT9VfWCXMD-GuNgNV5V122sJDq_JnLtKZamu7ujI4/s1600/ad125x125.jpg" border="0" width="125px" height="125px"/></a> <a href="http://www.mas-adhie.web.id" target="_blank" ><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86FKUmJM1B3wkbU2wVp5YzpHQJjcNdCOBK2D8i7Lc3eb6qjFV6HSqn7eHgBXUobpXu_UrhGpxQFnUz6WjIcZHIocLgoKE0ZCwnvqT9VfWCXMD-GuNgNV5V122sJDq_JnLtKZamu7ujI4/s1600/ad125x125.jpg" border="0" width="125px" height="125px"/></a><a href="http://www.mas-adhie.web.id" target="_blank" ><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86FKUmJM1B3wkbU2wVp5YzpHQJjcNdCOBK2D8i7Lc3eb6qjFV6HSqn7eHgBXUobpXu_UrhGpxQFnUz6WjIcZHIocLgoKE0ZCwnvqT9VfWCXMD-GuNgNV5V122sJDq_JnLtKZamu7ujI4/s1600/ad125x125.jpg" border="0" width="125px" height="125px"/></a>

4. Klik simpan dan lihat hasilnya.