√ Cara Menciptakan Footer 4 Kolom Pada Blog

Cara Membuat Footer 4 Kolom Pada Blog - Kolom footer berada paling bawah pada blog, kolom footer ini sering anda lihat di situs-situs berita. Jika anda tertarik untuk menciptakan footer menjadi 4 kolom, berikut langkah-langkah cara menciptakan footer 4 kolom pada blog. Mangga disimak dan di praktekan.

1. Setelah login ke blogger pilih Template » Edit HTML

2. Pasang instruksi dibawah ini sempurna diatas instruksi ]]></b:skin>

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

3. Kemudian anda cari instruksi menyerupai dibawah ini

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

4. Hapus instruksi <b:section class='footer' id='footer'/> lalu ganti dengan instruksi dibawah ini

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

<div id='footer1' style='width: 25%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'

preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 25%; float: left;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col2'

preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>

</div>

<div id='footer4' style='width: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col4'

preferred='yes' style='float:right;'/>

</div>

Baca juga :
» Cara Praktis Membuat Tombol Share Melayang Di Kiri Blog
» Cara Praktis Membuat Tombol Share Keren Dibawah Postingan
» Cara Paling Praktis Membuat Menu Navigasi Melayang Pada Blog

5. Simpan Template dan lihat hasilnya

Demikian cara menciptakan footer 4 kolom pada blog, selamat mencoba dan biar berhasil. Terima kasih atas kunjungannya and happy blogging.


Sumber http://ap-thea.blogspot.com