Cara Membuat 4 Kolom Banner Iklan 125x125 Dengan Sentuhan CSS3

Cara Mudah Membuat 4 Kolom Banner Iklan 125x125 Dengan Sentuhan CSS3

Mempercantik Banner Iklan tidak ada salahnya kita coba - Saya yakin sobat semua akan tertarik dengan penampilan banner iklan yang satu ini.dengan sentuhan kode CSS3,banner iklan akan terlihat lebih cantik dan menarik .untuk demonya silahkan sobat arahkan mouse sobat pada gambar dibawah dan lihat efeknya yang ditimbulkan sangat cantik bukan?

Dengan mempercantik banner iklan seperti ini tentu akan menambah penampilan blog kita lebih elegan.dan mungkin akan membuat rejeki kita tambah lancar, karena dari pihak pengiklan akan senang melihat iklannya dipercantik dengan efek-efek yang bagus. jika sobat ingin mencobanya sobat bisa ikuti langkahnya dibawah ini :

Langkah 1
Masuk atau login ke akun blogger sobat

Langkah 2
Silahkan masuk ke Menu Design atau Rancangan. Lalu Klik Edit HTML.

Langkah 3
Carilah kode ]]></b:skin> (Untuk mempercepat pencarian silahkan sobat tekan tombol CTRL-F)

Langkah 4
Setelah menemukan kode diatas, silahkan copy paste kode dibawah ini tepat diatas kode ]]></b:skin>

/* 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;
}

Langkah 5
Save template sobat.

Langkah 6
Masuk ke menu Elemen Laman kemudian Tambah Getget dan pilih HTML/JavaScript setelah terbuka silahkan kopy kode dibawah ini kedalamnya.

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://abitalita.blogspot.com"><img alt="banner ads" src="http://i760.photobucket.com/albums/xx247/abila_photo/iklan-1.png" border="0"/></a>
<a target="_blank" href="http://abitalita.blogspot.com"><img alt="banner ads" src="http://i760.photobucket.com/albums/xx247/abila_photo/iklan-1.png" border="0"/></a>
<a target="_blank" href="http://abitalita.blogspot.com"><img alt="banner ads" src="http://i760.photobucket.com/albums/xx247/abila_photo/iklan-1.png" border="0"/></a>
<a target="_blank" href="http://abitalita.blogspot.com"><img alt="banner ads" src="http://i760.photobucket.com/albums/xx247/abila_photo/iklan-1.png" border="0"/></a>
</div>

Selesai dan sobat bia lihat hasilnya.
Keterangan :

• Ganti Link berwarna merah dengan link Iklan Sobat.
• Ganti Link berwarna biru dengan url gambar sobat.

Semoga Bermanfaat,Happy Bloging!