tutorial: nak buat boder pada title sidebar atau letak picture

by - 16:33:00

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 :)



You May Also Like

17 comments

  1. cuba sampai boleh yer..huhu^^

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

    ReplyDelete
  3. wah, blue blue. lawa sangat ;D

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

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

    ReplyDelete
  6. Blogger Chikova_Araishii: tq nyah dear^^

    ReplyDelete
  7. Blogger Yana Farhana: saya blh ajarkan ape yg pening?

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

    ReplyDelete
  9. 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!

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

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

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url yang mencurigakan, mengandungi kata-kata maki hamun yang tidak menyenangkan tidak akan disiarkan. Harap Maklum dan Terima Kasih.