Kesempatan kali ini c.arjem mencoba untuk menjelaskan bagaimana cara membuat baner iklan 125X125dengan css3 + effect transition +transformasi, baner iklan ini memang unik selain bisa berubah bentuk, baner iklan ini bisa berjalan dan berputar untuk lebih jelsnya sobat bisa melihat gambar di bawah ini.atau arahkan kursor pada baner iklan yang ada pada blog ini,
cara menerapkannya iuti lngkah-langkah berikut ini
- Login ke blog sobat
- Pada area dashboard Pilih template >>Edit HTML
- Cari kode ]]></b:skin> tekan ctrl +f untuk mempermudah pencarian
- Copy kode di bawah ini &letakan tepat di atas kode ]]></b:skin>
- Selanjut simpan template
#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:4px;-moz-border-radius:4px;-o-border-radius:4px;border-radius:4px; background: blue; -webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s; left: 100px; right: 100px; background: red;
-webkit-transform: rotate(360deg);
}
- Langkah berikunya silahkan sabat klik Tata letak >> add gadget >> pilih HTML / javascript
- Kemudian copy script di bawah ini dan pastekan pada kolom gadget yang baru sobat tambahkan tadi
<div id="kotak-iklan-125x125">
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
<a target="_blank" href="http://coretan-arjem.blogspot.com/"><img alt="banner ads" src="http://i1279.photobucket.com/albums/y529/coretan_arjem1/arjem125x125_zps932f1a23.png" border="0"/></a>
</div>
NB: silahkan sobat ganti script yang berwarna hijau di atas dengan URL iklan sobat
Tidak ada komentar: