Membuat Footer 3 Kolom Di Blog

Cara Membuat Footer Menjadi 3 Kolom akan Saya bahas pada posting kali ini. Jika kemarin Saya sudah membahas cara Menghapus Navdar maka kali ini Saya akan menggulas bagaimana Cara Membuat Footer Menjadi 3 Kolom.

Langsung saja akan Saya jelaskan cara-caranya sebagai berikut:

1. Akses Blogspot anda

2. Klik Layout

3. Klik Edit HTML

4. Backup terlebih dahulu template anda dengan mengklik Download Template Lengkap dan simpan ditempat yang anda inginkan.

5. Copy script CSS dibawah ini diatas kode </b:skin>

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

6. Cari script seperti di bawah ini

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

7. Hapus script yang Saya beri warna Biru dan ganti dengan script dibawah ini

<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='#ffae00' 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>

Script yang Saya beri ungu diatas bisa anda ganti dengan code warna lain.

8. Save Template anda

9. Klik Tata Letak dan lihat hasilnya pada gadget Footer anda


Selamat mencoba....semoga berhasil