Cara buat 2 sampai 4 Kolom di bawah postingan

Mau nambah kolom dibawah postingan? gampang dan tidak susah. 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 :