Cara Membuat Footer Blog Menjadi 3 Kolom Bagian

Footer adalah salah satu komponen penting dari blog atau website selain header dan laman, footer bila diolah dengan baik akan sangat berguna bagi blogger untuk membuat tampilan blog menjadi lebih hidup dari pada sebelumnya.

Dengan memodifikasi footer dapat menyeimbangkan antara tampilan atas dan tampilan bawah pada blog/website, sehingga tidak akan ada kesenjangan antara header dan footer. Namun sebelum melakukan modifikasi tentunya footer harus dibagi menjadi 3 (tiga) kolom bagian atau lebih untuk meletakkan gadget-gadget yang menarik.

Berikut ini tutorial 2 macam cara membuat footer blog menjadi 3 (tiga) kolom bagian atau lebih dengan atau tanpa edit script HTML. Khusus untuk edit script HTML akan lebih baik backup script template sebelum melakukan perubahan.

Cara 1

1.  Login di akun blogger Anda.
2.  Pilih menu Tata Letak, kemudian klik link "Desainer Template"
3.  Pada jendela Desainer template, pilih menu Tata Letak dan pada
     sub menu "Tata Letak Kaki" pilih footer 3 kolom.



Cara 2 (4 kolom footer)

1.  Pilih menu Template, klik Edit HTML => Edit Template dan cari kode ]]></skin> agar 
     lebih mudah gunakan Ctrl + F dan letakkan/copy kode CSS dibawah ini, tepat diatasnya.

#lower {
margin:auto;
padding: 0px 0px 0px 0px;
width: 100%;
background:#eeeeee;
}

#lower-wrapper {
background:#eeeeee;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px; // Sesuaikan dengan lebar blog Anda
border:0;
}

#lowerbar-wrapper {
background:#ffffff;
float: left;
margin: 0px 5px auto;
padding-left: 0px;
padding-bottom: 20px;
width: 30%; // Sesuaikan
text-align: justify;
color:#000000;
font: 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 15px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#000000;
text-align: justify;
font: bold 14px Arial, Tahoma, Verdana;
}

2. Berikutnya cari kode </body>, dan copy kode CSS dibawah tepat diatas kode </body>.

<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>

3.  Apabila ingin membuat 3 kolom saja, hapus tulisan script yang berwarna merah diatas.
4.  Setelah semua perubahan sudah selesai klik Pertinjauan, dan apabila tidak ada error/
     kesalahan, klik Save Template.
5.  Buka menu Tata Letak dan tambahkan gadget-gadget menarik sesuai keinginan Anda.



Contoh design footer yang sudah dimodifikasi dapat dilihat pada footer blog ini yang terletak dibagian bawah. Selamat Mencoba...