Cara Membuat Footer 3 Kolom

Cara Membuat Footer 3 Kolom 
Sobat tau kan footer...?

Footer adalah istilah yang biasa dipergunakan dalam pemrosesan blog. Footer adalah bagian pada blog yang ditempatkan pada bagian bagian bawah blog, dan diisi dengan credits pembuat template blog tersebut.

Terus apa yg mau di lakukan dengan footer..?

Nah..disini kita akan sedikit memodifikasi bagian bawah blog tersebut agar lebih menarik. Disini kita akan membagi footer manjadi 3 bagian, yg masing-masing bagian bisa sobat isi dengan widget semau sobat. Jadi ini dia caranya...!!!

• Login Ke Blogger
• Pergi ke template >> Edit HTML >> Centang Expand Template Widget
• Cari kode ]]></b:skin> Bisa sobat gunkan F3 atau Ctrl+F untuk mencari kode tersebut dengan cepat.
• Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

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

• Selanjutnya cari kode <div id='footer'> Atau id='footer' 
• Copy dan pastekan kode di bawah ini tepat di bawah kode <div id='footer'> Atau id='footer' 

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

• Simpan dan lihat hasinya.

Artikel Terkait: