Sunday, May 8, 2011

TUTORIAL BORDER WIDGET SIDEBAR.

assalamualaikum , firtsly , nak mintak maaf bebanyak kepada sapa-sapa yang request tutorial dekat formspring, komen and shoutbox. huhu. aku xbleh nak buat laju laju sebab tenet lembab macam siput dan kebizian yang melanda diriku. cehceh. bermadah pulak. oke, straight to the point , kali ni aku nak buat tutorial pasai border widget sidebar . before nih aku ada buat tutorial pasai border post tittle kan ? haha. kebanyakkan yang try buat xmnjd kan ? why? why?kerh kerh kerh.huk aloh,guano saloh pulok.hahaha.. tapi ada yang buat menjadikan . congrats yaww *wink.

untuk buat border widget sidebar nih , kita pakai kod yang sama jer dengan kod yang kita gunakan untuk post tittle tu , tu pun kalau korang nak yang sama ler kan. cuma , kod untuk sidebar widget tittle nih kena pastekan dibawah kod h2 { manakala kalau nak buat border utk post tittle tu kna paste kat bawah kod .h3 blabla tu kan ? - begitulah flashback saya. hehehe.(pengaruh tulisan biru fb ler ni.kekeke) korang paham dak ? kalau xpaham, ikut jer step kt bawah ni hokey ? *wink

1. Dashboard --0  Design  --0 Edit Html --0 tick Expand Widget Template.

2. Ctrl+f i untuk cari kod   h2 {

3. oke, kat sini korang pilih jenis border mana yang korang nak hokey ? 

JENIS SIMPLE 
text-align:center;
-moz-border-radius: 35px;border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : #D0A9F5;
padding: 5px 0px 5px;
*klu xmau ada border,sila buang kod  border: 2px solid  #AC58FA; tu oke ? :)


JENIS BERBACKGROUND


text-align:center;
-moz-border-radius: 35px;border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : url(url background);
padding: 5px 0px 5px;


*klu xmau ada border,sila buang kod  border: 2px solid  #AC58FA; tu oke ? :)

DOUBLE COLOURED LIKE MEE ;D

text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border-bottom: 8px solid  #AC58FA;
background : #D0A9F5;
padding: 15px 10px 15px;



NOTA TAMBAHAN.

center; boleh ditukar kepada right/left

- tulisan kaler merah adalah kod untuk border . so korang boleh pilih nak border jenis mana. sebelum tu,
pastikan korang buangkan simbol { dekat kod jenis border tu okey .Klik sini untuk ambik kod jenis border yang korang loikee .

- tulisan kaler ijau adalah untuk bagi tulisan shadow, kalau xnak boleh buang.

#D0A9F5 kod kaler untuk shadow tersebut. klik sini untuk amik kod kaler

- tulisan purple boleh ubah nilai ketebalan border anda okey.

- perkataan solid boleh ditukar kepada dashed / dotted

#AC58FA kod kaler untuk border .

url background , gantikan dengan url gmbar background yang korang nak hokey ? :)

-border-bottom8px solid  #AC58FA; ini adalah kod untuk border bawah tu (rujuk gmbar double colour sidebar)

- kalau korang nak tukar font tittle untuk sidebar widget tu korang tengok tuto ni . klik sini .

4. Preview,klu xda error dan berpuas hati SAVE. pastu KLIK SINI please :) thnxbai.

kalau xpaham ker  apa ker tanya je okay . selamat mencubaa..byee :D


LOVE ; ♥ misluvcoklat ♥

10 comments:

Unknown said...

huhu. nak paste kt mn ?

Shafiqah Rashid said...

kod ni paste dekat bawah h2 {
=)

Me'aH said...

er... url background tuh kn... nk paste kt mna?

Shafiqah Rashid said...

paste kan dekat .
background: url(url background);
:)

Me'aH said...

owh... thanks... dh jd!

~ayusleeping~ said...

dear, nk paste kat mn...?

Shafiqah Rashid said...

dkt bwh h2 {

Mawar Hitam said...

bnyk la h2 tu....yg mne satu ek?...ngeee..jd pening =p

Shafiqah Rashid said...

yeke byk ? haha. pkai template apa?
awk try letak then preview,JGN SAVE.
then bila dh preview awk tgok jd ke x.
if xjd.jangan save.
if jadi awk save,
and one more thing,
jgn lupa upload full tmplate dlu okay :)

Budak Malas said...

thanks akak .