Cara Membuat Footer Multi Kolom

Posted by Herman on Wednesday, March 04, 2009 46 comments

Sebelumnya saya pernah memposting tentang cara membagi bagian sidebar menjadi 2 kolom. Nah kali saya akan membahas tentang cara membagi bagian footer menjadi multi kolom. Multi kolom disini maksudnya bisa jadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan anda.

Ok, bagi anda yang ingin memperbanyak ruang kolom pada bagian footer template anda. Langsung aja kita mulai:

1. Login ke Blogger. Klik Design -> Edit HTML

2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.

3. Kalau sudah, cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Jika sudah 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>

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

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


Jika ingin membuat footer 2 kolom. 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>

Membuat footer 3 kolom. 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>

Membuat footer menjadi 4 kolom. 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 klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

Footer 2 kolom

footer 2 kolom
Footer 3 kolom

footer 3 kolom
Footer 4 kolom

footer 4 kolom

Selamat mencoba...


Recent Posts:

46 comments

Car mild said... 22 August, 2010
coba ah... langsung copas..
makasi...
Natha Darsana said... 20 November, 2010
wesss mantep nihh,, gampang banget triknya ya? nice post. . .
azdha's blog said... 06 January, 2011
kok aku gak isa mas ??
udah tak coba, tetap aja gak bisa.
kasih solusi dong
Bizetc said... 08 January, 2011
ciiihuuuyyyy !!!!... makasih tips nya mass... cuma saya ada yang di edit sedikit... kreeenn.. makasih ya mas herman 8-}
Tole ne Toudano said... 17 January, 2011
mantaf gan...langsuuung!
Edot said... 28 January, 2011
mantap sahabat, udah dua hari muter nyari kode ini, makasih banyak sahabat
brad hafiez said... 15 February, 2011
thanks.......!!!!!
manfaat banget buat pemula...!!!!
Main band said... 19 February, 2011
yess brhasil,tg bang herman :D
bioman_smaitnh said... 24 March, 2011
berhasil tapi kok body geser ke tepi kiri, header tetap di tengah... gimana bos?
Ary_Putra said... 28 March, 2011
Bagus mas infonya..coba terapin lah ilmunya siapa tahu blog bs makin ciamik hehehe
Radira said... 14 April, 2011
kalo ngga ada "div id='footer" sama "div id='footer-wrapper'" gmn?
titik-dot-titik said... 16 April, 2011
blog saya 2 kolom gan.
trus saya mau buat kolom tambahan di bawah.
gimana caranya ya gan ?
tolong dibantu gan.
penting.
Otak CIXEL 24 said... 01 June, 2011
MAkasih Banyak Ya OM HERMAN...
Koisine Blog said... 24 June, 2011
Thanks gan inponya. :))
Manadoparabola said... 07 July, 2011
makasih infonya gan
Zool said... 26 July, 2011
Mas... Cara ngatur footer biar sejajar sama outer wrapper gimana Mas?
Thanks sebelumnya...:)
Amalina said... 08 August, 2011
letak kode2 punya saya ada yang beda dari tutorial di atas

tapi saya utak atik dikit akhirnya berhasil..
makasih yaaw :)
andicxcools.bloggspot.com said... 08 August, 2011
wah punya ane gag jalan sob, huft
Wispynet said... 16 August, 2011
Terima kasih artikelnya sangat membantu
donny montang said... 25 August, 2011
makasih om...

salam,
Sutradara sinting
Blog Acak Acakan said... 26 August, 2011
Nice Post :)
Fahruddin said... 29 August, 2011
tak coba dulu ya mas..............
w9 Development said... 23 September, 2011
mas ilmu'a makasih banyak yaa..
ijin share ilmu'a ya mas di blog saya ya mas..
link: http://w9development.blogspot.com/
Djuli Wismadi Blog said... 30 September, 2011
Trim,s atas ilmunya sob.... kalau bisa tolong ajarin cara membuat link yang kayak di atas
Home, Blogroll, Sitemp, contact
Sebelumnya terima kasih sob..

salam dari blogger pemula.
Firmansyah said... 16 October, 2011
Makasih bang Akhirnya Nemu juga Ni Tutorial Nya
bloginfo said... 17 October, 2011
akhirnya ketemu juga yang pas, makasih gan info bagus.
Admin said... 01 December, 2011
makasi mas tutorialnya
Abed Saragih said... 07 January, 2012
Sukses mas di blog saya :)

Trims ya :)
Rudy Hartono said... 28 January, 2012
terima kasih atas informasinya yang sangat berguna dan bermanfaat sekali
Muhammad Ulil Albab said... 07 February, 2012
wah, mantap sobat ! lengkap banget, bookmark this !
Dilla said... 15 February, 2012
thanks, sy baru kali ini tahu membuat kolom yang fleksibel dan sy sudah terapkan, ternyata sangat familiar skali buat sy.
Rheyvanatic said... 21 February, 2012
yesssssss..... berhasillll...
horeeeeeeee... hahahaa :D
makasih banyakkk :D
wahid sahidu said... 11 March, 2012
makasih om tutorialnya langsung ane coba gan
denny cahyana said... 22 April, 2012
thanks suhu tutornya mantep:D
raden wijaya said... 02 June, 2012
Keren infonya
Thanks ya mas
Mampir ke dulida.com ya
onlyx-45 said... 02 July, 2012
mantap sekali informasinya
angelPRO said... 04 July, 2012
thx infonya tapi saya tidak bisa menemukan Catatan:
Jika anda tidak menemukan kode maka tambahkan saja kode berikut dibawah < div id = 'footer '>
TJONDRO said... 11 July, 2012
SEKOCI MAJAPAHIT Tips trik yang mantap, terima kasih telah berbagi, salam kenal persahabatan
JOHAN PURNOMO said... 12 July, 2012
CARA GAMPANG Footer multi kolom yang bagus dan mantap mas bro, thank for sharing
Cirebon-Cyber4rt said... 22 September, 2012
makasih gan, keren nih:D
Direktori Penerjemah Indonesia said... 05 October, 2012
Kalau saya pingin nambah 4 kolom diatas footer bisa ga ya mas?

Thanks dah sharing yang bagus2.

Salam kenal dari Direktori Penerjemah Indonesia.
Mmichaeltsaico Mico said... 17 October, 2012
sangat menarik ulasannya bro dan salam kenal dari mico, dan juga kalau ada teman2 yg suka download film box office gratis silakan kunjungi situsnya gue ok, makasi untuk adminnya juga. thanks
Yadie Prasetya said... 06 November, 2012
makasih sob ilmunya, sangat bermanfaat..
ROELLY R said... 08 November, 2012
Siiip banget mas Herman ilmunya, maaf ya mas kl kami update tulisan mas Herman, kl berkenan krmi kami artikel yg berkenaan dg tutorial bloging dan link Mas Herman ko' g' kelihatan lg, wkt itu sdh kami pasang tp terhapus, mksh ya mas
Erma wati said... 24 November, 2012
makacih banget infonya
hardianz maulana said... 27 January, 2013
Mas saya juga koq ga ketume sih kode di templatnya ???? x(

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment