0

Letak Background untuk Form Kotak Komen

00:58 |
Good morning...wah sehari dah berlalu penuh dengan ucapan Happy New Year!Sekarang melangkah hari ke 2 pula..02.01.2011.Mesti ramai ambil kesempatan untuk renovate blog memasing,kan.Kite pun kadang2 terkejut juga ingatkan masa singgah blog kawan2 kite ter'sesat'.Rupanya kawan2 renovate blog huhu..tak boleh jadi nak join juga.Tapi masa tu tak terfikir nak tukar malaslah sesangat.Tapi bila my sis godek2 dia suruh tukar,tak berkenan template yang lama.Dia offer nak buatkan header yang simple..tu kat atas he3...Mestilah nak,kan.Tapi ada lak syaratnya..kena tukar template!Mak aii penat tukar template yang lama pun tak hilang lagi,ni nak tukar lagi.Tapi apa salahnya kan ngee.....Anyway tq to my sis Eka Putri(ambil masa 4 jam gak my sis godek2 Photoshop,maklumlah sejak hbs study langsung tak pegang PS lagi,dia keje shift kat KLIA.Manalah ada masa,,erm tu pun kite suruh dia standby watermark dan 1 lagi header yang sempoi ngee...)


Template baru,header baru,tahun baru,semangat baru.Sama juga dengan blog,dah renovate mesti kena semuanya baru,make up..touch up mana yang patut.Hah moh le kite teruskan.Sebenarnya dah lama nak apply background untuk form kotak komen tapi sibuk dengan entri,tak sempat2 nak buat.Tadi kite gagahi juga gi Blog Budak Nakal.Dulu kite apply Budak Nakal punya Shoutmix Box.Suka juga lepak sana banyak tutorial yang simple,senang faham..maklumlah kite ni kadang2 blur.Oh apa tu background Form Kotak Komen?Alah kotak yang korang dan kawan2 type komen tu.Selalunya kotak tu warna grey...suci bersih dari noda.Tapi apa kata tahun ni pakat ramai2 cantikkan lagi dengan pelbagai imej yang sesuai dengan template korang.Jom...


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

2)Klik Expand Widget templates

3)Tekan Control+f (Find).Cari kod ini;

<div class='comment-form'>

4)Gantikan dengan kod ini pulak(delete kod tadi yang korang jumpa)

<div id='comment-form'>

5)Sekali lagi tekan Control+f dan cari kod ini;

]]></b:skin>

6)Korang copy & paste kod di bawah ni..betul2 di atas/sebelum kod  ]]></b:skin>


#comment-form iframe{
background:#ffffff url(http://img202.imageshack.us/img202/8525/texturec.jpg) ;
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(http://img202.imageshack.us/img202/8525/texturec.jpg);
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;
}

Pada code berwarna merah korang letak link gambar yang korang suka.Boleh klik [di sini] untuk pelbagai imej.Ini pula link yang kite godek2 sendiri,cute miut semuanya[di sini].
Pada code warna biru korang boleh gantikan warna line di luar kotak.Klik [di sini].
Save dan lihat hasilnya.

Nota Comel->Tadi lepas je kite save,kotak tu jadi besar tak sesuai dengan template.Korang boleh adjust sendiri kelebaran kotak tu.Tulisan ungu width:450px tu kite tukar kepada 380px,ngam2 center kedudukan.Pandai2 lah try & error ye.

7)Jangan lupa setting Ruangan Comments.Korang gi kat;

Dashboard->Setting->Comments->klik pada Embedded Below Post

~Selamat mencuba dan terima kasih kepada 3 blog di bawah ini~


Kredit Info Tutorial:

  1. Blog Budak Nakal
  2. Ohdaus Blog
  3. Teknikbuatblog











Related Posts Plugin for WordPress, Blogger...