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

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari Tool Gadget. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow Tool Gadget dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh Blog Ryan pada tanggal Wednesday, 5 May 2010