Bikin Footer 3 Kolom

Pingin punya footer 3 kolom kaya blog kami sob, caranya gampang sob hanya dibutuhkan beberapa langkah saja.

Caranya seperti di bawah sobat:

Back up template blog sobat yang sudah ada!
Ini penting sobat, sebelum membuat perubahan ke template blog sobat, lebih baik melakukan back up template terlebih dahulu. Jadi apabila sobat membuat kesalahan, atau memutuskan tidak menyukai tampilan baru, sobat dapat dengan mudah kembali ke desain yang lama.

Kembali ke atas template sobat yang sudah ada, klik menu Template > Edit HTML di Dashboard Blogger sobat , dan klik "Download Full Template" link di dekat bagian atas halaman.

Menambahkan kode di bawah ke bagian footer.
Menuju ke Template > Edit HTML di dashboard Blogger sobat, dan jangan mencentang tanda "expand template widget".

Sekarang sobat cari kode d bawah:

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

Sobat harus merubah kode yang berwarna 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;'>

<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>

kode yang berwarna merah bisa sobat ganti sesuai selera.

Menambahkan kode css
Masih dalam edit HTML, masukkan kode berikut di atas kode </b:skin>

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Langkah terakhir, silahkan sobat klik Save. Nah sekarang sobat sudah punya footer 3 kolom.

Semoga Bermanfaat.

Cetak Halaman Ini