Part 1 | Tutorial template blog dil untuk korang

Salam to all readers

Hey korang, sorry, terlambat post entry ni.. Baru timbul kerajinan  nak buat tutorial..hehehe.. So, korang, untuk edit template, macam blog dil, dil akan ajar kan, step by step.. 

Untuk kali ni, dil akan ajar 4 benda utama dulu iaitu...

1. Border blog melengkung and ber shadow bagai + dashed atau dlm bahasa melayu, garisan putus-putus

2. Date header

3. Post title

4. Sidebar title

Oh ya, sebelum tu, nak bagitau, ini, dil pakai picture window template tau.. And untuk memudahkan lagi, segala kerja ni, kita guna, add custom css.. 

Template > Customize > Advanced > Add CSS.. Then, korang paste je, coding yang dil bagi ni, dalam kotak Add CSS tu okeh.. Lepas korang paste kan, so, secara direct, korag akan nampak perubahan dekat blog korang kan..

But if, there are no changes, maksudnya, coding anda, ada duplicate la tu.. Tapi jangan risau, apa yang korang kena buat, korang kena bukak Template > Edit HTML > Proceed > Expand Widget Templates > Ctrl+F kemudian taip untuk cari.. Contohnya, taip  .main-outer { then tekan enter.. So, akan display perkataan tu.. Dia akan highlight kan untuk kita.. So, padamkan,  .main-outer { bla bla  }.. Pastikan anda padamkan, cukup root dia.. Ada kepala, ada kaki.. { } err faham x? hehehe

 1. Border blog melengkung and ber shadow bagai + dashed atau dlm bahasa melayu, jarisan putus-putus

.main-outer {
border:1px dashed #F6358A;
-moz-border-radius: 0px;
border-radius: 15px;
-moz-box-shadow: 0 0 20px 10px #ffffff;
-webkit-box-shadow: 0 0 20px 10px #ffffff;
}

2. Date header

h2.date-header {
background:#F6358A;
color:#ffffff;
font-weight:normal;
margin-bottom:0px;
margin:0 450px -1.1em -19px;
padding:5px 5px 5px 5px;
line-height:20px;
text-transform:none;
text-align:left;
font-size:15px;
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;
}

3. Post title

.post h3 {
background:url( URL GAMBAR);
color:#000000;
font-weight:normal;
margin-bottom:0px;
margin:0 -20px 1.2em -20px;
padding:5px 5px 5px 5px;
line-height:25px;
text-transform:none;
text-align:center;
font-size:20px;
letter-spacing:0px;
border-top:2px solid #F6358A;
border-bottom:2px solid #F6358A;
border-left:2px solid #F6358A;
border-right:2px solid #F6358A;
}

4. Sidebar title

.sidebar h2 {
background:url(URL gmbar);
color:#000000;
font-weight:normal;
margin-bottom:0px;
margin:0 -10px 0.5em -10px;
padding:5px 5px 5px 5px;
line-height:20px;
text-transform:none;
text-align:left;
font-size:20px;
letter-spacing:0px;
border-right:5px solid #F6358A;
border-left:5px solid #F6358A;
border-top:1px dashed #F6358A;
border-bottom:1px dashed #F6358A;
}

Bile pakai add custom css tu, dia lagi senang.. So, boleh la try godek- godek, ubah, ikut suka hati.. Okey, selamat mencuba.. =)


Oh ya, untuk godek2 tu, korang boleh refer, tutorial dil, yang sebelum-sebelum ni.. Contohnya, shape untuk sidebar, and macam-macam laa.. okey.. Try try..