Cara Menambahkan 3 Kolom Di Bagian Footer

Sebenarnya Menambahkan kolom tambahan ke bagian footer Anda akan memberikan lebih banyak ruang berharga untuk widget blog, dan juga berkontribusi "Web 2.0" modern banding untuk desain blog Anda.

Hanya ada empat langkah utama untuk tutorial ini, dan semua proses secara keseluruhan cukup sederhana. hack ini footer adalah khusus untuk blog yang memiliki lebar yang berbeda dan gaya, dan sebagainya bloggerbuster telah merancang solusi cairan yang harus bekerja di setiap template layout Blogger.



Membuat kolom baru Footer
Back up template blog yang ada! Sebelum membuat modifikasi pada template blog Anda!

Untuk membuat cadangan template yang ada Anda, pergi ke Template> Edit HTML di dashboard Blogger Anda, dan klik pada link "Full Download Template" di dekat bagian atas halaman. Anda kemudian dapat menyimpan file yang ada template XML untuk komputer Anda.

Tambahkan kode ekstra untuk bagian footer
Pergi ke Template> Edit HTML di dashboard Blogger Anda, dan jangan centang "Expand Template Widget" kotak (ini menyederhanakan proses).

Sekarang Anda perlu menemukan bagian ini dalam template Anda:

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

kita perlu mengubah code yang berwarna merah dengan code 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>

Menambahkan style untuk bagian footer baru
Cari kode </b:skin> lalu letakkan code berikut sebelum kode </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Sekarang Anda telah selesai menambahkan bagian-bagian baru untuk footer Anda, pergi ke bagian Tata Letak Anda dashboard Blogger (Template> Tata Letak), dan Anda akan melihat kolom baru tiga, ditambah bagian yang lebih rendah yang membentang lebar dari semua kolom tiga, untuk yang kini Anda dapat menambahkan widget baru!


Saya menambahkan garis horizontal ke bagian footer untuk memastikan bahwa ada perbedaan yang jelas antara konten di kolom footer dan konten dalam bagian bawah yang lebih luas. Jika Anda ingin mengubah warna baris ini, Anda dapat melakukannya dengan mengganti nilai warna dengan warna yang berbeda:

<hr align='center' color='#5d5d54' width='90%'/>

SELAMAT BERKREASI.............