Membuat Footer 3 Kolom dengan Background

foot logo
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:
  • 1. 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.
  • 2. 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.
  • 3. 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 <!-- end content-wrapper -->
  • 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
  • 8. 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....

21 komentar:

  1. keduaxxxx :e:

    Keren lah tutornya

    BalasHapus
  2. Kami juga tertarik dengan footer 3 kolom ini. Trims tutorialnya sobat. :e: Salam sukses.

    BalasHapus
  3. Mas kalo buat 2 kolom aja bisa gak?? aku lagi butuh banget nih..
    makasih..

    BalasHapus
  4. @XP-Zone: Caranya sebagai 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....

    BalasHapus
  5. Thank's banget mas!!!
    langsung praktek ah...

    BalasHapus
  6. ga bisaaaaaaaaaaaaaaaaaa :a:

    BalasHapus
  7. terimakasih mas,, dah dicoba dan sukses...

    BalasHapus
  8. waduh... keren juga..... thanks...

    BalasHapus
  9. Gan, muncul galat gan...
    munculnya tulisan

    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The element type "div" must be terminated by the matching end-tag "

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. sudah bagus,,tapi gmn klo merubah bacjkgroundnya jadi putih...tks

    kmkipb.co.cc

    BalasHapus
  12. agan....gmana cara lebarin halaman tetep ada sidebar di samping kanan kiri
    template aku sama kayak agan
    bisa di cek : http://habilhack.blogspot.com

    BalasHapus
  13. wah keren bos... akhirnya bisa nempatin widget di footer

    BalasHapus
  14. Wah ini dia yang saya cari-cari. Akhirnya dapat juga info nya. Terima kasih gan..

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.