Cara Membuat Footer 3 Kolom di BLOG dengan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.
Semoga bermanfaat.
Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya
di sini akan kita bahas bersama.
Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.
Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:- Login ke blog sobat.
- Klik tata letak.
- Pilih edit HTML.
- Jangan kasih centang pada expand widget.
- Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:/* footer_wrapper
---------------------------- */
#footer_wrapper{
width: 100%;
position: relative;
float: left;
background:#ff69b4;
border: px solid #ff0000;
padding:%;
}
#footer_wrapper1{
float:left;
width:30%;
margin:1px;
background:#7cfc00;
padding:1%;
}
#footer_wrapper2{
float:left;
width:30%;
margin-top:1%;
margin-bottom:1%;
background:#7cfc00;
padding:1%;
}
#footer_wrapper3{
float:left;
width:30%;
margin:1%;
background:#7cfc00;
padding:1%;
}
]]></b:skin>
- Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
- Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :<div id='footer_wrapper'>
<b:section class='footer' id='footer_wrapper1'/>
<b:section class='footer' id='footer_wrapper2'/>
<b:section class='footer' id='footer_wrapper3'/>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
- Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.
Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitam adalah kode yang ditambahkan.
Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.
Semoga bermanfaat.
