Tiga Kolum Di Ruangan Atas

Ada yang bertanya di Twitter penulis cara² untuk meletakkan tiga kolum di ruangan atas. Dahulu, penulis pernah berkongsi panduan untuk memasang tiga kolum di ruangan bawah. Jangan buang masa, mari kita mulakan.


Sila pastikan saiz resolusi blog anda ialah 900px dan lebih. Jika tidak, anda perlu menukar saiznya kepada 900px. Antara yang perlu diubah ialah #header-wrapper {, #outer-wrapper { dan #footer {.

Contoh resolusi blog penulis :-

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background: #FFFFFF;
margin-top: 7px;
}
1. Login ke Blogspot.

2. Layout - Edit HTML.

3. Download Full Template sebelum mengedit blog.

4. Cari ]]></b:skin> dan tampal kod ini di atasnya.

/* Upper-column
----------------------------------------------- */

#upper-column-container {
clear:both;
background: #FFFFFF;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px solid #FF73E3;
width: 890px;
margin-bottom: 10px;
}

#upper-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: verdana;
color: #FFFFFF;
background: #FF73e3;
padding: 5px;
margin-top: -1px;
}

.upper-column {
padding: 5px;
}

Nota : Anda boleh mengubah setiap kod yang berwarna merah mengikut kesesuaian blog anda.

5. Cari pula <div id='main-wrapper'> dan tampal kod ini di atasnya.

<div id="upper-column-container">

<div id="upper1" style="width: 30%; float: left; margin: 0pt; text-align: left;">
<b:section class="upper-column" id="col1" preferred="yes" style="float: left;">
</b:section>
</div>

<div id="upper2" style="width: 40%; float: left; margin: 0pt; text-align: left;">
<b:section class="upper-column" id="col2" preferred="yes" style="float: right;">
</b:section>
</div>

<div id="upper3" style="width: 30%; float: right; margin: 0pt; text-align: left;">
<b:section class="upper-column" id="col3" preferred="yes" style="float: right;">
</b:section>
</div>

<div style="clear: both;">
</div>
6. Save template.

Kini, anda sudah siap memasukkan tiga kolum di bawah header. Anda perlu memastikan ianya berfungsi dengan baik agar widget baru dapat dimasukkan.

7. Pergi ke Layout - Page Elements.

Di bahagian bawah header, anda akan melihat tiga kolum baru sudah tersedia. Tugas anda seterusnya hanyalah memasukkan widget² kegemaran anda. Pastikan anda membaca dengan teliti sebelum mencuba tutorial ini. Semoga sukses.

Via : Muncet