Membuat Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

Membuat kotak iklan atau banner 125x125px 4 kolom, dari judulnya mungkin tidak cocok membuat kotak iklan 125x125 4 kolom, padahal yang dibuat bukan kotak melainkan bundar/bulat.

Ya dengan sedikit percobaan menggunakan sedikit sentuhan css3 untuk membuat kotak iklan dengan bentuk bulat dengan hover dengan bentuk kotak.

untuk membuat kotak iklan tersebut kalian bisa meng-copy kode css dibawah ini dan tempatkan diatas kode ]]></b:skin> tapi sebelum melakukan pemasangan kotak iklan 125x125 ini, kalian membuat backup template terlebih dahulu, dengan men-download full template pada Design - Edit HTML untuk menghindari kesalahan.

/* Kotak Iklan 125x125
===================== */
#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;
} 

setelah di copy diatas kode ]]></b:skin> kemudian save template kalian dan masuk pada Design - Page Element - Add gadget - HTML/javascript dan copy paste juga kode dibawah ini dan save. silahkan test blog anda.

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://chayoy.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ummUZPlY-lNZj_ItByI7gd5gZ5V59VipyEooP7QD3_1JRroxoYqHbZ4VLkBJl8eqKlPgmaGmckin9n3Yt2XY2A71ryvW6_1FMgRF77GTMNM6moPSn4Jx2Bqkm0957_xEzHi9XqFmGRg/s1600/125x125.png" border="0"/></a>

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://chayoy.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ummUZPlY-lNZj_ItByI7gd5gZ5V59VipyEooP7QD3_1JRroxoYqHbZ4VLkBJl8eqKlPgmaGmckin9n3Yt2XY2A71ryvW6_1FMgRF77GTMNM6moPSn4Jx2Bqkm0957_xEzHi9XqFmGRg/s1600/125x125.png" border="0"/></a>

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://chayoy.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ummUZPlY-lNZj_ItByI7gd5gZ5V59VipyEooP7QD3_1JRroxoYqHbZ4VLkBJl8eqKlPgmaGmckin9n3Yt2XY2A71ryvW6_1FMgRF77GTMNM6moPSn4Jx2Bqkm0957_xEzHi9XqFmGRg/s1600/125x125.png" border="0"/></a>

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://chayoy.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ummUZPlY-lNZj_ItByI7gd5gZ5V59VipyEooP7QD3_1JRroxoYqHbZ4VLkBJl8eqKlPgmaGmckin9n3Yt2XY2A71ryvW6_1FMgRF77GTMNM6moPSn4Jx2Bqkm0957_xEzHi9XqFmGRg/s1600/125x125.png" border="0"/></a>

Untuk cara memasang iklannya, kalian ganti saja kode yang berwarna merah dengan alamat dari iklan tersebut, url pertama merupakan url tujuan dan url yang kedua merupakan url gambar. Selamat mencoba.
Semoga bermanfaat. 

Share :