Thursday, November 11, 2010

# Tutorial 1- Blockquote box

hello, malam ni tetiba plak rasa nak buat tutorial. my first tutorial tuuu (feeewit! sudah maju~) okay2, back to the topic, sape-sape yang dah tahu, tak pe laaa. kalau korang nak cakap i'm to 80's, it's okay. no biggie,dude :)

Let's Start, Honey!

1. korang tahu tak blockquote tu ape? bukan block A, block B or block C yang rumah flat tuu. cekidaout this pic.
(tekan kalau nak besorkan gambar yee)

2. first, pegi kat Dashboard ---> Edit HTML ---> Tick kat Expand Widget Template (pssst, make sure korang save dulu yee. kang kalau tak jadi, menangis tak berdangdut kang)

3. then, tekan CTRL+F, cari ayat ni .post blockquote { hmmm, dah dapat?? jumpa tak code macam ni?
post blockquote {
margin:1em 20px;
4. bila dah jumpa code macam kat atas ni, korang cut (CTRL+X) code di atas. lepas tu, copy (CTRL+C) code dibawah then pastekan (CTRL+V).
post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;

5. okay, lepas tu, ikut arahan kat bawah ni. :)
.post blockquote { background: #FFCC99; (yang ni kaler background yang korang nak letak. kalau nak cari code warna lain, cari kat sini. banyak pilihan warna dan sangat colorful wa cakap sama lu) *wink2

-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; ( yang ni, tak payah tukar. sebab border je pun )

padding: 6px; ( jangan kacau yang ini )

Border: 1px solid #ff0d62; ( yang ada tulis px, yang tu lebar border. kalu korang nak bagi tebal sikit, letak la 2px-10px.. code tu kaler border. macam biasa, kalu nak tukar, pegi dekat sini )

solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _

margin:1em 20px;
} ( jangan kacau )

6. dah ikut? okay. lepas tu, tanpa segan silu dan malu kuku, tekan SAVE.

7. kalau nak try tengok menjadi ke tak, try post new entry. tulis lar ape-ape yang korang nak tulis lepas tu highlight kan, then click kat icon ni.
(tekan kalau nak besorkan gambar yee)

selamat mencuba :)

No comments: