Oke kali ini saya akan berbagi Tutorial Membuat Footer Multi Kolom, 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.
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.
Posting Komentar