Membuat Footer 3 Kolom Di Blog

Belakangan ini, para pengunjung mungkin mendapati tampilan footer pada blog ini sedikit berbeda dari biasanya, di mana footer pada blog ini, saya bagi menjadi beberapa kolom. Dan menurut saya pribadi, sepertinya lebih variatif dan satu hal yang pasti, kita dapat menambahkan beberapa widget berjejer secara horizontal. Anda yang kebetulan mempunyai template blog dengan footer satu kolom, dapat mencoba untuk menjadikan footer blog Anda menjadi multi kolom seperti pada blog ini.

Langkah-langkahnya sebagai berikut. (Oh, iya sebelum melakukan pengeditan HTML, jangan lupa untuk melakukan back up terlebih dahulu untuk mengantisipasi hal-hal yang tidak diinginkan).

1. Login ke Blogger hingga masuk Dasbor.
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Kemudian cari dan temukan kode seperti di bawah ini:

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

Contoh pada template Rounders, template default kepunyaan Blogspot. Mungkin Anda akan menemui kode yang berbeda pada template non-blogspot namun pada prinsipnya sama.

Ada juga kode-nya seperti di bawah ini.

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

5. Ganti kode yang bercetak tebal dengan kode di bawah 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><!--kolom pertama-->

<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><!--kolom kedua-->

<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><!--kolom ketiga-->

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p><!--garis horisontal-->

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

Catatan:
Anda dapat merubah width (berwarna merah) dengan komposisi prosentase yang berbeda sesuai selera masing-masing.
Jika Anda ingin menambahkan kolom lagi, Anda juga harus merubah komposisi prosentase tersebut sedemikian rupa sehingga lebarnya menjadi 100%.
Anda pun dapat merubah warna dan panjang garis horisontal dengan merubah prosentasenya atau bahkan jika tidak menginginkannya, Anda dapat menghapusnya.

6. Kemudian letakkan kode berikut ini di atas kode ]]></b:skin>

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

.footer-column {
padding: 10px;
}

7. Kemudian Simpan Template
8. Selesai.

Nah, setelah berhasil, pada menu elemen halaman, Anda akan mendapati footer dengan multi kolom, seperti di bawah ini.

Sekarang Anda dapat menambahkan widget berjejer secara horizontal di footer blog Anda, seperti Anda lihat pada blog ini.
Tapi sekarang Blogger telah menyediakan pengaturan template barunya untuk mengatur jumlah kolom footer secara otomatis, jadi Anda tidak perlu repot mengubah tag html blog Anda lagi.
Jika masih ingin utak-atik blog sendiri, selamat mencoba!