Trik Menambah Tiga Kolom di Bagian Footer Blog

Buat kalian yang inggin membuat kolom footer menjadi tiga seperti contoh gambar di bawah ini.





Caranya cukup mudah kok dan simpel lagi , begini caranya:

1. Login ke Blogger.

2. Tata Letak >> Edit HTML

3. Centang atau contreng Kotak Expand Widget Template.

4. Kemudian cari kode ]]></b:skin>, dan letakkan kode berikut ini di atas kode ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

5. Selanjutnya carilah kode berikut ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

6. Lalu letakkan kode berikut ini di bawah kode no.5

<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>

7. Setelah semuanya selesai sekarang kita tinggan Save Template nya.





Sekarang tinggal kita lihat hasilnya dengan klik menu Tata Letak,bagus bukan hasilnya?

Sekian tips dari saya ,bila ada masalah tinggal comment aja di blog saya.