Mutiara Kata



Menbuat 3 Column Template

Setelah menghabiskan masa selama hampir 1 hari untuk menjadikan tempalate blog saya ni dari 2 column menjadi 3 column, akhirnya berjaya juga siap malam tadi...
Fuh!... sampai sakit kepala nak buat 3 column ni semalam... Dah buat-buat, bila siap layout blog saya jadi berterabur pula... huhu...tension Cari pula tutorial yg lain, cuba buat lagi dan akhirnya menjadi juga...peace

Ok, tanpa membuang masa, macam ni cara nak buat dia...

1. Login Blogspot dan masuk bahagian Layout.

2. Klik Edit HTML.

3. Save/backup template yg sedia ada dengan Download Full Template.

4. Dalam kotak kod HTML, cari kod ini (nak senang cari, guna CTRL+F):

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Tukarkan,
width: 660px; menjadi width: 980px;
Cari pula,

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Tukarkan,
width: 660px; menjadi width: 980px;
Kemudian, 'copy' kod dibawah,


#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


'Paste'kan
ia pada bahagian Outer-Wrapper seperti dibawah.

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

#main-wrapper {
margin: 0 0 0 35px;
width: 460px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
#sidebar-wrapper2 {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}


'Copy'
kod yang ini pula.


<!-- our new column -->
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div> <!-- new column added -->


'Paste' kan ia diantara <div id='content-wrapper'> dan <div id='main-wrapper'>. Seperti contoh dibawah:

<div id='content-wrapper'>

<!-- our new column -->
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div> <!-- new column added -->

<div id='main-wrapper'>

Cari kod #main-wrapper {
Tukarkan 'margin' dan 'width' dia seperti dibawah.

margin: 0 0 0 35px;
width: 460px;

Akhir sekali, 'paste' kan kod dibawah, di bahagian Footer seperti contoh yang diberi..

Kod:
/* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

Contoh:

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

/* tweaks for wireframe */
body#layout *{margin:0;padding:0;}
body#layout,body#layout #outer-wrapper{width:750px;}
body#layout #main-wrapper{width:40%;}

]]></b:skin>
</head>



5. Dah siap semua, Save Template.

Siap dah...
penat
Selamat Mencuba yaa.... tanduk

Sumber: lawnydesignz
Blog Widget by LinkWithin

Untuk pengetahuan pengunjung, Blog ini tidak lagi aktif dan saya sudah pun berpindah ke Blog Wordpress.org. Terima Kasih diatas sokongan anda sebelum ini.
Sudi-sudilah mengujungi Blog Wordpress saya di sini...
ANOTHER STRANGE GIRL STORIES

7 Kata Pelawat:

мyΞ'™ said...

salam.
x berape nk catch up sgt instruction tu la.
serious.
hahaha.
buat kan leh?
:P

AKURO SAN said...

oh, ye ker? haha..
tak per la... akan diperbaiki lagi nanti...
buatkan? apa MY nak kasi kat akk?
hehe.. : p

~Pengembara Sepi~ said...

baru siap ke?

Along Arman said...

nice tutorial..
sebenarnya along pernah try untuk buat..
tapi pening kepala bila semua bende berterabur..
so langkah yang bijok ialah dengan cari template yang 3 column.. heheh...

Benrauf said...

pernah buat jap kat blog lama. tapi tak tau nak isi apa. so sekarang blog tu guna satu column je. :p

blog yg sekarang ni pakai dua column. tu pun x penuh widget dia. connection sy slow. so x mampu nak tanggung banyak2 widget. :p

AKURO SAN said...

pengembara sepi: siap pd 24 feb yg lalu...

along arman: tu la pasal... mmg jadi berterabur... mujurlah saya masih bersabar dan buat sampai jadi...: )

Benrauf: it's ok... letak yg penting2 jer, cukup la... widget yg lain2 tu cuma perhiasan jer..

Anonymous said...

to anyone:
sy bdk bru blaja wt blog nie, then sy trbca entry awk cra nk tkar template.....
sy wt mcm yg awk ajr tp asyik error je...
ape yg prlu sy consider utk plih satu2 tmplte nie??? ples help me....

Post a Comment

Terima Kasih, kerana sudi berbicara di sini...

Blog Widget by LinkWithin
 
Powered By Blogger | Design By iEn © 2008 | Edited By AkuroSan | Kontes Review Klinik Cinta | Contest SEO Eridy | Best View: Firefox | Top