Membuat Kotak Iklan 125X125 4 Kolom Dengan Sentuhan CSS3

Kali ini saya akan menjelaskan bagaimana cara membuat kontak iklan dengan sentuhan css3 demonya ada pada gambar dibawah ini ":

banner adsbanner ads



banner ads



Jika anada suka langsung aja nich kukasi tutornya 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

  Lalu

Letakan kode dibawah ini diHTML/Java Script blog anada masing masing!!!

<div id="kotak-iklan-125x125">
<a target="_blank" href="http://ahmadrijal-blog.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://ahmadrijal-blog.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://ahmadrijal-blog.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://ahmadrijal-blog.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
Note :
 
Ganti kode berwarna merah dengan URL blog anda sendiri !!!

1 Coment :