Tiga Kolum Di Ruangan Bawah

Atas permintaan Along Arman, kali ini penulis akan memberikan tutorial berkenaan dengan menambah tiga kolum di bahagian footer. Penulis difahamkan dia telah mendapat kod untuk tiga kolum tersebut tetapi kod asas yang diberi tiada warna latarbelakang (background) dan garisan (border) untuk setiap tajuk. Ayuh, masuk kelas tutorial. Pastikan anda membaca berulangkali agar mudah difahami.


1. Pindahkan semua widget yang ada di bahagian footer.

2. Login ke Blogspot.

3. Layout - Edit HTML.

4. Download Full Template sebelum mengedit blog.

5. Cari kod di bawah.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
6. Tukarkan kod yang berwarna merah dengan kod di bawah.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>
Nota : <hr align='center' color='#5d5d54' width='90%'/> adalah satu garisan lurus yang bertujuan membahagikan ruangan footer dengan ruangan paling bawah. Anda boleh mengubah warnanya mengikut warna latarbelakang blog. Jika tidak mahu garisan itu, anda cuma perlu buang kodnya sahaja.

7. Seterusnya cari pula kod </b:skin>.

8. Tambah kod ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}
Nota : Kod footer-column-container { di atas ialah kod asas bagi tiga kolum di footer yang diajar oleh Amanda. Penulis telah melakukan pengubahsuaian dengan menambah #footer-column-container h2 { di antara #footer-column-container { dan .footer-column { berdasarkan tutorial empat kolum ruangan atas tulisan Ien.

Inilah kod yang penulis gunakan untuk bahagian footer-column-container { milik penulis. Ia dilengkapi dengan warna latarbelakang dan garisan pada setiap tajuk dan juga kotak utama kolum tersebut.

#footer-column-container {
clear:both;
background: #ffbbbb;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px solid #cc0000;
width: 900px;
margin-bottom: 10px;
}

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

.footer-column {
padding: 10px;
}
Nota: Anda boleh mengubah setiap kod yang penulis tebalkan mengikut kesesuaian blog anda.

9. Save template.

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

1. Layout - Page Elements.

Di bahagian bawahnya, 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 : Amanda
Via : Ien