Bikin Footer Jadi 3 Kolom

Seorang teman bertanya, ‘bisa g y footer dibuat jadi 3 kolom?’. Akhirnya, ayas coba2 utak-atik template, dan akhirnya berhasil juga..

Ya, footer pada template, berupa baris lurus dibagian bawah blog, sepanjang halaman blog kita, dan kita bisa menambah element dibawahnya. Perbedaan dengan sidebar, sidebar tidak sepanjang halaman blog kita, dan pada template asli hanya ada 1 kolom.

Lalu, bagaimana caranya membuat footer menjadi 3 kolom?

Gampang kok caranya............


Pertama , pilih menu ‘Tata Letak’ - ‘Element Halaman’. Footer sodara awalnya adalah seperti ini

Lalu, silahkan menuju ke menu ‘Edit HTML’. Yang harus kita lakukan adalah mengetahui berapa panjang footer keseluruhan. Panjang footer umumnya sama dengan panjang outer. Untuk mengetahuinya, silahkan teman cari kode berikut :

(Beberapa template mungkin beda kodenya. Yang penting adalah kode paling atas).

#outer-wrapper {

background-color:#473624;
border-$startSide:1px solid #332A24;
border-$endSide:1px solid #332A24;
width:890px;
margin:0px auto;
padding:15px;
text-align:center;
font: $bodyFont;

Nah, nilai pada width itu sama dengan panjang footer. Jika teman tidak menemukannya, g usah kawatir, pa lagi sampe bunuh diri :):):). Panjang tiap footer nantinya bisa diatur kok.

Kedua, setelah mengetahui panjangnya, untuk membuat 3 footer, kita harus membagi panjang tsb menjadi 3. Maka, kita hitung 890 : 3 = 296. Klo g percaya, silahkan hitung sendiri,he999....

Ketiga, kita mulai bermain2 dengan kode HTML nya. Sebelum mengubah apapun, jangan lupa untuk DOWNLOAD TEMPLATE sodara, demi masa depan sodara.

Keempat, cari kode berikut:

(Jika teman kesusahan mencari kodenya, coba dengan Ctrl+F, lalu muncul kotak pada bagian bawah, ketik ‘footer’ pada kolom yang tersedia, lalu klik ‘Next’)

#footer {

clear:both;

background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;

padding-top:10px;

_padding-top:6px; /* IE Windows target */

}

Sekali lagi, beberapa template akan berbeda kodenya, tapi yang penting adalah kode ‘#footer’ dan ada ‘clear:both;’-nya. Informasi, kode berwarna hijau adalah kode bawaan template sodara.

Keempat, copy kode dibawah ini, lalu paste tepat diatas kode tadi (diatas #footer).

#footer2 {
clear: both;
float:left;
padding-right: 0;
width: 296px;
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}

#footer3 {
float:right;
padding-left: 0;
width: 296px;
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;
padding-top:10px;
_padding-top:6px; /* IE Windows target */

}

#footer4 {
float:right;
padding-left: 0;
width: 296px;
background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top $startSide;
padding-top:10px;
_padding-top:6px; /* IE Windows target */
}

Yang perlu diperhatikan adalah kode tambahan yang berwarna merah. Ingat, kode berwarna hijau adalah bawaan template sodara, silahkan copy dari template sodara, untuk menyesuaikan dengan template sodara. Ingat (lagi), nilai pada ‘width’ adalah panjang masing2 footer, yang sudah kita hitung sebelumnya. Atau bisa sodara atur sendiri panjang tiap footer, terserah berapa.

Kelima, silahkan cari kode berikut :

<div id='footer-wrapper'>

Keenam, copy kode berikut, lalu paste tepat diATAS kode <div id='footer-wrapper'>.

<div id='footer2'>
<b:section class='footer' id='footer2'/>
</div>
<div id='footer3'>
<b:section class='footer' id='footer3'/>
</div>
<div id='footer4'>
<b:section class='footer' id='footer4'/>
</div>

Ketujuh, simpan template sodara, lalu menuju ke menu ‘Element Halaman’. Sodara liat, footer sekarang akan menjadi begini :

Jika footer tidak berada pada satu garis lurus mendatar (sejajar) berarti nilai yang sodara masukkan pada ‘witdh’ terlalu besar. Coba kurangi, agar sesuai.

Bisa dilihat, footer asli tidak terhapus. Jika tidak menginginkan untuk muncul pada blog, jangan tambahkan widget pada footer tersebut.

Gimana? Gampang kan...selamat mencoba...............