Membuat Footer 2 kolom, 3 kolom, atau 4 Kolom

IDEINI| Membuat Footer 2 kolom, 3 kolom, atau 4 Kolom, Tutorial Blogging kali ini yaitu membuat kolom elemen bagian footer template, tutorial ini juga sudah saya gunakan karena sebelumya template yang saya gunakan ini tidak memiliki kolom footer, dan sekarang sudah saya tambah menjadi 3 Kolom Footer, disini saya memberikan beberapa kode untukMembuat footer 2 Kolom, 3 Kolom, dan 4 Kolom, tinggal pilih saja mau yang mana, nah sekarang Langsung  saja pada langkah-langkah Membuat Footer 2 kolom, 3 kolom, atau 4 Kolom :

1. Masuk ke Blog anda.
2. Pilih Layout/Tata Letak ► Edit HTML

3. Saya sarankan untuk membackup template anda agar dapat dikembalikan jika terjadi kesalahan, klik Download Template Lengkap 

4. Sekarang Cari kode ]]></b:skin>

5. jika sudah ketemu, silahkan letakan kode di bawah ini tepat diatas kode ]]></b:skin>

 

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

Kemudian cari kode di bawah ini.

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

6. Selanjutnya Cari Kode dibawah ini

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

7. Jika sudah ketemu silahkan tambah kode dibawah ini tepat di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

CATATAN : Jika pada template yang Anda gunakan tidak ada kode <b:section class='footer' id='footer'showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>

Jika Ingin membuat 2 Kolom Elemen Copy 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>

 

Jika Ingin Membuat 3 Kolom Elemen Copy Kode Dibawah 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>

 

Jika ingin Menjadikan 4 Kolom Elemen, silahkan copy 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>

Nah jika sudah semua, langkah terakhirnya yaitu klik  Save Template, dan lihat hasilnya :D
Semoga Tutorial Blogging Membuat Footer 2 kolom, 3 kolom, atau 4 Kolom ini dapat membantu teman teman semua :D