Cara Membuat Footer 2, 3, 4 Kolom

Wah, akhirnya udah kelar juga nih kerjaan, mau buat postingan baru lagi, sebenarnya saya sudah ingin membuat postingan tentang Cara Membuat Footer 2, 3, 4 Kolom, tapi lupa, untung ada teman sesama blogger mengingat kan hal ini kepada saya. Saya mengucapkan terima kasih. Dalam hal ini Anda bisa mengatur kolom sesuai dengan keinginan Anda, dan cara ini saya lakukan sama dengan template pada blog ini.

Baiklah, jika Anda ingin menambahkan kolom bagian footer, bisa mengikuti langkah langkah nya di bawah ini :

• Login Blogger
• Pilih Rancangan-Edit HTML

Perhatian :
Agar tidak terjadi kesalahan, simpan atau salin template blog ke notepad komputer Anda, dalam keadaan centang Expand Template Widget.

• Selanjutnya hilangkan tanda centang Expand Template Widget agar mudah mengikuti langkah-langkah nya
• Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>

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

• Berikutnya, cari kode yang mirip seperti kode di bawah ini :

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Atau

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

Note :
Biasanya, setiap template memiliki kode yang berbeda-beda.

Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' /> , yang perlu Anda lakukan adalah menambahkan kode berikut di bawah kode <div id='footer'> atau <div id='footer-wrapper'>.

• Untuk membuat footer 2 kolom, letakkan kode berikut :

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

<div id='footer1' style='width: 50%; 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: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

• Untuk membuat footer 3 kolom, letakkan kode berikut :

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

<div id='footer1' style='width: 33%; 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: 33%; 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: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

• Untuk membuat footer 4 kolom , letakkan kode berikut :

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

<div style='clear:both;'/>
</div>

• Jika sudah di tambahkan, klik tombol Simpan Template, dan lihat hasilnya, nanti footer blog akan menjadi sebagai berikut :

Footer 2 kolom :

Footer 3 kolom :

Footer 4 kolom :

Selamat Mencoba dan Semoga Berhasil