, , | by Diposting oleh Belajar ngeBLOG Agar Tidak GOBLOK

0

Cara Bikin Footer 3 Kolom

Cara Membuat Footer 3 Kolom itu sangat mudah bin gampang, 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 pertama
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 kedua
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 simpan template. Good luck bro... Semoga berhasil yaw
Kalau berhasil, maka Footer 3 Kolom pada blog sobat akan seperti pada blog ini.

0 komentar:

Select a text on the page and get translation from Google Translate!

Download translator for Free

adfly