Cara Menambah 4 Kolom Footer di Blog

Tips Blog,

• Login dengan akun blogger kamu terlebih dahulu
• Pilih Rancangan --> Edit HTML
• Jangan Lupa Beri centang pada Expand Template Widget 
• Cari kode  ]]></b:skin> dan letakkan kode dibawah ini tepat diatasnya




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

• Cari kode seperti seperti berikut :

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

• Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

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

Jika ingin footer 3 kolom. Gunakan kode ini :

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

Membuat footer menjadi 4 kolom. Gunakan kode 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>
<div style='clear:both;'/>
</div>

Simpan Lihat Blog.

Catatan :
Bila anda Pratinjau dan tidak kelihatan hasilnya memang seperti itu kelihatannya karena Gadgetnya masih kosong. Simpan/.Save dan lihat hasilnya di tata letak.
Semoga Bermanfaat.