Cara Menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom Diatas Footer
- Istilah menambah gadget baru/elemen kolom di atas footer blogspot
lebih dari 1 kolom lebih kerennya dengan nama membuat multi kolom di
footer. Untuk cara meletakkan penambahan kolom baru yang berada diatas
footer blog ini tidaklah sulit, namun tidak semua template blog
terpasang footer. Kadang dengan sengaja si pembuat template tidak
mencantumkan bagian elemen footer blog. Sekarang ke topik pembahasan
bagaimana cara membagi footer menjadi multi kolom, seperti
membagi footer menjadi 2 kolom, 3 kolom atau 4 kolom. Kalau membuat 4
kolom di footer blog, lebih bagusnya kalau mempunyai ukuran blog yang
lebar. Terlebih dahulu simak postingan mengenai cara menambah 1 kolom, 2 kolom, 3 kolom dibawah header blog.
Cara Membuat Multi Kolom di Footer Blogspot
1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Backup template (Download Full Template)
4. Tekan F3, cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya
#footer-column-divide {clear:both;}.footer-column {padding: 10px;}
5. Selanjutnya cari kode seperti dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
atau bisa juga cari kode seperti dibawah ini
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
6. Letakkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />
Apabila tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan aja kode berikut dibawah <div id='footer'>
Menambah 2 Kolom Diatas Footer
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; 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: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
Hasilnya dari menambah 2 kolom di footer seperti gambar dibawah ini
Menambah 3 Kolom Diatas Footer
<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; 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: 33%; 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: 33%; 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>
Hasilnya dari menambah 3 kolom di footer seperti gambar dibawah ini
Menambah 4 Kolom Diatas Footer
<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; 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: 25%; 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: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Hasilnya dari menambah 4 kolom di footer seperti gambar dibawah ini
Selamat mencoba Cara Menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom Diatas Footer, semoga bermanfaat, happy blogging.
0 komentar: