Menambahkan kolom pada footer

Footer merupakan salah satu bagian pening pada blog. Di bagian footer, biasanya terdapat credit pembuat template, tanda copyright, dan lain - lain. Namun kebanyakan blogger kurang memaksimalkan bagian yang termasuk intim ini. Misal menambahkan kolom pada bagian footer. Dan kali ini, saya tunjukkan cara pembuatannya.

1. Backup template anda. Untuk berjaga - jaga jka ada kegagalan dalam proses ini. Klik "Download template langkap" di dekat tempat anda mengupload tmplate dari hard disk.

2. Pencarian kode dimulai. Tidak usah meng-expand widget pada template anda, ini diperlukan untuk mempersingkat waktu.

3. Cari kode berikut : ( cukup cari yang berwarna hijau )

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

Jika tidak ketemu cari. kode <div id='footer-wrapper'> lalu letakkan kode ini tepat dibawahnya .

4. Ganti kode yang berwarna hijau dengan kode berikut ini :

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

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

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

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' 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='Text2' locked='false' title='' type='Text'/>
</b:section>

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

</div>

5. Lalu tambahkan kode CSS berikut, letakkan diatas kode </b:skin>

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Siip :$ ... lalu disimpan deh ...

Dibawah 3 kolom tersebut terdapat garis horizontal, kamu bisa mengganti warnanya. Coba cari kode berikut yang dicetak tebal :

<hr align='center' color='#5d5d54' width='90%'/>

Gantilah dengan kode warna yang anda punya. Jika tidak tahu kode warnanya, bisa anda lihat disini.

Happy blogging with Jogja Blogger :D ...

Diadaptasi dari BloggerBuster