Cara Membuat Footer 3 Kolom Di Blog ~ Bithoo

Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi.

Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

1. Login ke blogger dan masuk ke Dasbor.

2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")

3. Cari kode ]]></b:skin>

4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

 #footer-column-container {

clear:both;

}

.footer-column {

background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff

}

5. Cari kode <b:section class='footer' id='footer'> dan ganti dengan kode pengganti di bawah 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>

6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode

7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.

8. Lalu simpan....

Dan kalau ingin membuat 2 kolom caranya seperti berikut:

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

Menjadi seperti ini:

<div id='footer-column-container'>

<div id='footer2' style='width: 50%; 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: 50%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:right;'/>

</div>

</div>

Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....