May 20, 2011

Tutorial Blog | Cara nak buat border untuk sidebar

Salam to all readers..

Dil dapat request dari kawan dil..
dia suruh dil ajar cara nak buat border untuk sidebar..
Macam nii..
*
*
Macam kat blog dil ni,
ni pakai border jenis square dan solid

So untuk entry kali ini 
dil akan ajarkan cara buat border square..
Simple jer..

Jum ushar tutorial yang dil buat untuk korang..
Kalau tak dapat nak follow, 
jangan malu, jangan segan..
Tanya jer ok..^^



Step 1

DASHBOARD > DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES

Step 2

Cari code ini ( ctrl+F)
.sidebar .widget{

Step 3

Copy code dibawah ini dan letak selepas .sidebar .widget{ 
text-align: center;
background:#fff;
border:4px solid #FCDFFF;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px
}

Kalau korang tak jumpa code .sidebar .widget{
korang copy code yang kat bawah ni 
dan letak kan di 
DASHBOARD > DESIGN>TEMPLATE DESIGNER >ADVANCED> ADD CSS 
.sidebar .widget{
text-align: center;
background:#fff;
border:4px solid #FCDFFF;
margin:0 -5px 1.5em -5px;
padding:0px 7px 10px 7px
}

Step 4

Untuk ubah jenis border dekat sini
border:4px solid #FCDFFF;
dil dah senaraikan 9 jenis border yang korang boleh guna..
Korang try and error je laa ok..


solid
double
groove
dotted
dashed
inset
outset
ridge
hidden


untuk tukar warna korang boleh refer kat sini..


nota kaki:
untuk entry akan datang , 
dil akan ajar cara buat border sidebar jenis melengkung pula..

34 comments:

  1. mcm tak sudah jer tuto nie ... sampai step 2 je kew??

    ReplyDelete
  2. tadi mase tengah taep entry, tertekan button publish..hehehhe..

    ReplyDelete
  3. salam...
    tw x cane nk wt banner utk giveaway???
    tq

    ReplyDelete
  4. heheheh,.lucu lak bce komen 1st n 2nd tuh,.ekkekek,.trtekan ek miss dill,.aduhaii,eksaited tu nk tuto kt kwn2,.thank ek,.nnti nk try,.

    ReplyDelete
  5. Berkali-kali wat tapi tk jadi....dah ada toturial pun masih x reti jugak..

    ReplyDelete
  6. tq..entry yg bguna wat sy yg bru bljar wat blog..

    ReplyDelete
  7. dah jadi....tq dil..dah cantik blog...header je x reti lg nk buat,..

    ReplyDelete
  8. Assalamualaikum. Terima kasih, comel comel ^^

    ReplyDelete
  9. maaf dil . i da try buad . tapi ta jadi punn . please help me :)

    ReplyDelete
  10. A'ah..saye try buat pun xjd...

    ReplyDelete
  11. ni untuk template kn ? untuk layout punya tak ada ke ? :)

    ReplyDelete
  12. thanks..dah lama carik mende ni

    ReplyDelete
  13. cik dil.. nak tny.... mcne nak bg background dye transparent.. ape code ekk ? lg 1, cmne nak buang sidebar untuk code2 html. da try buat yg ini.. jd2, tp sidebar untuk code2 html pun termasuk... ( agak2 faham ke ayu type ne ? hehe )

    hope sudi membantu... :)

    ReplyDelete
  14. dha copy nhe kat 'add css' .sidebar .widget{
    text-align: center;
    background:#fff;
    border:4px solid #FCDFFF;
    margin:0 -5px 1.5em -5px;
    padding:0px 7px 10px 7px
    }
    lpas tu wat pa?

    ReplyDelete
  15. kak dila....tlg ....sy buat x jadi la... :'(

    ReplyDelete
  16. Thanks kak dila, saya buat menjadi :)

    ReplyDelete
  17. kenapa sya punya x ade sidebar .widget{...naek pening sye cri...

    ReplyDelete
  18. thanks dear...jadi dh kat blog saya :)

    ReplyDelete
  19. Salam cik dil..nape say CRT-F..xda sidebar tu ekk?

    ReplyDelete
  20. cik dil..nape say xjumpe nak wat sidebar tu? helppp meeee

    ReplyDelete
  21. Assalamualaikum Akak..tak jdilah sya buat knpa yer??

    ReplyDelete
  22. Thanks, sy pun baru belajar nak buat blog ni. Terima kasih bebanyak, dah dapat buat border utk sidebar.
    Your moment of a lifetime, we make it priceless.

    ReplyDelete
  23. nape ku punya widget yang kosong pun die kuar border gak

    ReplyDelete
  24. Salam, saya dah click di edit HTML ...tapi tak jumpa plak expand widget template

    ReplyDelete
  25. adush kak. acaner nak copy code?
    takleh right click pon.

    ReplyDelete
  26. TQSM... dalam byk2 tutorial yg ni menjadi... mmg tgh cr sgt tutorial nie.. nice2 and thank you....

    ReplyDelete