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. .

<h2><data:title/></h2>

dan tambahkan script seperti ini .

<h2 style=”background:…..; padding:…..; border:……”><data:title/></h2>

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

 

 

yup mudah-mudahan pengalaman saya yang sangat sederhana ada mangfaatnya.

Page views this post: reader