hari ni wawa nak ajar korang cara nak kawaii kan lagi korang punya title sidebar dengan cara meletakkan background image.ramai yang request tutorial ni,sampai semak tutorial form wawa dengan soalan yang sama saja :) wawa harap tutorial ni dapat membantu korang semua mencantikkan lagi blog korang yea.



tutorial ini dihasilkan 250% dengan usaha wawa sendiri menggodek-godek segala macam coding tanpa berchit chat dengan encik google okeyyh.tolong jangan mencetak rompak idea wawa yea.okeyy laa,kalau korang semua dah ready nak belajar,jom laa kita mulakan.






1. macam biasa laa,korang tekan dashboard designedit HTMLtick expand widget template.

2. korang tekan ctrl+f dan cari code ]]></b:skin>

3. sekarang korang copy pula code dekat bawah ni dan paste sebelum atau di atas code ]]></b:skin> yang korang cari tadi.

.sidebar h2 {
text-align: center;
background-image: url('URL GAMBAR BACKGROUND');
Border: 3px solid #000000;
margin:0;
padding:0 0.2em;
line-height:3em;
}

4. sekarang kita belajar belajar cara nak edit code ni mengikut cita rasa korang okeyyhh :)

text-align: center;

code ini adalah untuk menjadikan title sidebar korang center.korang boleh tukar center tu dengan right atau left.

background-image: url('URL GAMBAR BACKGROUND');

korang tukar URL GAMBAR BACKGROUND tu dengan url gambar yang korang suka.

Border: 3px solid #000000;

3px adalah untuk ketebalan border.korang boleh tukar jadi 1px untuk border yang nipis atau 5px untuk tambah ketebalan border.lebih besar angka yang korang guna,maknanya border akan jadi lebih tebal.
solid adalah jenis border.korang boleh tukar jadi dashed --- atau dotted .....
#000000 adalah warna border.korang boleh tekan sini untuk cari code warna border yang korang mahu.

line-height:3em;

ini untuk ketinggian kotak untuk title sidebar korang.korang boleh tukar jadi 1.5em untuk kecilkan atau 5em untuk besarkan lagi.makin besar angka yang korang guna,maknanya kotak sidebar akan jadi lebih besar.

-moz-border-radius: 30px;
-webkit-border-radius: 15px;

tambah code ini kalau korang nak border title sidebar korang jadi melengkung okeyyhh.ini tak wajib yea,guna kalau korang nak sahaja.tengok contoh dekat bawah ni.
ini adalah code asal:

.sidebar h2 {
text-align: center;
background-image: url('URL GAMBAR BACKGROUND');
Border: 3px solid #000000;
margin:0;
padding:0 0.2em;
line-height:3em;
}

ini lepas korang tambah code untuk border melengkung:

.sidebar h2 {
text-align: center;
background-image: url('URL GAMBAR BACKGROUND');
-moz-border-radius: 30px;
-webkit-border-radius: 15px;
Border: 3px solid #000000;
margin:0;
padding:0 0.2em;
line-height:3em;
}

5. sekarang,kalau tiada sebarang masalah dan korang pun dah puas hati menggodek-godek code tadi ikut cita rasa..korang boleh laa tekan save dan pegi view blog korang yea :)