coretan arjem: Tutorial blog

Askum all....!!!
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

>>more>>

Askum all....
Kali ini C.arjem mau menjelaskan & berbagi tentang bagaimana cara membuat icon di samping judul postingam yang sanggup muncul saat di sorot cursor & menghilang saat cursor tidak lagi di atasnya , gimana penasaran kan ?? hehehehe.... tenang aja sobat C.arjem tak akan membiarkan hati sobat bertanya-tanya dan tutorial ini akan menjadi jawabanya.

Pertama login ke blog sobat
Ke dua masuk rancangan Edit HTML
Ke tiga cari kode ]]></b:skin> tekan ctrl+f untuk mepermudah pencarian
Ke empat copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin> .

h3.post-title{
padding-left:15px;
padding-right:8px;
display:inline-block;
background-position:4px 6px;
background-size:5px 5px;
text-decoration:none;
color:#C60000;
font-weight:500;
text-shadow:1px 1px 1px #000000;
transition:0.8s ease-in;
-o-transition:0.8s ease;-in;
-moz-transition:0.8s ease-in;
-webkit-transition:0.8s ease-in;
-ms-transition:0.8s ease-in;
}
h3.post-title:hover{
background:url(http://i1279.photobucket.com/albums/y529/coretan_arjem1/loading_zps0197b318.gif) no-repeat;
background-position:1px 2px;
background-size:15px 15px;
color:#F00000;
padding-left:22px;
padding-right:6px;
}

Yang terahir save template danlihat hasilnya ( semoga bermanfaat )

>>more>>

coretan arjem

Cara Membuat Baner Iklan Unik 125X125 Dengan CSS3

Membuat Icon Judul Artikel Bisa Muncul & Menghilang