Cara Membuat Footer Multi Kolom di Blog ~ Campur Blog

Cara Membuat Footer Multi Kolom Blog - Multi kolom yang akan saya jelaskan disini maksudnya bisa di buat menjadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan dan keinginan sobat untuk membuatnya.

Bagi sobat yang ingin memperbanyak ruang kolom pada bagian footer template blog sobat. Langsung saja kita mulai langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> "Login/ Masuk" ke >> Blog sobat.

klik >> "Design Template" >>" Edit HTML".

2. "Back up" template sobat dengan klik pada "Download Full Template" agar sobat bisa mengembalikan template sobat ke kondisi semula jika terjadi kesalahan atau hasilnya tidak memuaskan seperti yang sobat inginkan.

3. Kalau sudah, jangan lupa Centang "Expand Template Widget" Kemudian sobat cari kode ]]></b:skin> , Gunakan CTRL+F untuk mempermudah pencarian.

4. Langkah selanjutnya silahkan sobat tambahkan atau taruh kode dibawah ini di atas atau sebelum kode ]]></b:skin>

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

5. Jika sudah, Sobat cari kode dibawah ini. Gunakan CTRL+F untuk mempermudah pencarian.

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

6. Silahkan sobat Tambahkan atau taruh kode berikut dibawah kode <b:section class='footer' id='footer'showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Keterangan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer'showaddelement='yes'/> maka Sobat tambahkan atau taruh saja kode berikut setelah atau dibawah kode <div id='footer'>

Jika sobat ingin membuat footer 2 kolom. silahkan sobat gunakan 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 sobat ingin membuat footer 3 kolom. silahkan sobat gunakan 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>

Jika sobat ingin membuat footer 4 kolom. silahkan sobat gunakan 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>

7. Kalau sudah, silahkan sobat klik "Pratinjau" atau "Preview", Untuk menghindari kesalahan saat Edit Template.

8. jika hasilnya sudah bagus seperti yang sobat inginkan dan Edit Template tidak eror, Silahkan sobat klik "Save Template" atau "Simpan Template", Lalu klik "Page Element" atau "Tata Letak" untuk melihat hasilnya.
Jika sobat berhasil, maka hasilnya akan menjadi seperti gambar di bawah ini.

Footer 2 kolom