Membuat 3 layout

layout asal PYZAM

Pye menulis di shoutbox sue bertanya bolehkah template yang digunakan seperti diatas dari 2 coloumn diubah menjadi 3 coloumn??Sebenarnya memang boleh dan untuk tidak menghampakan permintaan Pye,sue akan mengajarnya cara bagaimana mengubah dari 2 coloumn ke 3 coloumn.

Seperti biasa,

1.Login ke blog
2.Klik Layout
3.Klik Edit HTML
4.Cari kod

/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #333333;
background-color:#000000;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
}

tukarkan width :660px ke 950px

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: normal normal 100% Georgia, Times, serif;
}

tukarkan width : 660px ke 950px

#main-wrapper {
width: 410px;
float: left;
padding: 5px;
border:1px solid #333333;
background-color:#000000;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}

tukarkan width : 410px ke 510px

#sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid #333333;
background-color:#000000;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}

tukarkan width : 220px ke 200px

5.Kemudian di bawah kod

#sidebar-wrapper {
width: 220px;
float: right;
padding: 5px;
border:1px solid #333333;
background-color:#000000;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
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 */
}

tambahkan kod berikut:-

#sidebarbaru-wrapper {
width: 200px;
float: right;
margin:0px 10px 0px 0px; word-wrap: break-word;
overflow: hidden;
}

6.Kemudian cari pula kod

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

tambahkan kod berikut dibawahnya

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'>
</b:section>
</div>

Kemudian Save hasil kerja korang.Hasilnya layout korang akan menjadi 3 coloumn dan akan kelihatan seperti ini

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...