Tutorial pisahkan widget sidebar untuk simple template

Monday, November 21, 2011

Tutorial pisahkan widget sidebar untuk simple template mudah je sebenarya kalau betul-betul ikut step tutorial di bawah. Ramai yang bertanya, jadi rasa lebih baik kongsikan di sini dan boleh jadi rujukan tutorial cantikkan blog.

Ape yang dimaksudkan pisahkan widget sidebar ni, kita pisahkan widget sidebar satu persatu macam dalam gambar dibawah. Satu-satu kotak dan boleh customize warna, corak dan sebagainya. Nampak lebih cantik lah kiranya kotak sidebar tu.

Tutorial pisahkan widget sidebar untuk simple template
Sebelum mulakan buat tutorial sile save dulu template blog masing-masing ye. Tak save, salah buat saya tak tanggung ye. Bagitahu siap-siap. Jangan kata saya tak ingatkan.

Dashboard>>Design>>Edit HTML>>Download Full Template.
Dah siap download[save], boleh mulakan 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, sebelum code /* Footer
4. Customize code mengikut pilihan tema blog masing-masing.

ffffff-code warna background*code warne boleh >> http://userabbe.xtgem.com/code_warna
 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. Bila dah berpuas hati bolehlah SAVE.

Siap!

Mudah je kan? Selamat mencuba!

15 comments

  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. sangat jelas fiza..thanks for the tuto..penah terpike nak buat macam ni..mungkin untuk template nnati pulak =)

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

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

    ReplyDelete
  5. @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
  6. tuto yg sgt berguna.. i loike...thanks tuan tanah...^^,

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

    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, mengandungi kata-kata maki hamun, soalan yang jawapannya terang lagi bersuluh ada dalam entri, atau tidak menyenangkan tidak akan disiarkan. Begitu juga dengan unknown profile. Harap Maklum.

Sekian Terima kasih.