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



Share
Tweet
Pin
Share
Tags :

You May Also Like

17 comments

  1. myzziema3 May 2011 at 19:28

    wah nak try lah ;)

    ReplyDelete
  2. Surayalalala3 May 2011 at 20:11

    mceh wt tuto ney !

    ReplyDelete
  3. Surayalalala3 May 2011 at 20:13

    yeahhh ba0z ! x jadi

    ReplyDelete
  4. Shida Radzuan4 May 2011 at 04:40

    cuba sampai boleh yer..huhu^^

    ReplyDelete
  5. Diari Si Froggie4 May 2011 at 13:25

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

    ReplyDelete
  6. Shida Radzuan4 May 2011 at 18:45

    aida: camne jadi x? huhu^^

    ReplyDelete
  7. fatien !4 May 2011 at 21:36

    wah, blue blue. lawa sangat ;D

    ReplyDelete
  8. Shida Radzuan5 May 2011 at 01:53

    fatien!: tq^^

    ReplyDelete
  9. Epal merah24 May 2011 at 00:54

    nice tutor lang!

    ReplyDelete
  10. Liyana Landry7 June 2011 at 04:53

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

    ReplyDelete
  11. Liyana Landry7 June 2011 at 04:53

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

    ReplyDelete
  12. Shida Radzuan7 June 2011 at 13:56

    Blogger Chikova_Araishii: tq nyah dear^^

    ReplyDelete
  13. Shida Radzuan7 June 2011 at 13:57

    Blogger Yana Farhana: saya blh ajarkan ape yg pening?

    ReplyDelete
  14. Adam Sahaja14 July 2011 at 01:12

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

    ReplyDelete
  15. Unknown27 August 2011 at 02:18

    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
  16. SAIDATUL NAZIAH16 February 2013 at 00:02

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

    ReplyDelete
  17. adarain24 February 2013 at 19:20

    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.