Bagi blogger senior tentu hal ini tidak asing lagi..
Blog ini hanya untuk pemula targetnya ya para pemula hehehe.
Contohnya ya seperti blog ini di bagian bawah(footer) ada 3 kolom tambahannya,
Nah bagi anda yang ingin membuat 3 kolom pada footer tsb silahkan ikuti langkah-langkah berikut:
- Login ke blogger.
- Klik tata letak/layout lanjut klik edit html.
- Jangan lupa centang tanda 'Expand Template Widget'.
(Hati2 dalam mengedit, untuk antisipasi terjadi kesalahan backup dulu template anda)
- Cari kode berikut:
- Ganti kode pada bagian kedua (warna merah) dengan kode berikut.
<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='#5d5d54' 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>
<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='#5d5d54' 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>
- Cari kode </b:skin>
- Copy kode berikut dan paste(letakkan) di atas kode </b:skin>
clear:both;
}
.footer-column {
padding: 10px;
}
ps: Angka 30% dan 40% (warna hijau) untuk menentukan berapa lebar kolom.
Pembaca bisa menyesuaikan sesuai keinginan masing-masing.
Simpan dan lihat hasilnya.
Selamat mencoba.
Simpan dan lihat hasilnya.
Selamat mencoba.
7 Komentar untuk "Cara Membuat 3 Kolom Pada Footer Template"
mau tanya donk:
kolomnya udah jd,,tp saya bingung mau bikin baground nya,,bikin baground kaya ente gmana yah,,mohon pencerahannya,,bagroun kolom footernya yah,,trs sama di bikin pembatasnya gtu gmana yah,,maav ya banyak nanya cZ blogger pemula nih...:)
kirim via email aja yah..:)
email : syariflonely@yahoo.com
makasih tutornya...
nih bikinnya gmana c,,kok browser nya jd kecil2 tau2 langsung maximize,hehehe bisa aja ente..:D
satu set sama templatenya rif..lihat aja sourcenya .copy aja
nice blog.......
salam kenal aja ayu
bagaimana ya saya sudah coba untuk menanbah coulom dan mengganti code nya tapi belum bisa
mungkin ada saran untuk saya
cara buat kolom tanya jawab gmn bosss