Membuat Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

Ok tutorial kali ini kita bahas cara membuat kotak klan 125x125 4-kolom dengan sentuhan CSS3 ok dah ane kasi ni demo nya di bawah. arah kan kursornya ke situ 

banner adsbanner ads



banner ads
   



gi mana berminat. kalo berminat hubungi 14045 anda akan mendapatkan potongan ayam super besar..


ok dah ni cara pembuatannya

  • loggin blogger
  • rancangan,edithtml
  • cari kode ]]><b:skin> letakkan kode ini di atasnya


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

  • Simpan template

 lanjut...?


oke kalian letakkan kode berikut terserah dimana kalian mau letakin mau di muka di hidung, kuping, terserah


<div id="kotak-iklan-125x125">
<a target="_blank" href="http://cyber-jm.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://cyber-jm.blogspot.com"><img alt="banner ads" src="http://3.bp.blogspot.com/-vUDy8dPQics/TuafGlOMkWI/AAAAAAAAAQg/O4gYgew5GyM/s1600/125x125png.png" border="0"/></a>
<a target="_blank" href="http://cyber-jm.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
<a target="_blank" href="http://cyber-jm.blogspot.com"><img alt="banner ads" src="http://4.bp.blogspot.com/-2kVg89CaMSE/TvUbAyMzI9I/AAAAAAAAAV8/D4RB2Dg1cZI/s1600/125x125.png" border="0"/></a>
</div>

  • Simpan dan lihat hasilnya




Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Jasriman Sukri, Published at 03.42 and have 6 komentar

6 komentar: