Cara Membuat Footer 3 Kolom

Sobat pasti sering kan kehabisan tempat pada saat memasang widget di blog. Mau dipasang di sidebar penuh, di header penuh, di footer juga penuh. Trus gimana dong????

Gampang Sob… Pecah aja footer blog Sobat menjadi tiga bagian. Jika kita lihat, Template default Blogger cuma memiliki footer satu kolom aja. Kalau kita jadikan 3 kolom kan lumayan tuh, space di blog kita jadi makin banyak. Kalau masih bingung, Sobat bisa lihat di blog kumpulan tutorial ngeblog. Coba Sobat scroll ke bagian paling bawah halaman, terlihat footernya ada 3 kolom. Bagaimana?? Tertarik untuk membuat footer menjadi 3 kolom. Ya udah deh, silakan Sobat simak tutorial singkat berikut ini.

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode ]]></b:skin> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

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


Langkah 2
Cari kode berikut ini

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Setelah itu hapus kode <b:section class='footer' id='footer'/> lalu ganti dengan kode berikut ini

<div id='footer-column-divide'>

<div id='footer1' style='width: 30%; 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: 40%; 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: 30%; 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>
Selanjutnya klik tombol Simpan Template.

Langkah 3
Jika Sobat berhasil, maka footer blog Sobat akan terbagi menjadi tiga seperti pada blog Kumpulan Tutorial Ngeblog.

Semoga bermanfaat...

Artikel Terkait



Berlangganan


Tulis alamat email Anda untuk berlangganan artikel terbaru dari blog ini:

Delivered by FeedBurner

32 Response to "Cara Membuat Footer 3 Kolom"

Dimas mengatakan...

thx sob infonya, footerku udah 3 kolom sih, tapi jadi tau cara bikinnya...

Artikel Internet Online mengatakan...

sep tutorialnya nih, keep blogging...

Sungai Awan mengatakan...

footer 3 kolom enak ya lebih lebar dan lega

uswah mengatakan...

mkasih sob penting dan butuh nich

penghuni60 mengatakan...

wow, infonya bermanfaat nih, perlu dicoba, tar aku coba deh...

Gudang Ilmu mengatakan...

thanks nie infonya

Ratasoe mengatakan...

Tips menarik sob, bwt masukan ny trims ya

HB Seven mengatakan...

ntar nyoba ah...tengkyu..bos...

NURA mengatakan...

salam sobat
wah bisa ikuta cob ,,buat footer 3 kolom ini.
trims ilmunya.
trims kunjungannya ke S.A

achen mengatakan...

thanks neh mas tutorialnya.. eSSip

buwel mengatakan...

bisa dicoba neh tipsnya bila bosen dengan footer saya yang sekarang, makasih neh..

Girant_31 mengatakan...

Kunjungan balik neg mas..

Wah ternyata bisa banyak belajar neg ane dr sini..
Salam Silaturrahmi jg dr ane mas.. untuk semuanya..

TUKANG COLONG mengatakan...

saya make yang 3 kolom tapi ke samping, kemungkinan saat saya ganti template akan saya gunakan trik ini..:)

Anggi Zahriyan mengatakan...

waduh.. template saya nggak ada footernya *bingung*

makasih yaa udh berkunjung ke blog saya, sekalian numpang jadi followersnya :D

Artha mengatakan...

nah asik nih ... pagi2 udah dapat sarapan yang sangat berguna buat kesehatan otak dan skill

yudex mengatakan...

ngedit beginian nih yang sering buat aku sakit kepala.. thx sob tipsnya. salam kenal yah, follow balik donk.. :-)

Unknown mengatakan...

thanks infonya
baru tahu..

exort mengatakan...

ooo gitu toh caranya

NoRLaNd mengatakan...

wah,. thx y info nya, kbtulan blog ku footer nya hanya 1 kolom... (maklum template jadoel)... =)

Clara Canceriana mengatakan...

wah tipsnya berguna sekali
trims ya ^^

catatan kecilku mengatakan...

Thankg banget infonya.. lain kali pengen nyoba ah..

the others mengatakan...

Thanks for sharing.. :D

rizal mengatakan...

mantap nih, bisa buat naruk widget lagi di footer.

makasih ya....

aku mau request ni, bagaimana supaya tulisan copyright di blog aku tidak tepat ditengah-tengah ya. aku pake template minima juga yang udah di utak-atik..thank

Ferdinand mengatakan...

Aku udah pernah nyoba nie so di blogku yg satu lagi......bisa koQ soalnya sama tuh script'y hhe......

Makasih info'y Sob...

Rizkyzone mengatakan...

kalau aq tak taruh d bawah header sob, menurut aq lebih ringan

Asrizal Wahdan Wilsa mengatakan...

tahanx sobat

Angga mengatakan...

thanks sobat info nya

zHensaDja mengatakan...

terima kasih banyak . . .sangat membantu saya . . . :)

munich@jak-stik.ac.id mengatakan...

Makasih yach.... sangat bermanfaat nih... ^_^

Anonim mengatakan...

Nice tips om, atur nuhun^^

rino mengatakan...

Ma kasih tutorialnya Mas.
Sangat membantu,

nureko mengatakan...

gan,kode untuk langkah kedua kok nggak ada................?

Posting Komentar

Silakan menyampaikan kritik, saran dan komentar.