Monday, 23 March 2009

Cara mengedit heading [ h2 ] untuk Sidebar

Salah satu mangfaat pengunaan heading/judul ialah untuk mempermudah dalam menentukan sebuah topik. Pada html sendiri heading ini mempunyai tingkatan dan ukuran tertentu, mulai dari h1 sampai h6.

Dan secara default dalam template Minima Standar , pengaturan untuk tag heading h2 di atur secara umum ( inheritance= pewarisan property ), artinya ketika kita mengunakan h2 untuk konten dan untuk judul sidebar maka keduanya akan terlihat sama. dengan mengunakan script css di bawah.

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .5em;
font:$headerfont;
line-height: .4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Nah jika kita ingin mengunakan pengaturan h2 antara konten dan judul sidebar berbeda, maka caranya membuat h2 untuk sidebar secara khusus dengan menambahkan selector ID dan property-value .

contohnya seperti ini.

#Sidebar-Wrapper h2 { property:value}

dengan begitu maka h2 untuk sidebar mempunyai aturan sendiri.

Sedangkan jika ingin membuat h2 mempunyai sifat yang lebih khusus lagi pada sebuah judul widget , maka yang perlu di ketahui dulu adalah nama widget dan Id nya.

contoh jika LinkList h2 untuk sidebar sama mengunakan font tebal dan berwarna hitam seperti ini.

  • LinkList1 h2.
    BlogKawan Satu
  • Lisklist2 h2.
    BlogKawan Dua
  • Linklist3 h2.
    BlogKawan Tiga.

ket : LinkList1,LinkList2,Linklist3 merupakan nama widget/gadget yang memiliki sebuah ID ( digunakan untuk tag secara individual dan spesifik, maka untuk penulisannya dalam Css di awali dengan tanda pagar [ # ] ) .

Dan jika saya ingin menampilkan BlogKawan Dua dengan hurup berwarna merah maka penambahkan pada halaman css-nya seperti ini.

#LinkList2 h2 { font-weight;Bold;color;red}

BlogKawan Dua

Otre selain dengan cara di atas, ada lagi cara untuk membuat heading/judul untuk sidebar berbeda satu sama lain, cara ini sering di sebut juga inline style sheet.

pertama centang/tandai di samping tulisan Expand Widget Templates.

kemudian cari tag html h2 yang ingin kita edit atau ingin di atur secara individual. .

dan tambahkan script seperti ini .

style=”background:…..; padding:…..; border:……”>

contohnya saya mengunakan inline style berupa border-top untuk h2 dengan warna yang berbeda-beda


Design by infinityskins.blogspot.com 2007-2008