Cara Membuat Footer Blog Menjadi 3 Kolom

Footer merupakan salah satu elemen penting dari sebuah blog. Dengan Adanya footer kita bisa menambahkan widget-widget yang tidak cukup apabila kita tempatkan pada sidebar ataupun bisa membuat sidebar terlalu panjang bila kita tempatkan disana.

Apabila saat ini footer sobat hanya berupa satu kolom dan sobat merasa jumlah tersebut kurang, maka sobat bisa menerapkan cara dibawah ini untuk merubah jumlah footer tersebut menjadi tiga kolom.

Caranya sebagai berikut :

• Log in ke dashboard blog sobat dan pilih menu template
• Pilih Edit HTML
• Beri tanda cek pada Expand Widget Templates
• Cari kode ]]></b:skin> dan letakkan kode berikut ini diatasnya

#footer-3kolom-Referensikita {
clear:both;
}
.footer-column {
padding: 10px;
}

• Cari kode berikut ini 

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

• Ganti  <b:section class='footer' id='footer'/> pada kode diatas dengan kode dibawah ini

<div id='footer-3kolom-Referensikita'>
<div id='footer1' 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='footer2' 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='footer3' 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;'/>
</div>

Sehingga kodenya sekarang berbentuk seperti ini :

<div id='footer-wrapper'>
<div id='footer-3kolom-Referensikita'>
<div id='footer1' 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='footer2' 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='footer3' 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;'/>
</div>
</div>

• Simpan Template Anda
• Selesai..

Nah, sekarang saatnya sobat melihat hasilnya dengan masuk ke menu layout. Bagaimana ? Berhasil kan ?

Rencananya akan digunakan untuk apa saja nih 3 kolom footernya sob ? Siapa tau saya bisa mendapatkan ide dari rencana sobat :). Mari kita diskusi bersama melalui form komentar dibawah ini :).

Regards,

Irfan

Berlangganan Artikel Referensi Kita

Tweet

Masukkan alamat email Anda:

Related Post: