tutorial: nak buat boder pada title sidebar atau letak picture | Dunia sebenar Shida tutorial: nak buat boder pada title sidebar atau letak picture

Klik Banner untuk lebih lanjut (iklan berbayar) nak tempah? (klik sini)


Tuesday, 3 May 2011

tutorial: nak buat boder pada title sidebar atau letak picture

Assalammualaikum, peace upon you.
tutorial kali ini diminta oleh 3 blogger sekaligus haha^^ dorang tanya shida macam mana shida buat title sidebar macam shida ni. ok so shida akan tunjuk kat korang sebenarnya ada tiga cara berlainan nak pasang title sidebar ni. so jom tengok macam mana. apa-apa pun korang cari dulu kod ini. ikut lah step shida.
1. dashboard >> design >> edit html >> klik expand widget
2. cari kod ini > sidebar h2 (lagi senang kalau pakai ctrl+F)
3. ok kalau dah jumpa korang boleh pilih ada 3 jenis yang korang nak pakai . kalau nak pakai yang simple macam gambar bawah ni korang copy kod bawah ni dibawah kod yang korang cari tadi. sidebar h2
 ini contoh saja ok yang penting boder kat situ kan!
.sidebar .widget h2 {
background :#000000;
border: 3px solid #ffffff;
text-align : center ;


korang copy kod ini dibawah sidebar h2 . selepas itu boleh preview sama ada jadi atau tidak ok. untuk background: #000000 (ini kod colour boleh tukar-tukar) border: 3px solid #ffffff (kod ini juga boleh ditukar colour dan ketebalan boder)

untuk pakai boder macam ini pula boleh tambah seperti kod dibawah ok. paste selepas kod ini >> sidebar h2
sidebar h2 {
padding-top:5px;
padding-left:5px;
padding-right:15px;
padding-bottom:15px;
line-height: 1.5em;
text-align: center;
background: url(url pic background) repeat; color: #ffffff; padding: 5px; text-align: center; -moz-border-radius: 10px 10px 10px 10px; border: 2px solid #000000;  repeat-x bottom left;
}
ok ok panjang betul ya stepnya huhu maaf lah okay! so ini yang terakhir kalau nak pakai yang macam ini pula  korang kena ready dulu pic yang korang nak pakai, macam shida memang dah create dulu pic tu then shida paste macam dalam kod dibawah tapi masih selepas kod ini >> sidebar h2
sidebar h2 {
background:  url(url pic yang korang create tu) repeat-x bottom left;
text-align: center;
font: 16px Arial;
margin: 0.5em 0 .5em;
  line-height: 5.0em;
  letter-spacing:.01em;
  text-align:center;
height:80px;
width: 300px;
}
ok bagi kod ini korang kena letak width dan height pic yang korang create tu nanti baru ok. yang dalam tu cuma contoh saja ok. boleh juga tukar font dan size juga. ok itu saja selamat mencuba. shida harap korang boleh buat menggunakan kod yang shida bagi ini. harap ia sempurna. selamat mencuba :)



17 Jari Ohsem:

.m y z. said...

wah nak try lah ;)

yaya dluver said...

mceh wt tuto ney !

yaya dluver said...

yeahhh ba0z ! x jadi

Shida Radzuan said...

cuba sampai boleh yer..huhu^^

Aida Omar said...

eh sini upenye tuto die..hik3
nak try skrg jugak.. :P

Shida Radzuan said...

aida: camne jadi x? huhu^^

fatien ! said...

wah, blue blue. lawa sangat ;D

Shida Radzuan said...

fatien!: tq^^

Chikova_Araishii said...

nice tutor lang!

Yana Farhana said...

adoii pening kepale . macam mane nie tak pham lah sis . :(

Yana Farhana said...

adoii pening kepale . macam mane nie tak pham lah sis . :(

shida'R said...

Blogger Chikova_Araishii: tq nyah dear^^

shida'R said...

Blogger Yana Farhana: saya blh ajarkan ape yg pening?

ADAM said...

kak..x jumpa pon yang sidebar h2 . da klik wxpand widget da pon

Cik Azizah said...

pening jugak eh main koding ni. hehe

peh akhirnya....atas tunjuk ajar cikgu shida..menjadi jugak post title n border jijah!


terima kasih shida..sabar layan karenah jijah ni ha..syg shida!! memang menjadi!

Miss Jie said...

kak shieda, thank untuk tuto ni.. sy ambik yer..

Bahrain Ramlan said...

saya cam takde je sidebar h2...mcm mana tu?