Cara Membuat Footer 3 Kolom - Menambahkan elemen di blog meningkatkan kualitas desain blog. Salah satunya dengan memberikan sentuhan berbeda pada footer blog. Berikut tutorial selengkapnya mengenai "Cara Membuat Footer 3 Kolom"
Ke Tutorial, Cara membuat footer 3 kolom
BACA DULU :
Ini contoh blog sebelum dan sesudah diberi footer 3 kolom
- Masuk ke akun blogger
- Buka Design/Rancangan
- Pilih Edit HTML
- Centang "Expand Eidget Template"
- Cari kode </b:skin> (gunakan Ctrfl +F untuk mencari)
- Lalu masukkan kode berikut ini tepat di atasnya
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
- Cari kode id='footer' ,contohnya
- Lalu, masukkan kode berikut ini tepat di bawah kode id='footer' tadi , contohnya seperti gambar di atas
<div id='footer-column-container'><div id='footer2' 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='footer3' 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='footer4' 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;'/><p><hr align='center' color='#ffae00' width='90%'/></p><div id='footer-bottom' style='text-align: center; padding:10px; text-transform: lowercase;'><b:section class='footer' id='col-bottom' preferred='yes'><b:widget id='Text2' locked='false' title='' type='Text'/></b:section></div><div style='clear:both;'/></div>
- Simpan,
- Ket : yang berwarna hitam tebal adalah warna garis di bawah footer, Kamu bisa menggantinya (Baca : kode warna HTML )
