image hover with text(template designer)

Sunday, November 11, 2012


Annyeonghaseyo...



Annyeong,chingu,hari ini julia nak buat tutor baru,mungkin bagi korang dah lama,tapi ni khas untuk pengguna designer sahaja,sebenarnya kod ni julia ambil dari blogskin then julia edit untuk template biasa punyer.So,jom ikut tutor kat bawah nih.


1.Dashboard--->template--->edit HTML

2.Search kod nih:

]]></b:skin>

3.copy kod nih dan pastekan kat ATAS kod  tadi.

#ck{
background:#f0eeeb;
font-family:damai pelajar;
color:#7D7D7D;
font-size:11px;
width:250px;
height:135px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out; }
#ck:hover{opacity:.7}

4.Then korang mainx2 lah dengan kod tuh.Yang color tuh untuk warna font,tukar font-family,then size font,yang width dan height tuh untuk width dan height opacity kat image korang.Ok

5.Then korang masukkan kod nih kat HTML Javascript.

<img style="padding-top:4px;padding-bottom:1px;border-radius:15px; -webkit-transition:.2s; }padding-left:1px;padding-right:1px;border:1px dashed #eaeaea;" src="URL IMAGE" width="250" height="150" /><br />
<div id="ck"><br />
Ayat Korang
</div><br />

6.Ok,yang URL IMAGE tuh,cam biase,masukkan url image korang,then masukkan ayat korang yang manis-manis ,k.

7.Save