Tutorial : Background & Border Post Title (Template Designer)


Thanks Alia sebab bertanya. Suke tau die panggil ‘CIK TYRAH’. Bukan selalu orang panggil saye Cik Tyrah. Hoho suke suke. Oke sudah menyimpang jauh. Nak post title macam saye? Boleh, meh saye ajarkan. Tapi yang ni untuk pengguna Template Designer saje. Untuk template biase, saye tak berape sure.

macam tu rupe die oke :)

1. Dashboard > Design > Edit Html > Tick Expand Widget

2. Ctrl+F, cari code ni
h3.post-title, .comments h4 {
Full code die macam kat bawah ni. Korang delete semua code tu :)
h3.post-title, .comments h4 {
font:normal normal 22px Arial,Tahoma,Helvetica,FreeSans, sans-Serif;
margin: .75em 0 0;
}
3. Pilih nak background berwarna atau bercorak dan copy coding die then paste kat tempat coding yang telah di-delete kan tadi.

Background berwarna :
h3.post-title {
background:#FFFFFF;
text-align:center;
  margin: 0;
  font: $(post.title.font);
border:2px solid #33CCDD;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

.comments h4 {
  margin: 1em 0 0;
  font: $(post.title.font);
}
teks kuning untuk kaler background post title. Kaler boleh pilih kat sini atau sini.
text-align – center, right, left
border – 2px untuk ketebalan, solid untuk jenis [solid, dashed, dotted], teks hijau untuk kaler border
teks biru untuk bentuk border. Nak tukar boleh pilih di sini.

Background bercorak :
h3.post-title {
background-image:url("URL BACKGROUND");
background-repeat:repeat;
background-position:center center;
text-align:center;
  margin: 0;
  font: $(post.title.font);
border:2px solid #33CCDD;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

.comments h4 {
  margin: 1em 0 0;
  font: $(post.title.font);
}
  • URL BACKGROUND - korang insert url background kat situ. Boleh cari di sini atau sini.
  • text-align - center, right, left
  • border – 2px untuk ketebalan, solid untuk jenis [solid, dashed, dotted], teks hijau untuk kaler border
  • teks biru untuk bentuk border. Nak tukar boleh pilih di sini.

4. Save.

- Happy Trying -

nota jari : sorry jika agak confuse dengan tuto ni. Sebab die panjang and banyak coding. Sila tanya kalau tak paham :)

Comments

kurang paham lah..boleh bagi contoh hasilnye x?/


Entri terkini :Menantu mak.

Watch my video song!!
Cik Tyrah said…
@Taufan Bin Ribut

contoh da kasi kat tuto kat atas ni. contoh lebih clear boleh tengok kat blog sy ni sndiri :)
ArianaFadzil said…
erm >.< akak x faham la kat no 2 tu =/ boleh terang kan lebey lanjut tak ?
Cik Tyrah said…
@Cik Tyrah

sis highlight code kat no.2 tu, then delete.

lepas tu, paste code bckground berwarna/bercorak tu kat tmpt code yg di-delete tadi :)
anismaisarah♥ said…
tyrah , knapa x dapat cri code tuh? bleh tolong?
Cik Tyrah said…
@anismaisarah♥

try semula. tyrah da adjust coding die :)
Anonymous said…
dah jadi , terima kasih (:
LittleRainbow said…
mcm mna nak kecik kan saiz background tu??
Cik Tyrah said…
@LittleRainbow

Kecik kan saiz background? Tak paham la sis :)
nadiah yaya said…
haaaaaa jd pn..pnt cari smua xjd
ShidahAmie's said…
Thank you very much cik tyrah!sy da jadi buat :)
Syakirah Ruslee said…
Thank You so much cik tyrah :)