Cara Menambahkan 3 atau 4 kolom Footer pada Template Blog

Beberapa design Template Non default biasanya hanya menyediakan page element / elemen laman yang mungkin tidak sesuai dengan kebutuhan kita, lalu bagaimana bila kita ingin menambahkan element laman baru pada template kita?

Dalam tutorial ini kita akan belajar bagaimana meng'convert' page element footer anda menjadi 3 atau 4 kolom . Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto ,update Twitter dll. Juga anda akan dapat menempatkan widget yang sering banyak digunakan seperti komentar , arsip, dll sehingga sidebar anda tidak penuh oleh widget yang lain.

Tweak ini hanya menambahkan kode ke bagian footer dari template yang ada pada Blogger Anda untuk mengubahnya menjadi 3 kolom atau 4 kolom. Dan untuk memulainya sebaiknya Anda sedikit berhati - hati untuk melakukan ini, dan faslilitas backup adalah yang pertama harus anda lakukan. Untuk hasil terbaik template Blogger dengan lebar sekitar 900px adalah yang terbaik.

Tutorial pertama kita akan menambahkan 3 kolom footer di blog Anda :

1. Login ke Blogger dashboard jika belum login
2. Arahkan ke Layout / rancangan > Page Element / Elemen Laman
3. Pindahkan widget yang adadi bagian footer dan tempatkan mereka di sidebar untuk sementara dan lalu save perubahan
4. Arahkan ke Layout> Edit HTML
5. Back up template Anda sebagai tindakan pencegahan dengan men-download ke komputer Anda
6. Temukan code berikut pada template Blogger Anda, caranya dengan menekan ctrl F

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

Jika Anda mengalami kesulitan mencari bagian ini coba cari code yang hampir sejenis seperti footer-wrap / hanya footer atau sejenisnya karena kadang-kadang code ini dibeberapa template biasanya berbeda.

setelah menemukannya, ganti code yang ada di no 6 dengan yg di bawah berikut :

<div id='footer-columns'>
<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>

Tutorial Kedua. Bagaimana bila Anda ingin membuat 4 kolom footer?
Ganti code yang terdapat dalam urutan no. 6 dengan code berikut :

<div id='footer-columns'>
<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='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='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='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Selesai,sekarang Anda tinggal save template Anda.
Coba cek sekarang dengan masuk ke Page Element / Elemen Laman Blogger Anda.bila berhasil Anda akan melihat 3 atau 4 kolom di Footer Blog Anda.

Tips :
1. Untuk Menambah batas di kolom Footer Anda, Anda bisa menambahkan code di bawah berikut ini sebelum  </b:skin> :

#footer-columns {
clear:both;
}
.footer-column {
padding: 10px;
}

2. Untuk Menambahkan border di footer Anda pastekan code di bawah sebelum </b:skin>

#footer-columns{
border-top:1px dotted $bordercolor;
clear:both;
margin:0 auto;
}

Rubah $bordercolor dengan hex warna yang Anda inginkan jika standar warnanya tidak terdisplay, disesuaikan dengan warna template Anda ( untuk melihat Kode Warna HTML Anda bisa melihatnya disini ) Contohnya :

#footer-columns{
border-top:1px dotted #113355;
clear:both;
margin:0 auto;
} 

3. Untuk Menambah Box Border Di 3 / 4 kolom footer Anda :

#footer-columns{
border:1px dotted $bordercolor;
clear:both;
margin:0 auto;
}

Rubah $bordercolor dengan hex warna yang Anda inginkan jika standar warnanya tidak terdisplay, disesuaikan dengan warna template Anda ( untuk melihat Kode Warna HTML Anda bisa melihatnya disini ). Contohnya :

#footer-columns{
border-top:1px dotted #113355;
clear:both;
margin:0 auto;
}

Sekarang Anda telah belajar bagaimana cara menambahkan kolom footer 3 / 4 kolom dalam element laman template Blogger Anda (Blogspot template). Anda juga telah belajar bagaimana untuk menambahkan beberapa style seperti batasan di atas footer atau di sekitar footer.

Selamat Mencoba....