BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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.

 

gam 1 gam 2

 

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

Page views this post: reader

29 komentar:

J O N K said...

owh gitu ya *ngangguk-ngangguk*

info yang bagus mas :)

Ega Zulfikar said...

oo. sip lah

Anonymous said...

Langsung dikerjakan bos! :)

Cebong Ipiet said...

heEh kang...buat yg mau banyak variasi cocok

Anonymous said...

cocok untuk blog portal...

Anonymous said...

ohh variasi baru yah...

Syamsul Alam said...

Cak, ini mah buanyak atuh manfaatnya. matur nuwun mas Jaloe.... moga makin rajin ngepost kek ginian. huheuheuheu......

Mardee W said...

siiph, tambah ilmu baru..
kapan2 dicoba..

idotkontji said...

Keren.. kudu dibaca berulang2.. meh ngarti.. thx nya kang...

yulia madjid said...

biar paham bener, emang perlu dibaca berulang-ulang
ma'lum bunda lelet mikirna..
sip kang Jaloee, makasih infona

Anonymous said...

Oke bro...ilmu baru lagi.

Anonymous said...

mangstap gan....di simpen...di simpen

Admin said...

Thanks
lain kali saya praktekin

by.cloworcs said...

makasih banget bos ini sangat brarti bgku

Anonymous said...

klo h2 jadi h1 gimana boss? :D

biar ke-SEO dikit klo di single post :D

TEAM 13 said...

Salam kenal dari kami NOLABEL Band,postingannya menarik, sekalian izin tukeran banner yah bro ... :)

Admin said...

haloooo bos

Admin said...

Saya suda menemukan cara menampilkan photo komentator, tapi pake mybloglog
lihat di
http://kurniasepta.blogspot.com/2009/02/menampilkan-judul-postingan-atau-entri.html

Anonymous said...

nice artikelnya bos
dicoba nih
byme

Jaloee said...

@ byme

yuu selamat mencoba mas

Anonymous said...

kang jaloee.. bunda mah ikut2an belajar meuni makin lieur geuning... hehehe
ngantosan dipangdamelkeun we ah ... sik asik asik .. (ngarep mode-on)

Jaloee said...

@ Bunda

siaplah bunda..sok hoyong model kumaha

bliyan_bayem said...

nah ini tipsnya. ijin nyoba mas.

Zippy said...

Akhirnya muncul lg ni kang stelah skian lama bertapa, wkwkwk...
Sip..sip..sip, ntar saya coba kang.
Tp kr2 pengaruh gak sm loading pagenya?

Jaloee said...

@ Zippy

mmmm.. bagusnya gunakan yang cara pertama.. jangan pake yg inline style sheet

kdrama said...

boleh dicoba neh tutorialnya.lgsg praktek.

blog info said...

nambah ilmu lagi neh ...

langsung di coba deh ..

terimakasih buanyak ....

info kesehatan said...

juragan templatenya bagus bgt, boleh minta gan?
kalau juragan berbaik hati aku tunggu templatenya y.

Sedot WC Jakarta said...

ternyata cukup mudha untuk mengedit h2

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial