Tuesday, May 3, 2011

TUTORIAL BORDER TITTLE POST .

Assalamualaikum . oke, entri nih pasai tutorial lagi . hikhik. baguslah korang request time time macam ni , nanti bila aku dah sambung blajar mungkin susah sikit lah kot nak buat . yelah, nak bahagi masa untuk study, untuk tido,untuk makan ,dan tak lupa jugak untuk iron baju . hikhik. over x? okay xpayah cakap banyak kita straight to the point .

oke, alang alang nak buat pasai border tittle post ni , memula komer cer pikior nak jenis mana? oke,pastu korang amik jer kod border yang korang nak oke :)

1. Dasshboard -->  Design --> Edit Html --> tick expand widget template .

2. Ctrl+F untuk cari koding ini yawww ;D
h3.post-title {

atau, kalau xda kod tu,try cari kod nih pulak :
h3.post-title, .comments h4 { 
xjumpa jugak? try kod nih pulak .
h3.post-title, h4 {
3. oke,kat sini korang amik kod jenis border yang macam mana korang nak hokey ? paste kan je dekat bawah kod  tadi tu yaww :)

1.jenis simple :

font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : #D0A9F5;
padding: 15px 10px 15px;



2.Jenis Simple without border

font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
background : #D0A9F5;
padding: 15px 10px 15px;



3.Jenis berbackground

font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : url(URL BACKGROUND KORANG );
padding: 15px 10px 15px;



4.Jenis berbackground tanpa border

font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-moz-border-radius: 35px;
border-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border: 2px solid  #AC58FA;
background : url(URL BACKGROUND KORANG );
padding: 15px 10px 15px;



5.jenis double-coloured (like mee:D)

font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border-bottom: 8px solid  #AC58FA;
background : #D0A9F5;
padding: 15px 10px 15px;

so, kod tu jadi camni ,ini CONTOH aku punya kod . (aku guna style 5)

h3.post-title {
font-family:vanilla;
color: #000000;
font-size:14px;
text-align:center;
-webkit-border-top-left-radius: 35px;
-webkit-border-top-right-radius: 35px;
text-shadow: 3px 3px 3px #D0A9F5;
border-bottom: 8px solid  #AC58FA;
background : #D0A9F5;
padding: 15px 10px 15px;
font-size:140%;
font-weight:normal;
line-height:1.2em;
}


nota tambahan

1. font-family:vanilla; korang boleh ubah nak font jenis mana okay, itu contoh font yg i guna :)

2. color: #000000; ini adalah untuk kaler font korang tuh

3. font-size:14px; korang boleh ubah nilai 14 px tu mengikut besar mana korang nak.

4.text-align:center; ini untuk bagi tittle post korang center taw,kalau xnak ,kiter bakor jerr..hik3.i mean,korg buang je kay.

5. tulisan kaler merah itu adalah jenis border , korang boleh tukar . Klik sini untuk amik kod bentuk border yang korang nak . eh,kod kat situ ada tanda { ni kan, korang buang taw , kalau x,ia xjadi . dan kalau korang xmau dia berbentuk, i mean nak yang macam biasa je ,berbentuk kotak korang juz delete je kod tuh okay :)

6. text-shadow: 3px 3px 3px : ini kod untuk menshadowkan tulisan tittle post korang. kalau xnak ada shadow,buangkan jer ok. kalau nak perbesar/perkecikkan shadow tu ubahkan jer nilai 3px 3px 3px tu k.

7.  #D0A9F5; ini adalah kod warna untuk shadow text korang, boleh ubah . Klik sini untuk amik kod warna.

8. tulisan kaler ijau tu boleh ubah mengikut ketebalan border yang korang nak 

9.  solid , korang boleh ubahkan dengan dotted / dashed

10.  #AC58FA; warna untuk border korang tu . boleh tukar .

11. tulisan kaler purple , masukkan URL gmbar yg korang nak buatkan background tu okay .

12.background : #D0A9F5; ini colour background lah yer.

13.border-bottom: 8px solid  #AC58FA;  ini kod untuk border bawah tuh,ala yng line kaler purple terang tu (rujuk gambar 5)  

8px tu ketebalan dia, ofcoz boleh ubah. 
solid boleh diubah dengan dashed / dotted
#AC58FA warna border bawah tu .boleh juga diubah .


4. Preview dulu,kalau xda eror dan berpuas hati baru SAVE taw :)

psss: kalau font korang xjd korang tengok tuto nih no >>> Klik sini <<<

 Bye, Selamat mencubaaa...

p/s : awak awak, saya guna template designer , dan saya dah buat dan menjadi. kepada pengguna template lain tu saya taktaw lah jadi ke tak . im soriii *gaya amir* :D


p/s/s : kalau tak faham tanya je okay :)


LOVE ; ♥ misluvcoklat ♥

20 comments:

Amalina said...

Tak jadilah akak. Buatkan boleh?:(

Amalina said...

Reply kat Shoutbox Lina

SYAHIDAH PAMIDI said...

huhu...
npe tak jadi :(

misluvcoklat said...

@amalina : aik, awat xjd ? hehe..akak buat ok jer.
hem, boleh jer klu nak suro tlg buat :)

@Syahidah Pamidi : alahai,awak pon xjd, korang guna template ape ekh ? sy guna designer template :)

SYAHIDAH PAMIDI said...

samela...tapi np tak jadi :(

misluvcoklat said...

laa,yeke :(
hem,napa ek?
awk nk suro sy tlg wat x?
klu nk awk inbox me ur email n password kt fb sy. sy try buat tgk..huhu ..
sori sbb xjd..
sy buat jd jer ..
huuu :')

SYAHIDAH PAMIDI said...

oke :)
cida inbox awk...
thx sudi mmbantu :D

SYAHIDAH PAMIDI said...

awk!!! suda mnjadi... :D
bnyk kli cida cube...

ble cari h3.post-title {
dy kua cmni .mobile h3.post-title {
pk punye pk...last2 cida dpt idea delete .mobile
n hasilnye.... :DD
thx ya awk...

misluvcoklat said...

hehe..okeh ;D
btw,sy on lwat2 sbb sy bgun lewat..kekeke :D

Mischenta ima said...

akak nk tny nih.....cm ner akk wat y mcmKLIK WEY KLIK ada border purple cntik tuh....ada tuto x akk ??

misluvcoklat said...

oh..yg tu xde tuto lg.. insy, 6t akak buat kay ;)

meraa zamri said...

tak jd lah .. bantu saya :(

misluvcoklat said...

Xjd ek? Hem nak sy tolong buat x? Tapi lmbat la. Dua mnggu lg bru sy blik.huhu.awk buat xjd ke awak cri kod xjmpa ? Huhu.

farina syamsul said...

sumpaa ta jadi..

misluvcoklat said...

pakai tmplate apa ye ?

secret . private . said...

thanks sis , menjadi .. :D

Anonymous said...

wah....
cantik3x...

ana damia said...

waaaah..........
cantik3x...
i like...

Budak Malas said...

thanks :)

nana liena said...

tak jadi sebab dekat code utk border semua tu sis lupa letak tanda } tau.. huhu..itu yang tak menjadi...