Membuat 3 Kolom pada Footer Section

Syalom...,

Menggunakan template 3 kolom, ternyata masih ada yang kurang. Seperti masih butuh space lagi gitu?? maklum lagi seneng expansi dan coba hal-hal baru ... 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  aja ya.....ini langkah-langkahnya :


1. Login dulu ke blogspot kemudian setelah masuk langsung menuju Tata Letak > Edit HTML.   Sebelum memulai merubah kode, template terlebih dahulu di save klik Download Template Lengkap simpan file di tempat yang aman.

2. Setelah itu cari kode seperti dibawah yang berwarna merah, jangan centang Expand Template Widget yaa, nanti keluar kode-kode yang memusingkan.

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

Asal tau saja neh tidak semuanya kode template kamu sama seperti di atas, bisa saja di sebut “footer-wrap” atau “footer”. Yang jelas di dalam Rounders templates, kamu perhatikan ada dua DIV section di sekitar footer section. Dalam hal ini kita hanya merubah kode yang berwarna merah saja.

3. Ganti kode yang berwarna merah tersebut dengan kode dibawah 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>

4. Sekarang di save terlebih dahulu hasil pekerjakan kita, setelah selesai lanjutkan dengan mencari kode tag </b:skin>, setelah ketemu sisipkan kode di bawah sebelum kode tag </b:skin>.




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

.footer-column {
padding: 10px;
}

Nah.. Selesai deh!!! Kita hanya tinggal save template, dan lihat hasilnya ke Tata Letak > Layout akan terlihat ada penambahan 3 kolom di footer. Bisa kamu sisipkan dengan widgets atau yang lainnya sesuai dengan keinginan kamu. GBU....