Jun 2, 2011

Tutorial Blog | Jenis-jenis border untuk sidebar, post dan blockquote

Salam to all readers

Untuk entry kali ni, dil nak share pasal border yang korang boleh gunakan
untuk mencantikkan blog korang..
Border ni korang boleh guna untuk sidebar, post ataupun blockquote..
Contohnya korang boleh tengok border yang dil guna untuk tajuk sidebar dil..
*
*

Kat bawah ni adalah diantara jenis-jenis border yang korang boleh pilih..

Pilih border yang korang suka




Step 1 :

Dashboard > design > edit html > tick expand widget template
Tekan Ctrl + F

Untuk kotak sidebar/ tajuk sidebar
*setiap template adalah berbeza
cari : h2 { 
ataupun .sidebar .widget{
ataupun .sidebar h2 {

Untuk tajuk post
h3.post-title {

Untuk blockquote
.post blockquote {

Step 2 :

Copy dan paste kan coding kat bawah ni, letak selepas coding yang korang search tadi

(A)
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px; 

(B)
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;

(C)
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;

(D)
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;

(E)
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;

(F)
-moz-border-radius: 35px;
border-radius: 35px;

Selepas tu, tekan preview..
Kalau ok tekan SAVE

Ini adalah contoh border yg dil gunakan untuk tajuk sidebar dil..

.sidebar h2 {
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
text-align: center;
background:#FAAFBE;
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
Untuk rujukan..


Cara nak buat border melengkung untuk sidebar
Background untuk Sidebar Title


nota kaki:

credit to Yqnq ellyana
for the border..^^

42 comments:

  1. rajin nye dia wat tutorial ni...akk will try next time bile ati tergerak nak tukar kuikuikui...syabas dik (^_^)

    ReplyDelete
  2. @Aerol Hafiezi: heheh..tq..^^

    ReplyDelete
  3. @ ...sWeeT uMi... : ngah cuti kak..3 bulan..xde keje..hehe..cuba tauu..

    ReplyDelete
  4. salam, saya rase posts title tu better letak h1 baik tok seo..:)

    ReplyDelete
  5. @Qairy: h1 tu, apa functionnya?

    ReplyDelete
  6. Cik Dil,.tlong aini punya xmenjadi la,.=((

    ReplyDelete
  7. @ NURUL AINI NORAZMAN: part mane yg x jd??meh dil tolong

    ReplyDelete
  8. salam kaka,,zea da cuba byk kli ttp xdpt npa ya??

    zea letak mcm nie,btl x or slh:
    h3.post-title
    -moz-border-radius-bottomright: 50px;
    border-bottom-right-radius: 50px;

    ReplyDelete
  9. @cik ain: nak dil buatkan??boleh jer..

    ReplyDelete
  10. @fawzeah zea: coding awak tu salah..cuba tgk yg dil punya tuuu..

    ReplyDelete
  11. dill..watkan..ain nk wt kn sidebarrr ~~...yggg Bordderrr HURUF D..:)...

    ReplyDelete
  12. dil,,xdpt bt lar..mukin xsesuai untk h2{..apa2 thanks :D

    ReplyDelete
  13. : Cik dill.. tutorial jenis2 border memang TERBAIKK..suker gilerr.. :)) thanks yaa.. tp mysara buat lebih kurang tersama dgn cik dill.. sbb refer yg bentuk E tue.. x pe kn sama dgn cik dill. hihi :) if cik dill x suke, gtau k.. anyways, thanks again.

    ReplyDelete
  14. awak2..syufa tgk tutorial ni..tenkiuu yee! :)

    ReplyDelete
  15. ta dpt cari p0wn k0d nt0k taj0k p0st n bl0ckqu0te .

    ReplyDelete
  16. thanks sudi kongsi..btw, salam perkenalan...

    ReplyDelete
  17. thanks kak ! daa jadik ! sayang akak ! ^^

    ReplyDelete
  18. salam kaq dil...bole x tlong ajarkan cara nk ltk gmbr background kt post title..

    ReplyDelete
  19. hi dear, thank you for your tutorial
    sy dah cuba..mmg jadi =)
    a bunch of thx lg skali

    ReplyDelete
  20. sorry sangat2 cik dil..asyik terpanggil cik mel je..sebab tadi ada try tuto yg cik mel bg..sebenarnya nak wish tengs juta2 kat cik dil..=(

    ReplyDelete
  21. kalau nak tebalkan & tinggikan border tu camane???

    ReplyDelete
  22. adk amek keyh border nie :)

    ReplyDelete
  23. tolong saya...
    blog sy tak bley bkak after edit html

    ReplyDelete
  24. TQ AWAK.. TUTRIAL YG BERGUNA.. SY DA BERJAYA BUAT.. TQ

    ReplyDelete
  25. Cik dil, macam mana nak buat yang tuan tanah tu?

    ReplyDelete
  26. akak mcm mna nk tekan kt mna nk bt bolder tu sya cri x de pun??

    ReplyDelete
  27. akak mcm mna nk mla?? sya pening nie tak tahu nak tekan dekat mana dulu and tak tahu nk mula dari mana??

    ReplyDelete
  28. kakak, knp bila sya cba, sometime dye ada sometime x de?

    ReplyDelete
  29. nak buat toturial tp disable rightclick mcna

    ReplyDelete
  30. Trmksh... Follow Back Ciek..

    www.makho-manda.blogspot.com

    ReplyDelete
  31. i think kalau utk step, better letak pic supaya mudah faham

    ReplyDelete