Tutorial pisahkan widget sidebar untuk simple template

Monday, November 21, 2011
Agak terajin pulak nak buat tuto setelah sekian lame  menyepi.Ini disebabkan ramai yang bertanya..so,agak malas nak ulang banyak kali..senang kite share je kan..biar semua orang tahu..yang dah diberitahu,dok diam diam je ye..

Ape yang dimaksudkan pisahkan widget sidebar ni,kita pisahkan satu persatu macam dalam gambar ni.amek contoh belog Fiza ni ha..kan satu kotak satu kotak..Pastu boleh customize kotak ni.
Cara mudah 1 ,2,3 sampai 6 je.Sebelum buat tutorial sile save dulu template blog korang,kalau tak jadi nanti korang nangis pulak.

Dashboard>>Design>>Edit HTML>>Download Full Template.
Dah siap download[save],boleh mulekan tutorial.

1.Cari code 

/* Widgets
----------------------------------------------- */

*tekan ctrl+F untuk memudahkan pencarian.bile dah tekan akan keluar satu box..masukkan code yang  nak di cari tu.

2.pastu copy code bawah ni

.sidebar .widget, .sidebar2 .widget {
background: #ffffff url(LINK GAMBAR BACKGROUND);
-moz-border-radius: 0em 0em 0em 0em;
border-radius: 0em 0em 0em 0em;

margin: .5em 0;
padding:0 0 1.5em;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;

text-align: justify;
border: 2px solid #000000;
text-transform:none;
}

3.Kemudian paste kat bawah sekali dalam bahagian widget..maksudnyer sebelum code /* Footer

4.Customize code mengikut citarasa korang

ffffff-code warna background*code warne boleh check sini
 LINK GAMBAR BACKGROUND-kalau nak letak backround
-moz-border-radius: 0em 0em 0em 0em;border-radius: 0em 0em 0em 0em;-bentuk widget,boleh tukar nilai 0 tu kepada 1 akan terbentuk corner.
margin: .5em 0;
padding:0 0 1.5em;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;-coding ni tak tukar pun takpe.kalau paham coding,bolehlah nak tukar.

text-align: justify;-boleh tukar align tajuk tu,kiri dan kanan..just type left or right.
border: 2px-ketebalan border widget sidebar
 solid-boleh jugak buat dashed[garisan putus-putus]..tukar solid kepada dashed
 000000-code warne border widget sidebar


5.dah siap customize,tekan preview dulu.

6.Agak agak dah berpuas hati bolehlah SAVE.Siap!

Mudah je kan?agak-agak kurang jelas penyampaian tuto Fiza ni,bagitau ye..Fiza sedia membantu..tapi setakat yang Fiza bagitau blogger lain,semua dapat buat dengan jaya nye..So,kalau tak jadi sekali..cube sekali lagi sampai jadi..kalau dah cube tak jadi,then baru tanye..okay?

"Selamat mencuba!"
36 comments on "Tutorial pisahkan widget sidebar untuk simple template"
  1. i x wat perubahan hape lagi blog i. teringin nak wat layout n header sendiri tapi bila ntah kerajinan tu nak datang. adeh. ;p

    ReplyDelete
  2. teringin jugak nak cuba..hehe..

    *singgah kejap sementara tggu Malaysia vs Indonesia

    ReplyDelete
  3. kak bui dh buat..
    yess jadi..

    mekasih fiza..tuto fiza mmg terbaik

    ReplyDelete
  4. sangat jelas fiza..thanks for the tuto..penah terpike nak buat macam ni..mungkin untuk template nnati pulak =)

    ReplyDelete
  5. blog gegerl cam fiza bulih la buat camtu kot.nampak comel je :)

    ReplyDelete
  6. @Aida Azryn
    jangan malas-malas..buat exerccise tangan tu..tuto pun dah banyak..heee

    ReplyDelete
  7. @Bui Junaidi
    terus buat ke kak bui?..heee..baguslah menjadi..^__^

    ReplyDelete
  8. @afzalsukasuki
    lol..belog boboboboboi puun bulih la..jangan lak buat warne pink..haha

    ReplyDelete
  9. terbaik la tutor ni..dulu mencari gak..sekarang semuanya dah siap..hehe thanks fiza!

    ReplyDelete
  10. Kak Fiza knpa asal saja saya masukan code di Edit HTML, bila nak preview tu dia kuar (More than one widget was found with id: HTML9. Widget IDs should be unique.) ??
    reply kat shout mix sy . tq

    ReplyDelete
  11. thanksss fizah!! dah lama mncari cari tuto mcm ni.. sonok jumpa blogger yg tak kedekut ilmu ;)

    ReplyDelete
  12. @Cik Azizah
    takpe jijah..fiza bg free consultants since fiza buat template jijah tu..hehehe..cakap je nak buat cemane pun.>.<

    ReplyDelete
  13. @Sandra
    maaf tak dapat nak jejak balas sandra..die kate blogger profile not found..nway maksud tu die ade 2 widget name same..HTML9 ade 2 widget.so kene buang salah satu widget tu..ok?

    ReplyDelete
  14. @Azhafizah[フィザ]
    kak fizah, bole x buad tuto blockquote..sy da cube byk sgt2 tuto ny dr blog org lain..tp x penah jadik..plizz?

    ReplyDelete
  15. kak, nape xjumpa code tuh? sy guna template lain kot. cuba akak bg code untuk template lain, tq :)

    ReplyDelete
  16. fiza.cam mana pula kalau kita nak asingkan tajuk sidebr tu..cam fiza buat..kurang jelas la

    ReplyDelete
  17. tuto yg sgt berguna.. i loike...thanks tuan tanah...^^,

    ReplyDelete
  18. kak sy punya blog tader code /* Footer larhh. :(

    ReplyDelete
  19. Semuanya comel-comel.saya amink satu tau!^_^

    ReplyDelete

Terima kasih atas komen yang diberikan.

Auto Post Signature

Auto Post  Signature