Footer Baru

Hmm.. Kmarin saya merasa bagian footer saya ga efisien, dan area footer yang panjang sebaris agak kurang sreg kalau ditambahin widget dll. Rencananya sih saya mau bagi footer jadi footer kiri dan kanan. Sambil surfing, eh kebetulan Annie ada ngajarin caranya [bagus lah, biar ga buang waktu trial & error sendiri].

Nah, coba lihat ke bagian bawah blog ini. Setelah disusun begini, kesannya jadi lebih rapi dan jadi ada ruangan yang ngepas buat nambah catatan kaki. Plus pas halaman blog saya dibuka, postingan dan bagian utama lain muncul dulu baru widget dll yang loadingnya lelet muncul belakangan.

Lagi mood utak-atik? Cara buatnya begini :

1. Ke bagian layout, coba pindahkan semua elemen yang ada di footer ke tempat lain dulu.

2. Edit template >> Backup template dulu

3. Trus jiplakkan kode ini di atas </head>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
.footer-bottom {
padding: 10px;
}

4. Lalu cari kode yang begini di template

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

Hapus dan gantikan kode berwarna jingga dengan ini

<div id='footer-column-container'>

<div style='clear:both;'/>

<p>
<center><b>{ <i>YOUR TEXT</i> }</b></center>
<hr align='center' color='#cccccc' width='90%'/>
</p>

<div id='footer2' style='width: 32%; float: left; margin-left:1%; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML10' type='HTML'/>
</b:section>
</div>

<div id='footer3' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
<b:widget id='HTML11 type='HTML'/>
</b:section>
</div>

<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='HTML13' title='' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-top' preferred='yes'>
<b:widget id='HTML14' type='HTML'/>
</b:section>
</div>

<p>
<hr align='center' color='#cccccc' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='HTML15' type='HTML'/>
</b:section>
</div>

<div style='clear:both;'/>
</div>

Ganti Nama Footer dengan nama lain atau hapus saja kode ini kalau sdr ga mau area ini berjudul.

Silakan ganti warna garis pembatas sesuka sdr.

Selanjutnya, save template. Kalau di blog sdr ada banyak elemen html, coba ubah id HTML10 ke HTML20, dst. Elemen footer di layout blog sdr akan berubah jadi begini nanti.

Kalau mau bagi bagian footer ke 2 bagian saja, hapus kode ini dan ubah widht footer 2 dan footer 3 ke ukuran yang sdr suka.