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.
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.
Tidak ada komentar:
Posting Komentar