TUTORIAL :DATE ROUND CORNER (designer template only)

SELAMAT PAGI. GUD MORNING :)

(nk tengahari dh cik solehah uii..haha)

pagi nie solehah tak nak ckp bnyk..perut lapar laa.mcm kurang bertenaga pulak.hehe  :)

okeh.1st.sorry adek tira sebab lambt buat tutorial nie..yang lain kalau tak tau DATE 

ROUND CORNER.,.tengok kt gambar bawah nie.yg corner bulat bulat tu ha..hehe :)

(solehah main letak je title tutorial.haha..tapi..korang faham kn lepas tgok gambr??)

(nie lah date round corner..hoho)

LANGKAH 1.

• mula mula.pegi DASHBOARD > DESIGN > PAGE ELEMENT > EDIT HTML

LANGKAH 2

• cari koding yang nie okeh.ctrl + F lagi senang..hehe :)

]]></b:skin>

LANGKAH 3

•  dah jumpa??korang ambik koding yang nie pulak.letak kat atas/sebelum koding kt langkah 2.

h2.date-header { background:#f871ba; color:#ffffff; border:2px solid #44a223; font-weight:normal; margin-bottom:-20px; padding:5px 5px 5px 5px; line-height:20px; text-transform:none; text-align:center; font-size:20px; letter-spacing:0px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px; }

LANGKAH 4

•  kejap okeh.solehah nak terangkan ckit koding kat ats nie.hehe..nanti korang tak faham pulak..

1. background:#f871ba; = yg nie untuk warna background date post korang.boleh tukar warna lain lain okeh..just tuka kt kod warna tu.
2.  color:#ffffff; = tukarkan warna font date post korang.mcm solehah buat tu.warna putih.
3. border:2px solid #44a223; = yg nie untuk buat kotak date post korang tu ada border.ketebalan border boleh tuka kt nilai px tu.jenis border boleh tuka jugak.. dashed.dotted.solid.double . warna border korang just tuka kod warna tu okeh.xnak border??tukar kn nilai 2px ke 0px yep.
4. font-weight:normal; = nie nk buat font korang normal / bold.kalau nak buat bold.korang just gantikan normal tu ngn bold yep.
5. margin-bottom:-20px; = ha.nie korang try tuka pegi nilai -10px.tengok.apa yang tejadi?haha.
6. padding:5px 5px 5px 5px; = yg nie jarak font korang dalam date box tu nnti.
7. line-height:20px; & font-size:20px;  = dua dua nie slalu solehah bagi letak nilai px yang sama.saiz font & line height.korang tuka ikut size korang nk okeh.

LANGKAH 5

• dalam tutorial round corner.paling penting  ialah koding nie.hehe

-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 0px; -webkit-border-bottom-right-radius: 0px;

• korang boleh tuka nilaai px tu .tengok date box jadi mcm mna pulak.hoho

LANGKAH 6 

• kenapa ada moz border & webkit border? sebab..kalau webkit tak buat..masa korang bukak blog pakai google chrome. .round corner yang korang buat tu.tak dapat view.begitu jugak moz border. yg nie untuk pengguna mozilla firefox..

LANGKAH 7

• faham tak??hehe..dah siap korang preview dulu..menjadik tak??dah siap.takda error.SAVE.

*yang bejaya buat..tepuk tangan 3 kali sahaja.haha :D solehah lapar daa buat tutorial nie.makan pun blom.

kalau ada yg x menjadikk..bgtau solehah..hehe..nnti solehah tolong.hoho..babaii :)