Friday 17 February 2012

TUTORIAL: Pisahkan Widget sidebar (Simple Template)


Hi There ^ ^
Selamat petang warga blogger sekalian :)

Setelah sekian lama saya tidak buad tutorial, hari ne mau buad tutorial lah pulak. Hehe. Sebenarnya saya tiada masa mau buad tutorial selama ne sejak mula sekolah (wuu, skema nya ayat ! haha) Oke la mari start buad tutorial ne :)

Tutorial kali ne macam mana mau pisahkan widget Sidebar untuk pengguna Simple Template. Sekurang-kurang nya kemas sikit la blog kamu kalau buad tuor ne.. 

Contoh nya macam ne :
Klik untuk lebih jelas ^ ^

Sebelum buad apa-apa, save dulu template kamu. Mana tau lah nanti ada error kan.. :)

Design > Edit HTML > Download full Template.

Step 1 :
Tekan F3 atau ctrl+F  dan cari code 
/* Widgets
----------------------------------------------- */


Step 2:
Copy code di bawah ne yea.
.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;
}
Step 3:
Paste code di BAWAH bahagian /* Widgets.

Step 4 :
Suda paste? sekarang ubah code di atas tu mengikut citarasa kamu sendiri :)

ffffff  =Code untuk warna background / boleh check SINI 
LINK GAMBAR BACKGROUND =Letak link background (kalau mau letak background)

-moz-border-radius: 0em 0em 0em 0em; border-radius: 0em 0em 0em 0em; =bentuk border. O bole tukar kepada 1
margin: .5em 0;
padding:0 0 1.5em;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px; = Code Boleh tukar & kalau tida mau tukar pun tida apa 
text-align: justify; =boleh tukar tajuk align tu samada LEFT atau Right
border: 2px = ubah ketebalan border 
solid = boleh tukar samada SOLID atau  DASHED(garisan putus-putus)
000000 = Warna border. Boleh check SINI

Step 5:
Suda siap ubah coding? Tekan PREVIEW dulu. Kalau tiada error boleh SAVE :)

Senang saja kan? hehe 
Selamat Mencuba :)
Code kredit to : azhafizah

7 comments:

Arra Ahmad said...

rajin dia buat tuto..kiter dah malas.jom edit blog akak la..haha

a said...

hehe.. manada rajin.. lama da tida buad tuto baru..
hihi.. Edit tu oke saja, tapi kalau akak tdk suka nnti.. heheee :)

Arra Ahmad said...

just nak tukar width..kasi gemuk sikit..hehe..ramai komplen..haha

a said...

sy Try laa.. hehe

Unknown said...

slm. tumpang tanye yer, nape yg x sepatutnye pun kuar border widgetnya. contoh yg mana2 kita letak tutorial kat add a widget tu kan...ade kuar border...sepatutnye benda tu tersorok.

a said...

@deqla
Hi kak.. humm sblm tu tutor ni menjadi tak yang akak buat?

Unknown said...

Connection: close
Date: Thu, 05 Apr 2012 17:27:14 GMT

knp taa jady , dea klua mcm nih ha ?