1

Tutorial Hover Untuk Kotak Komen

19:02 |
Hai..hai...hai..yuhuuuu.Bertemu kembali di ruangan T.U.T.O.R.I.A.L.Dah lama bebenor tak buat tutorial maklumlah kite pun merangkak-rangkak nak repair ini blog.Ini pun ikhlas dikongsikan atas permintaan MRS YIE .



Mrs.Yie said... Balas
tak percaya osama dah mati..tah2 esok lusa akan muncul osama lagi dalam video terbarunya..

tumpang tanya,mcm mana adik buat kotak komen jadi comel gini ye..nak belajar ni.. :)

Sebenarnya kite try & error je.Masa tu saja gatal tangan nak tukar background sampai lupa nak tukar link URL untuk 'hover'.Terkejut masa sibuk edit HTML dan pergi ke blog untuk tengok hasil kerja...ada 2 image untuk background kotak komen.Kotak luar tu background A,kotak hover background B.Nampak tak cute rabbit tu ba..ba..chak ngan korang!Selalunya #comment-form iframe{  dan #comment-form iframe:hover{ URL IMAGE  sama.Tapi kali ni bagi tukar background tak mau sama.Best jugak kan.Ok jom mulakan.


1-->Untuk dapatkan cute background untuk kotak komen yang di luar(macam kotak komen kite yang color biru tu),korang pergi ke [sini]


2->Untuk hover(macam background yang rabbit tu pulak,begini caranya ye;



1)Klik Dashboard->Design->Edit HTML->Back up template

2)Klik Expand Widget templates

3)Tekan Control+f (Find).Cari kod ini;
 #comment-form iframe{

Korang akan jumpa sebijik macam ni;

#comment-form iframe{
background:#ffffff url(background yang dipilih) ;
border:5px solid #FF66CC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
}
#comment-form iframe:hover{
background:#000000 url(background yang dipilih);
border:5px solid #FF66CC;
}
#comment-form a{
color:#7EB2AC;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-bottomright:8px;
}



4->Kod HTML yang di paste tadi,cari pulak kod ini untuk tukar background image untuk hover;



#comment-form iframe:hover{
background:#000000 url(background yang dipilih);


5->Then Save,pergi ke kotak komen korang dan cuba letak cursor ke kotak tu.


Hah ada 2 background image kan?Suka hatilah nak background image hover tu yang cute ke,ala-ala mengejutkan kawan ke.Biar mata kawan2 yang tinggalkan komen tu berwarna-warni.Pandai2 lah korang google cari imej yang dikehendaki.




Ok itu ajer.Selamat mencuba ye MRS YIE dan korang juga!!!





1 comment

Anonymous
21/12/12 03:09

I enjoy your writing style really enjoying this .
Feel free to visit my blog post ... Nowoczesne kominki

Post a Comment
Related Posts Plugin for WordPress, Blogger...