TUTORIAL : Letak Icon Comel Sebelah Comment

Assalamualaikum w.b.t. Pada malam yang indah nie, saya nak share cara nak Letak Icon Comel Sebelah Comment. Di bawah nie terdapat contohnye, klik pada gambar untuk besarkan. Perhatian! tutorial ni hanya untuk pengguna blog TEMPLATE DESIGNER sahaja.

Dah paham? Mari sini nak ajar.

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates 

2. Tekan F3 dan cari kod nie :

<span class='post-comment-link'>

3. Dah jumpe? Ok, lepas tu korang copy pulak kod ni ye :

<img src="URL CUTE ICON"/> 

4. Then, korang paste di sebelah kod yang korang cari tadi. Faham tak? Kalau tak faham, bloeh tengok contoh di bawah.

5. Preview dulu. Kalau dah jadi, boleh la SAVE.

*kat bawah nie ade beberapa freebies URL CUTE ICON untuk diletakkan di sebelah komen. Kalau berkenan ambik la.

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic000demoji_9266200decoojp.gif

 

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic011demoji_15430247decoojp.gif

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic016demoji_14841866decoojp.gif

 

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic012demoji_15496649decoojp.gif

http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic018demoji_416449decoojp.gif 

 http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic017demoji_895744decoojp.gif

 freebies credit to :- Asmaamalina.

TUTORIAL : Unique Link Hover

Assalamualaikum w.b.t. Hari tu saya ada ajar tutor Double Dashed Link Hover. Tutorial yang ni lebih kurang sama je dengan tutor tu. Cuma, link hover bagi tutor nie sangat unik dan boleh la dikatakan 'cute'. (hehehe) Nak tengok contoh tak? Ade di bawah.

Klik untuk tumbesaran

Unik tak? Kalau nak try, sila ikut step di bawah.

1. Dashboard > Template > Edit HTML > Tick Expanf Widget Templates

2. Korang cari kod nie a:hover {

3. Korang nampak tak bawah kod a:hover { ada kod (warna biru)? Macam ni :-

4. Then, korang padam kod berwarna biru tu, dan gantikan dengan kod di bawah.

color: #ffffff;
background:#57D0F9;
text-decoration:none;
border: #ffffff 2px dashed;
padding:3px 5px;
-moz-border-radius:10px;
}

Note : 

* merah : warna background link hover korang

* oren : warna boader link hover

* pink : ketebalan boader link hover

* hijau : boleh pilih sama ada nak buat solid, dashed atau dotted

* biru : Kod ni sangat penting coz kod inilah yang mencantikkan lagi link hover korang. Kalau nak ubah boleh, tak nak pun tak pe (tak marah pun ^^). Pandai-pandai la buat uji kaji yup!

p/s : kod warna boleh dapatkan di SINI

5. Ok, kalau dah siap boleh tekan SAVE template. Selamat mencuba! Annyeong.

TUTORIAL : Double Dashed Hover (LIKE ME)

Assalamualaikum w.b.t. Ape itu Double Dashed Hover erk? Mesti korang tertanya-tanya kan. Nak tengok contoh? Hah, sila halakan CUSOR anda pada link di bawah.

HALAKAN CUSOR ANDA DI SINI

Yang tu la double dashed hover. Nak try? Jom mulakan.

1. Dashboard > Template > Edit HTML > Tick Expand Widget Templates

2. Tekan F3 dan cari kod ni :

a:hover

3. Dekat bawah kod tu ade kod (biru) macam nie kan :

4. Dah jumpa? Then, padam kod berwarna biru tu, dan gantikan dengan kod di bawah.

border-top: 2px dashed #ff8fc1;
border-bottom: 2px dashed #ff8fc1;                                                                                                        

*warna merah tue, korang boleh tukarkan dengan kod warna fav korang. Kod warna boleh dapatkan di SINI.

5. Done and SAVE! Lihatlah hasilnye (dah macam iklan produk kecantikkan pulak, LOL~)