Membuat Multi Kolom Footer

Menggunakan template 3 kolom, ternyata masih ada yang kurang. Seperti masih butuh space lagi gtu?? he..he.. maklum lagi seneng expansi dan coba hal-hal baru ney... Trus ada inspirasi dari melihat blog para master yang punya 3 kolom pada footer section nya, perasaan lega banget kalo ada 3 kolom itu. Ok langsung ke TKP aja ya!!! Tutorial ini saya ambil dari bloggerbuster, kalo mw langsung menuju kesana silahkan, tapi berbahasa inggris, he.. he.. buat yang alergi bahasa inggris 'don't step away!!!'

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

1. Login ke http://blogger.com hingga masuk Dasbor

2. Klik Tata Letak (layout)

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>

Pada contoh ini, Tips Trik Blog menggunakan template Son Moto, 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'>

<b:widget id='Text1' locked='false' title='' type='Text'/>

</b:section>

</div></div>

5. Ganti kode yang berwarna biru 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 hijau) 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.

Posted by: Andi Setyoko

Berita Harian, Updated at: 10:25 PM