GO Blog

Membuat kolom dibawah footer dengan menambahkan css agar terlihat lebih menarik dan membuat ruang untuk widget yang di butuhkan. Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto dan update Twitter.

Juga Anda dapat menempatkan widget yang lebih sering digunakan seperti Recents comment, arsip, pengikut, About Me dll di bagian bawah template Anda sehingga hanya widget paling penting dimuat pertama. Untuk hasil terbaik template Blogger anda minimal memiliki lebar 950px.

Langkah pembuatan :

Terlebih dahulu backup Template Anda
Lalu masuk ke menu Template >> Edit HTML
Cari kode tag ]]></b:skin>
Tepat di atasnya ]]></b:skin> paste kode di bawah ini,

/* multi kolom widget footer blogger db */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Lalu cari kode yang sama atau mungkin mirip dengan kode dibawa ini : gunakan (Ctrl + F) untuk mempercepat pencarian

<div id='footer-wrapper'>

Pate kode di bawah ini tepah di bawahnya

<div id='lower'>
<div id='lower-wrapper'>

 <div id='lowerbar-wrapper'>
 <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

Anda bisa menempatkan ini sesuai dengan template anda, karena struktur template terkadang berbeda. Atau sobat bisa membuat pengecualian menempatkan di atas credit wrapper atau </body> dan paste kode di atas </body>.

Kemudian simpan.

Sekarang buka Elemen template dan tambahkan widget Anda ke kolom element Widget yang baru ditambahkan di Footer yang akan terlihat seperti ini,

Cara Customize Widget?

Disini saya anggap margin, padding dan warna bacground sudah sesuai, kecuali anda ingin melakukan perubahan tersendiri silahan di bedah cssnya. Satu-satunya hal yang perlu Anda sesuaikan agar sesuai dengan template Anda adalah lebar widget dan jumlah kolom vertikal.

1. Dalam rangka untuk mengurangi atau menambah lebar keseluruhan widget hanya perlu mengubah width: 960px;
2. Jika Anda ingin mengurangi jumlah widget misal menjadi tiga maka cukup menghapus kode di bawah ini, contoh dari kode,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. jika Anda ingin menambahkan kolom tambahan, tambahkan kode di bawah ini tepat di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahwa lowerbar# mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# dengan lowerbar5.

Setelah Anda telah menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%, dengan width: 17%; lihat kode berwarna kuning di css.

Anda hanya perlu mengulangi langkah 3 untuk menambah banyak kolom yang Anda inginkan. Tapi jumlah tiga dan empat atau lima adalah jumlah kolom yang standar. terlalu banyak kolom widget akan membuat tampilan menjadi terlihat jelek.

Semoga berhasil dan berguna, jika mendapat masalah silahkan tulis di komentar...