Cara Membuat Footer 2, 3, 4 Kolom

Wah, akhirnya udah kelar juga nih kerjaan, mau buat postingan baru lagi, sebenarnya saya sudah ingin membuat postingan tentang Cara Membuat Footer 2, 3, 4 Kolom, tapi lupa, untung ada teman sesama blogger mengingat kan hal ini kepada saya. Saya mengucapkan terima kasih. Dalam hal ini Anda bisa mengatur kolom sesuai dengan keinginan Anda, dan cara ini saya lakukan sama dengan template pada blog ini.

Baiklah, jika Anda ingin menambahkan kolom bagian footer, bisa mengikuti langkah langkah nya di bawah ini :
  • Login Blogger
  • Pilih Rancangan-Edit HTML
Perhatian :
Agar tidak terjadi kesalahan, simpan atau salin template blog ke notepad komputer Anda, dalam keadaan centang Expand Template Widget.
  • Selanjutnya hilangkan tanda centang Expand Template Widget agar mudah mengikuti langkah-langkah nya
  • Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>
#footer-column-divide
clear:both;
}
.footer-column {
padding: 10px;
}
  • Berikutnya, cari kode yang mirip seperti kode di bawah ini :
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

Atau

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
Note :
Biasanya, setiap template memiliki kode yang berbeda-beda.

Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' /> , yang perlu Anda lakukan adalah menambahkan kode berikut di bawah kode <div id='footer'> atau <div id='footer-wrapper'>.
  • Untuk membuat footer 2 kolom, letakkan 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>
  • Untuk membuat footer 3 kolom, letakkan 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>
  • Untuk membuat footer 4 kolom , letakkan 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>
  • Jika sudah di tambahkan, klik tombol Simpan Template, dan lihat hasilnya, nanti footer blog akan menjadi sebagai berikut :
Footer 2 kolom :

Footer 3 kolom :

Footer 4 kolom :

Selamat Mencoba dan Semoga Berhasil

10 komentar:

Bisnis Gula Merah mengatakan...

wah asyik nih kalo bisa nambahin gadget di footer.
kalo untuk header sama gka caranya?

kumpulan hot threads kaskus mengatakan...

coba di blog ane yang blogspot dah. kayaknya bagus :D

Tips dan trik dunia IT mengatakan...

alo salam kenal. kunjungi juga website ane ya bos :)

Bizetc mengatakan...

@ Bisnis Gula Merah : Untuk header, jika ada waktu, saya akan buat postingan nya...

@ kumpulan hot threads kaskus : Silahkan aja mas, semoga berhasil ya mas..

@ Tips dan trik dunia IT : Saya sudah kunjungi blog nya mas, cuma sekedar lihat lihat aja mas.. soalny ada yg mau di kerjain lagi .. trimaksih mas

Manyunte mengatakan...

lam kenal bos, ane baru belajar nge-blog neh..kunjung balik ya..

Bizetc mengatakan...

ok mas.. saya sudah kinjungi n koment jg

Syed Saifullah mengatakan...

vry nice tips!!!

Bizetc mengatakan...

thank u

M. Rohman mengatakan...

tks atas petunjuknya..

Bizetc mengatakan...

@ M. Rohman : Oke mas, smoga berhasil mncoba trik ini

Posting Komentar

Silahkan berkomentar tentang kritik, saran dan lainnya di bawah ini, tetapi sesuai dengan isi artikel ya.

Jika ada waktu, saya akan membalasnya segera.
Mohon Maaf, Harap jangan ada yang Spam, Spam akan di hapus.
Terima kasih !!!