Membuat Footer 3 Kolom

Cara Membuat Footer Menjadi 3 Kolom akan Fendy’c bahas pada posting kali ini. Jika kemarin Fendy’c sudah membahas cara membuat teks bejalan / marquee maka kali ini Fendy’c akan menggulas bagaimana Cara Membuat Footer Menjadi 3 Kolom.
Langsung saja akan Fendy’c 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, untuk mempermudah pecarian klik Ctrl + F kemudian ketikan kode yang akan kamu cari.

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

7. Hapus script yang Fendy’c beri warna merah 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 Fendy’c beri warna 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 dan eiit... !!

jangan lupa kasih komentar yach!

Comments

Popular Posts