Monday, March 30, 2009

Tutorial 3 COLUMN

Bagaimana nak buat blog 3 column? (macam blog aku) ini stepnya, tapi sebelum nak start buat 3 column pastikan anda buat backup (Download full template) dulu sebelum memulakan penambahan ini kerana jika ada perkara yang tidak diingin berlaku anda masih boleh upload balek template lama. dan gunakan Ctrl + F untuk memudahkan mencarik code.

1. Login ko Blog ID atau Dashboard

2. Masuk pada "Layout" dan terus ke Edit HTML tak perlu tanda "Expand Widget Templates".

3. Sekarang carik code seperti dibawah ini :

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


4. kemudian copy dan paste kod tulisan merah dibawah ini pada sebelah bawah kod di atas :

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Copy dan paste code merah seperti gambar kat atas ni

5. kemudian carik code kat bawah ni :


6. bila dah jumpa code seperti diatas ambil code dibawah ni copy dan paste atas pada code tesebut :



Copy dan paste seperti gambar diatas.

7. bia dah selesai carik code ini dan tukarkan kepada tulisan merah :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px; <-- tukarkan kepada 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

8. Kemudian "Save Template" dan anda septutnya boleh melihat Sidebar disebelah kiri dan kanan seperti gambar dibawah ini :
Sidebar kiri dan kanan

9. Last sekali carik code bawah ni dan tukar sikit atau tambah seperti tulisan merah dan akhir sekali save.

#main-wrapper {
width: 410px;
margin-left: 10px; <-- tambahkan code
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

10. Settle!~!~!~

Tambahan
Jika inginkan kelebaran pada bahagian post entry anda boleh mengubah "width" #main-wrapper dan wajib dikuti dengan "width" pada #outer-wrapper (Kelebaran column).

#main-wrapper {
width: 410px; <-- tambah kelebaran post entry 440 (+30)
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

dan wajib menambah lebar pada #outer-wrapper

#outer-wrapper {
width: 880px; <-- +30 = width menjadi 920px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Nota : Tutorial ini adalah tutorial asas untuk default template minima, bagi template yang lain kemungkinan berlaku kelainan code dan anda perlu berhati² sebelum membuat pengubahan.

28 comments:

edan coba said...

Hai.. abg!! sy edan coba n telah mncuba cara yg abg berikan tp GAGAL!!

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:section" must be terminated by the matching end-tag "".

Hmmmm cm ner?
tp sy gna Template PYZAM

Ady Syam said...

kalau template download tu kena teliti sikit, rasanya boleh... cuba try lagik kalau tak dpt jugak saya cuba bantu nanti

leena said...

ellow!!
thanx tao...
da berjaye.. hehehe..
walaupun ade ubah2 code siket..
time kaseh!!

Anonymous said...

aku juga dah buat wlubgmnpn, aku juga GAGAL!

PS: pls take note bhwsanya aku dah try 6 kali.

nmpknye aku gagal memahami bahse seorg hackers. sila bantu.

10q

zai said...

Teringin gak nk cuba lagi,asyik gagal je,buat aku malas nak cuba lagi.tgk blog yg cantik2 buat aku bersemangat nk cuba lagi..bila?waaaa...

Panglima Perang Cyber said...

ada masa layari blog saya
http://penembak-tepat.blogspot.com/2009/04/edisi-petang-video-mufti-bidas-tindakan.html

ada masa kita YM. add email saya :


panglimaperangcyber@yahoo.com


tq.

Mizan Yusuf said...

thx alot

Cahaya Yang Riang Gembira said...

Heehee.. Time kaseh abg ady syam.. Edan soh blaja kat sini.. Tlah brjaya.. Thanx a lot.. =)

en.izz said...

ok bro tq,..

dpt gak aku bt,..

hehehe

MucHaCha said...

thx broo.. dh elok dh blog sy.. xder la semakk belah kanan jew
thx sgt!!..

hana_tomei said...

salam..abg ady, hana buat x jd la..sume kuar belah kanan je.nape ae???tp sume code die same je...abg leh tlg x???

Ady Syam said...

salam hana... kepada kawan² yg tak berjaya tu jgn bersedih... aku akan try tolong sedaya yang mampu... sila add YM aku ek :)

~boy_Mr.K~ said...
This comment has been removed by the author.
~boy_Mr.K~ said...

saya buat pon tak jadi
asyik kuar
(Invalid variable declaration in page skin: Variable is used but not defined. Input: startSide)...

naper erk???

ym sy..
khem_own@yahoo.com

scr0ll0ck said...

share link free template 3 kolum kat sini ..http://www.eblogtemplates.com/templates/blogger-templates/...http://bloggertricks.com/2009/03/one-more-magazine-style-blogger.html..


frm : www.print-ur-life.blogspot.com

MrS. Z said...

yess.... jadik!! tengkiu...

fizyanz said...

salam... leh x i nk mtk u tlg i wat tempalte 3 column.but i nk tema uatama is purple..plz...plz...plz...

Anonymous said...

salam bro..
saya nak wat 3 colum gak..tapi tak jadi..huhuhu help me pliz....

hana_tomei said...

salam bro..hana nk tanye camne nk wat 3 column yg bhgian page bwh
footer-wrapper tue?????

ki said...

terima kasihlah

Unknown said...

syukran jaziilan .. berjaya wat 3 column kat blog akak .. jazakallahu khoiran kathiro

Robiatul Adaweyah Saad said...

alhamdulillah...
tq so much..
bjaya gak buat...
takot x jd je td...

Unknown said...

nak tanya... kalo saya guna pyzam punye layout pastu nak buat 3 column ni boleh ker... kalo tak leh apa yang perlu saya buat untuk dapatkan gak 3 colunm nih... tolong...........

nazri said...

Thanks...bro..aku dh brjaya ubah tmplate aku jd 3 column..

keyboardcabuk said...

bro..memang bagus r info dalm ni,sebb info dalam blog ni la aku berjaya wat blog..tq bro..semoga Allah merahmati bro n family

Belalang hijau Perisik said...

terima kasih bebanyak...
membantu betul ape yg saudara bagi
saye dah cuba dan ianya berjaya...
teruskan membantu blogger2 yang baru

www.suarabawahtanah.blogspot.com

Unknown said...

maceh maceh !
wani berjaye buat !!

Anonymous said...

abg..sy dah bt...n dah berjaya pon..tp cmner nak tukar colour background sidebar baru 2 biar sama ngn sidebar yg sebelah kanan 2..jdik transparent plak sidebar baru 2..tlg sya..huhu...