Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom

Do you Like this story..?


Get Free Email Updates Daily!	Follow us!

Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom | Bagi anda yang ingin menambah kolom pada halaman utama blog kesayangan anda karena kurangnya tempat untuk meletakkan beberapa widget yang akan anda pasang, pada kesempatan ini saya akan membahas tutorial tersebut. Pada posting sebelumnya saya juga pernah membahas cara membuat 3 kolom di bawah header, mungkin anda juga ingin membuatnya, silahkan ditinjau juga ya.

Cara membuat footer atau menambah footer disini akan saya bagi menjadi 3 bagian, anda nantinya tinggal memilih tutorial mana yang akan anda butuhkan untuk diterapkan pada blog anda, baik Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom, biasanya para blogger menamakan dengan footer multi kolom.

Berikut langkah-langkah cara Menambah Footer Multi Kolom :

1. Login ke Blogger
2. Pilih Rancangan
3. Edit HTML
4. Back-up dulu template anda dengan klik pada Download Full Template untuk menjaga-jaga apabila terjadi kesalahan, anda bisa mengembalikan template anda ke kondisi semula.
5. Kemudian cari kode ]]></b:skin>
6. Kalau sudah, tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}

7. Langkah selanjutnya anda cari kode seperti di bawah ini :

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

</div>

Atau kalau tidak ada, cari kode seperti berikut :

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

</div>

8. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/>

atau
<b:section class='footer' id='footer' />

Penting :
Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>

1. Cara membuat footer 2 kolom, kodenya seperti berikut 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>

Contoh menambah footer 2 kolom seperti di bawah ini :

2. Cara membuat footer 3 kolom, kodenya seperti berikut 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>

Contoh menambah footer 3 kolom seperti di bawah ini :

3. Cara membuat footer 4 kolom, kodenya seperti berikut 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>

Contoh menambah footer 4 kolom seperti di bawah ini :

9. Kalau sudah, Save Template dan lihat hasilnya

Sampai disini dulu pembahasan ini karena saya rasa pembahasan mengenai Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom atau Cara Membuat Footer Multi Kolom ini sudah selesai, maka saya berharap anda cukup paham, selamat mencoba dan semoga berhasil, wassalam.