Download File: MEMBUAT FOOTER MULTI KOLOM BLOGGER

Saturday, February 18, 2017

MEMBUAT FOOTER MULTI KOLOM BLOGGER

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

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.

Available link for download