Cara Membuat Footer Multi Kolom di Blog

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

Fungsi dari menambah atau membuat footer multi kolom ini adalah untuk sobat yang ingin memperbanyak ruang kolom atau tambah gadget pada bagian footer template blog sobat. Karena mungkin sobat memerlukan bayak ruang widget untuk blog sobat. Biasanya di gunakan untuk blog magazine atau yang lainya.

Untuk cara membuat dan memasang footer multi kolom di blog ini caranya terbilang sangat mudah, Apalagi bagi sobat yang sudah mahir untuk edit html dalam template blog. Namun bagi sobat yang masih newbie kayak saya ini, Jangan berkecil hati. Karena saya akan memandu sobat sampai berhasil menerapkan footer multi kolom ini di blog sobat kucopas semua.

Langsung saja kita mulai ya sobat, Ikuti saja langkah-langkahnya dengan teliti dan jangan sampai ada yang terlewatkan. Cara membuat footer multi kolom di blog, Caranya sebagai berikut:

1. Silahkan sobat >> "Login atau Masuk" ke >> Blogger.com menggunakan akun sobat.

2. Pada "Dashboard" tampilan blogger baru, Pilih dan klik menu >> "Template"

3. "Back up" template sobat dengan klik pada >> Cadangkan/Pulihkan >> "Unduh Template lengkap" agar sobat bisa mengembalikan template sobat ke kondisi semula jika terjadi kesalahan saat edit html template blog atau hasilnya tidak memuaskan seperti yang sobat inginkan.

4. Langkah yang selanjutnya klik >> "Edit HTML" >> Lanjutkan.

5. Jika sudah, jangan lupa sobat Centang "Expand Template Widget".

6. Kemudian sobat cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian).

7. Langkah yang ke tujuh, Silahkan sobat tambahkan atau taruh kode berikut ini di atas atau sebelum kode ]]></b:skin>

#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}

8. Jika sudah, Sobat cari kode berikut dibawah ini. (Gunakan CTRL+F kembali untuk mempercepat pencarian).

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

</div>

atau

9. Silahkan sobat tambahkan atau taruh kode berikut, dibawah atau sesudah 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 di blog. Silahkan sobat gunakan kode berikut:

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

Jika sobat ingin membuat footer 3 kolom di blog. Silahkan sobat gunakan kode berikut:

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

Jika sobat ingin membuat footer 4 kolom di blog. Silahkan sobat gunakan kode berikut:

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

10. Kalau sudah, silahkan sobat klik >> "Pratinjau" atau "Preview", Guna untuk menghindari kesalahan saat Edit Template blog sobat.

11. 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 sudah berhasil membuat footer multi kolom di blog, Maka hasilnya akan menjadi seperti gambar screenshot di bawah ini.

Contoh Footer 2 Kolom