Wednesday, March 2, 2011

tutoriol : cara nak buat blockquote...




Baru2 ni aku ada buat blockquote utk blog aku ni...rata2 dok tgk blog kwn2 ada menda ni...mula2 garu kepala gak..cmne la korang buat kan...hurmm nk tanya malu n malass...sampai la terjumpa 2-3 blogger yg baik hati wat tutoriol psl nak buat blockquote ni...mula baca entry mcm malas je nak faham sebab melibat kan coding HTML...aku cukup malas kalau sentuh bab coding ni sebab aku lemah bab baca dan ubah coding ni...takut dan risau je tgn ni nak ubah apa2 coding...kangg tak psl2 nak menda laen jadi menda laen pulak kann....haishhh...

Ok sekarang aku bagitau akan cara2 nak buat ni ok...sebelum tu nak pekenal kan la menda alah yg dimaksud kan ni dulu..kangg ada yg terpinga2 pulak kann...hehe

contoh blockquote aku ok :

sekadar nak share apa yg aku tahu jela...dpt pahala jgk ni hehee...




mula2 mcm ni : (maaf ye tkde gamba tapi aku rasa korang akan fhm sebab simple je step dia ok...)


1. klik pada Design pastu klik pada Edit HTML

2. kemudian cari (tekan Ctrl dan F) perkataan ini   .post blockquote {

so...dia akan tertera mcm ni :

.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }


3. di bawah simbol  } ni...perlu copy paste kan coding ini :

.post blockquote { background-image:url(url background yang korang suka ); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 2px solid #F5A9F2 ; margin:1em 20px; }


4. pastu korang kena paste kan url background pilihan korang (yg tulisan merah tu)...background blockquote korang bole pilih2 kat google atau mana2 laman web...ala mcm korang dok ubah2 template tu la kann...korang bole cari2 kat SINI jugak...just pilih dan copy paste kan url background pilihan...


(ni contoh background dan url dia...copy paste url tu je...tkyah copy yg pnjang2 selain yg diatas tu je tau..)


so...keseluruhan nya coding korang akan jadi mcm ni ok...lihat betul2..hehee


.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }

.post blockquote { background-image:url(http://content.mycutegraphics.com/backgrounds/color/colorbg25.gif); -moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; padding: 6px; Border: 2px solid #F5A9F2 ; margin:1em 20px; }


yang tulisan merah tu kena tukar kan ye ikut kemahuan...
#F5A9F2 - ni merujuk kpd code kaler pink ..so leh pilih code kaler kat SINI...
Border: 2px - ni ketebalan border..leh tukar2 ketebalan nya...

 
dh konfem dgn coding dan pilihan tu...boleh la klik Save Template...siapp..!


5. Pastu...cara nak guna kan setiap kali buat entry mcm ni...

klik New Post...kemudian note la apa2 yg korang nak note kan...
pastu highlight kan then klik simbol " (ada kat atas new post tu...)

selesai tu leh terus preview kan atau publish kan je...sure menjadi punye...cuba ok..
ni pun aku belajar dari beberapa blog baru leh faham sefaham nya...!




nak ajar kan cara2 nak buat blockquote kat sini ok...celik kan mata luas2 dan cuba faham kan ye...hehee kalau tak fhm jgk gi jenguk ke blog ibu arifa...maybe sana lg korang fhm...ehehh



35 comments:

mamalieyna said...

macam faham je..nnti kt umah nak try..lalala...TQ share ilmu! ^_^

♥ Anje a.k.a Mama_Balqis said...

fuyo...shantek la blog akak ni...make over ek...cun habis ni...suka2 pinky2 lagik...kasik klik2 HB untuk akak k

NM02 said...

bagus kongsi perkara baru.

moh amek award laling!

mamashikin said...

kak fieza, sy pun baru pandai buat...heeee..

|| NaFiRaa || said...

yeahhh~ dh lama nk belajar buat bende nih.. mekasih yer.. sebab buat tutorial nih..:)

Zue AnnaLeeya said...

terima kasih cikgu... sebut tuh ala upin ipin gitu... hahahah...

nnti nak try wat jgk... TQ fieza..

MamaYatie said...

time kasih fieza..eee..dah lama nak buat tp tak sempat lagi nak cari tutorial + tak tau org panggil apa..tp hari ni nak gi jalan2 dulu..nnt dtg balik tuntut ilmu

Fieza79 said...

@mamalieyna

harus faham kan betul2...nanti tersalah coding..alamak..naya je huhuu

Fieza79 said...

@? Anje a.k.a Mama_Balqis

yup..baru di make over kan...!

Fieza79 said...

@NM02

benda baru..tp ramai yg dah tau ni...

Fieza79 said...

@mamashikin

tu la lama tingin nk buat..tp tk konfiden..tp haritu paksa diri konfiden kan jgk..hahaa

Fieza79 said...

@|| NaFiRaa ||

bagus la tu...kira ada permintaan..hehee kongsi2 apa yg tau je...

Fieza79 said...

@Zue AnnaLeeya

hahh try jgn tk try...nanti tambah2 cun blog tu...

Fieza79 said...

@MamaYatie

haa..ok2 nnt dtg balik tuntut ilmu kat sini ok...hehee pegi jalan2 dulu...moga berjaya buat blockquote yg sempurna..!

Zur@ZaRi said...

waaaa.... cantik nyer blog nie... fieza baru wat makeover eh? sangat cantik... pandai! creatif!

tuto ni pun sangat berguna..=))
nak try wat gak la...=))

PutRee SeJiNjaNg said...

thanks for sharing sis..:)

Aida said...

lawanya rumah diaaaaaaaaaa .. lama kannnn tak jengokkkk .. :)
hi fiezaaaa

Fieza79 said...

@Zur@ZaRi

ha'ahh baru makeover kan...suruh org design kan je...

Fieza79 said...

@Aida

maceh aida...baru je tuka langsir hehee..

mamyharraz said...

mamy suka baca blog yg suka share ilmu..hee kadang nak tanya direct malu jd cara mcm ni banyak membantu terutama diri mamy ^__^ hee suka!

tq fieza :)

Fieza79 said...

@mamyharraz

yela mamy...mana yg tau tu leh arr kita sama2 share utk pengetahuan umum...nak tnya mmg rasa malu2 sket kan...hehe

syariza09 said...

nanti nk try ler, cantik pula quote ada corak2 ni

Nurr Kasih said...

template cute..blockquote pun cute..sharing is caring. tq kak..nti nak cuba la :D

strawberrylily76 said...

yes...boleh try nanti...thank u for sharing..:)

~izan~ said...

wah..dh lama tak tgk blog akak,cantikkk... jeles2 hehe..

izan pun kalau coding mmg lemau nk tgk,dulu time bljr,coding2 ni la mmg benda paling mls nk hadap huhu.ape2 pun mmg cantik la blog akak..cunnnn

LiLy @ MumMyQiStInA said...

Nnt nk cuba..mcm senang jer.. ;)

Thx yer Fieza sudi beri tunjuk ajar..

Nureen said...

nak kena try jgk nk bg umah cantek.. tp x der masa nk belek la fieza.. huuuu

mamaaedrean said...

TQ... kena tgk slow2 nih baru phm... eb pn bab2 coding nih agak mls.. hik3...

cantek ar umah baru u :)

AnneRaini said...

kak fieza sy cube buat tak jadi lor..blockquote tu jadi tp takde backgroudnye..huhuhu

Fieza79 said...

@AnneRaini

dh pilih dan copy paste kan url dia tak...? cmna leh xda background...cuba fahamkan sekali lalu lg tuto tu...

atau anne cuba copy kan je yg kfieza dh letak tu..tgk jadi tak background cmtu...

Ena said...

aritu datang tp tak sempat leave comment.. arini datnag nak say thanks bebanyak sbb watkan tuorial ni.. cuma ena memg berkenan yg purple tu.. so, ena copy yg tu lah nampaknya.. hihi..

Fieza79 said...

@Ena

ok..ok..sekurang nya berguna tuto ni utk kawan2...caya lah..

Adeq or Nad said...

tq akk.. jdi gak adeq pun blog..

_MySarah_yOurS 4ever ^_^ said...

tak jumpe pon kod tu..dah bnyak kali try :(

Rina Rossoneri said...

TQ, dah cuba dan jadi.. ;)

Related Posts with Thumbnails
 
Designed by Whitey Mommy