Thursday, July 14, 2011

34 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 ^_^ ♥

34 bijik anggur:

caliph shuriken said...

rajin ar pagi2 dh wt tutorial ^^

aTy _faRed~ said...

ooowwwwhhh..sonang jo ruponyo... heheh...;)

WuMing said...

Teng kiu... buat lahn toturial blog banyak..banyak... boleh tumpang belajar... WuMing selalu try and error saja

sifu im said...

pompuan mmg..suka hias bnda2 ngarut gtu..haha

alif haris said...

best2 bnde ni ..
alif pn nk buat hehe ^^

thanks ye ~

shida'R said...

nice tutor fir ^_^

syrupmasin said...

ohh terime kaseh cikgu :D

harrazdani said...

tak minat plak nak buat kotak2 ni..huhhu..

Fathiah Hamim said...

best nya buat benda nehh. tapi fa selalu malas. huhu

myraixorra said...

sayang. nape tak jadi eay ???
yang sign blsquote kita tuw dia bukan warna biru.
dia warna kelabu.. kenapa eh ??
kita dh buat mcm yg tuto awak ny..
tp tak jadi punn

najihah sahami said...

wanie comey wanie comey wanie comey..hehe...siap puji..nak kepsi!

Abang Stalker said...

wanie comey wanie comey?hahah..ok,cute abes le tu blockquote dia. :)

Ini Kisah Tia said...

ohooo . flash blockquote :)

Wanie said...

sifu im

kuajaq..ngarut eh ko kate..huhu..
aku paham laki mmg la tak pandang benda gini..huu

Wanie said...

harrazdani

haha...faham2..boleh je ni kalau buat tak gurly..pandai2 la cari background yang sesuai..=)

Wanie said...

Myra

tak faham la..sign yg mane ye warne kelabu?huhu..
awak jumpe tak kod yg sy bagi ni?

Wanie said...

Mish

tak keje lagi nak belanje..hehehe
sape dpt gaji dulu belanje la kepsi..:P

Wanie said...

Abang stalker

hahaha..tau tak comey, saje je angkat bakul sendiri..:D

azwa amani said...

yerrr wanie comeyyy.. thnks sharing yer dear

Miz Novexx said...

alaaa.... comelnya!!! thanx 4 sharing

HAZWAN17 said...

dulu penah try tapi tak jadi..terus malas haha

Bro ahmad said...

best la wanie ni..terbaik..kotak ni letak dalam entri kan?

apik pehe said...

hebat wanie..hehehe

rara pinkmafia said...

rajinnya wanie buat2 ni.kalau akk mmg malas dh.

Syuxer said...

tutorial yang menarikla..hensem cikit bila wat neh..n x berat kan wat benda neh??

kotak bulat said...

berat tak kalau tmbh bnde ni..hehhe..
kb nak buat..tp nnti tak tau bile nk gne.. :P

salwaismail said...

thanks! :D
http://salwaismail.blogspot.com

izfanora said...

wanie, kod tue dua2 xder lah.. huhu..

IZYAN KAHER said...

tak jd la dear :((( .. sobss

♥ cik puan h0nggi ♥ said...

yeah ^^ paham cikgu wanie..
tenkiu ^^

tiera said...

tak jadi la...cm ner erk...

Atin Amid said...

Tak jadi :(

Husna Una said...

alaaa.. x jadi cz.. tak dak la code tu =(

Dyhah Qyla said...

Waaa ~ x jadik . code tu mmg ad . tp , lpas tu , x jadik lgsg . xder pun . sedih nya ~