33 Tutorial buat blockquote/kotak comel dalam entri

Assalamualaikum..

Pagi ni aku nak share tutorial ngan korang..

korang penah tak gune blockquote? kite panggil kotak comel je la ye..

Testing testing..cer letak cursor kat kotak comel ni :)

Sebelum ni aku tak penah gune, kalau nak buat kotak, just buat dalam Word. Tapi macam bosan lak gune Word nye kotak kan. Hehe. Jom tengok step by step k.

1) Dashboard --> Design --> Edit Template --> Tick Expand Widget Templates

2) Find kod ni .post blockquote { kalau takde, find kod ni, 

/* Posts
----------------------------------------------- */

cari salah satu je ye, harap-harap jumpe :)

 

3) Kemudian paste kod kat bawah ni di bawah kod yg dicari tadi:

background:url(FIRST URL GAMBAR); padding:5px; 

border:3px solid #000000;

-moz-border-radius: 10px;

-moz-border-radius: 10px;

colour:#FFFFFF}

blockquote:hover {

background: url(SECOND URL GAMBAR) repeat right bottom ; 

border:3px solid #000000;

Semua yg warne bold purple tu boleh di tukar:

FIRST URL GAMBAR --> Ni background kotak sebelum disentuh oleh cursor

SECOND URL GAMBAR --> Ni background kotak selepas disentuh, boleh cari background kat SINI

3px --> ketebalan border yang korang nak

solid --> jenis line border kotak, leh tukar jadi dashed

#000000 --> warne border pilihan korang, boleh cari kod warne kat SINI

10px --> kalau nak kotak lagi melengkung boleh letak 20px or 30px, kalau tak nak kotak melengkung, buang kod ni:

-moz-border-radius: 10px;

-moz-border-radius: 10px;

4) Preview dulu bile dah siap, kalau tak de error/cacat baru SAVE. 

Cane nak gune kotak comel ni? Buat entri macam biase, ayat yang korang nak masukkan dalam kotak comel kena dihighlightkan, lepas tu klik icon Quote, contoh macam ni:

Highlight macam yg merah tu, Quote yang hijau tu

Preview, akan jadi macam ni laa..:D

Sila muntah hijau..hahaha

 Err, faham ke ni? kalau tak faham boleh tanye k..

tapi tak janji leh jawab..^_^

---

♥ Thanks for reading!~ Have a nice day ^_^ ♥

---