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.
#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:
Posting Komentar