Tutorial pisahkan widget sidebar untuk simple template
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.
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!
i x wat perubahan hape lagi blog i. teringin nak wat layout n header sendiri tapi bila ntah kerajinan tu nak datang. adeh. ;p
ReplyDeleterajin fiza buat tuto..bagus2..=)
ReplyDeleterajinnya wat tuto..
ReplyDelete:)
sangat jelas fiza..thanks for the tuto..penah terpike nak buat macam ni..mungkin untuk template nnati pulak =)
ReplyDeletetq 4 the tutorial...
ReplyDeletenice tutor syg ^_^
ReplyDeleteblog gegerl cam fiza bulih la buat camtu kot.nampak comel je :)
ReplyDeleterajinnya wt tuto ni ^^
ReplyDeletethanksss fizah!! dah lama mncari cari tuto mcm ni.. sonok jumpa blogger yg tak kedekut ilmu ;)
ReplyDelete@Azhafizah[フィザ]
ReplyDeletekak fizah, bole x buad tuto blockquote..sy da cube byk sgt2 tuto ny dr blog org lain..tp x penah jadik..plizz?
tuto yg sgt berguna.. i loike...thanks tuan tanah...^^,
ReplyDeleteThank sgt2 . cantik , shuka lha..
ReplyDeletekak sy punya blog tader code /* Footer larhh. :(
ReplyDeleteI love it. Thanks!
ReplyDeleteBes! sy share ye :)
ReplyDelete