Tutorial menukar 'title font size', warna pada blog

-->

Saya baru sahaja kerjakan template saya, so supaya nampak lebih kemas. Dan, semasa saya cuba dan mencuba, saya terjumpa satu tutorial yg agak menarik untuk dikongsikan dengan korang semua.

'Sidebar title fonts' sangat senang di ubahsuai mengikut kesukaan kita. Yang penting kita tahu macam mana gunakan kod CSS yg betul untuk tajuk di sidebar ini, dan kemudian kita boleh mencubanya dengan begitu mudah sekali.

Jom kita lihat makna yang digunakan untuk kod di bawah:-

Pergi/Cari Layout | Edit HTML dan mulakan carian.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

1- Tukar kumpulan jenis tulisan seperti Arial, Times New Roman, Georgia, Verdana, dsb.

Berdasarkan kod di atas, sidebar title font dikenali sebagai font:$headerfont;. Ini bermakna jenis tulisan untuk 'header' dan 'sidebar' template kita adalah sama. Tetapi jika korang nak tukar ikut kesukaan, dan tahu jenis2 tulisan yg diingini, silakan. Contohnya pada '$headerfont; tukarkan terus kepada 'verdana'. Contohnya seperti dibawah.

h2 {
margin:1.5em 0 .75em;
font-family:"Times New Roman",Georgia,Serif,verdana;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

2- Menukar saiz huruf/tulisan.

Mudah saja tambahkan font-size pada kod sedia ada seperti dibawah.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
font-size:20px;
}

Nota: Boleh ubahsuai font-size ikut kesesuaian template.

3- Menukar warna seperti merah, hijau dsb...

Buat masa ini, color:$sidebarcolor; kod tersebut mendefinasikan tentang warna. Ini bermakna warna tajuk bergantung kepada warna pada 'sidebar', iaitu warna 'sidebar' dan warna tajuk adalah sama. Kita boleh tambah/tukar warna kita sendiri dengan menukar $sidebarcolor dengan warna lain, contohnya:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#000000;
}

Ingat:: #000000 adalah kod warna untuk warna hitam., #ff0000 kod warna untuk warna merah, dsb...

#DCP: Semoga berjaya mewarnai template anda!!

Read More ....