Mempartisi Area Footer Menjadi Beberapa Kolom

Anda pasti pernah melihat dimana sebuah blog yang pada area footernya dibagi menjadi beberapa kolom . Sebenarnya membagi atau mempartisi sebuah area pada blog tidaklah terlalu sulit bahkan untuk orang awam sekalipun. Nah pada posting saya akan memberikan tutorialnya kepada anda.

Sebelum anda memulainya back up dulu tamplate anda, dan baca posting sampai akhir untuk mengindari kesalahan. Juga pindahkan semua Widget yang berada di area footer ke area side bar.

Pertama anda login dulu ke blogger. Setelah masuk ke menu dasbor, klik TATA LETAK>>Edit HTML lalu pada EDIT TEMPLATE cari kode dibawah ini:

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

Lalu ganti seluruh kode diatas dengan kode dibawah ini:

<div id='footer'>
<div id='footer1' 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='footer2' 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='footer3' 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;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Tapi anda tidak harus meng-copy semuanya, anda bisa merubahnya tergantung keinginan anda dan kondisi layout blog anda (karena pada contoh diatas footer dibagi menjadi 3 kolom). Nah mana-mana saja yang bisa anda rubah:

Pertama adalah jumlah kolom yang ingin ditambahkan. Bila anda perhatikan pada koding diatas terdapat 3 buah skup (lingkup area) kode yang sama, yang membedakan hanya id nya saja (footer1, footer2, footer3 juga col1, col2, dan col3). Nah satu skup tersebut merupakan satu area kolom yang ditambahkan pada area footer. lihat kode dibawah untuk contoh satu skup/area kolom

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

Sebagai contoh apabila anda ingin membagi 4 kolom maka terdapat empat buah kode diatas. Dan kodingnya akan seperti dibawah ini:

<div id='footer'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer4' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Yang kedua adalah lebar tiap kolom, lihat kode diatas terdapat kode width: 50%;, nah value atau nilai ini bisa dirubah. sebagai contoh bila anda membagi footer menjadi 4 kolom, maka nilai atau value pada tiap skup atau area koding kolom adalah 25%, atau bisa juga menggunakan satuan pixel. contohnya apabila area footer blog anda adalah 600px, dan anda ingin membaginya menjadi 2 kolom maka nilai width pada tiap skup/area kode kolom adalah width=300px;. lihat kode dibawah:

<div id='footer'>
<div id='footer1' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer'>
<div id='footer2' style='width: 300px; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Setelah selesai klik SAVE TEMPLATE. lalu lihat hasilya

Pada percobaan pertama saya dalam menambahkan tips koding ini, layout footer saya berantakan. bila anda mengalaminya coba modifikasi lagi kode diatas, biasanya masalah berasal dari pengisian nilai lebar kolom (width) yang kurang atau lebih.
Anda juga bisa menambahkan variabel-variabel (Warna area, border, dll) lain untuk memodifikasi are footer ini agar tampilanya lebih bagus.