> Warung Bebas

Cara Membuat Footer 3 Kolom

Beberapa Template Yang Anda Download, Tidak Semuanya Menyediakan Kolom Footer. Dan Fungsi Footer Cukup Banyak.. Nah, kali Ini saya akan Memposting Cara Membuat Footer dengan Jumlah Kolom 3.


  1.  Masuk pada akun blogger Anda
  2. Pilih Rancangan >> Edit HTML
  3. Untuk berjaga-jaga Download Template Lengkap Terlebih Dahulu
  4. Centang Expand Template Widget
  5. Cari :
    ]]></b:skin>
  6. Copy kode berikut dan tempatkan tepat diatas kode ]]></b:skin>
    #footer-column-divide {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }
  7. Cari kode berikut yang sama atau hampir sama dengan kode berikut :
    Pencarian 1 :
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
    Jika tidak ketemu ganti pencarian menjadi :
    Pencarian 2 :
    <!-- end outer-wrapper -->
    atau pencarian 3 :
    <div id='footer'>
  8. Jika yang kode pencarian yang ada pada blog :
    • Jika yang Anda temukan adalah kode Pencarian 1 maka :
      Ganti kode <b:section class='footer' id='footer'/> dengan kode dibawah ini.
    • Jika pencarian 2 atau 3 yang Anda temukan tempatkan kode dibawah initepat diatas kode tersebut.
    <div id='footer-column-divide'>
    <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 style='clear:both;'/>
    </div>
  9. Lalu Simpan. Dan Lihat Hasilnya.
Selamat Mencoba & Happy Blogging.


Sumber : http://www.katakan-hey.com
Cara Membuat Footer 3 Kolom 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'Cara Membuat Footer 3 Kolom' On ...

Ditulis oleh: Arya Dharma - Jumat, 11 Mei 2012

17 komentar untuk "Cara Membuat Footer 3 Kolom"

  1. makasih informasinya sangat bermanfaat sekali, happy blogging

    BalasHapus
  2. Contoh 3 kolom footer pada blog mane bos ?

    BalasHapus
  3. nice blog
    You can also visite my blog Fullversion software and game
    www.newthingbd.blogspot.com

    BalasHapus
  4. ada yang menambah sidebar diatas header ada??

    BalasHapus
  5. @sigitini sibawah blog ane mas.. :D

    BalasHapus
  6. @Akashokay. i write for you :) just wait

    BalasHapus
  7. mksih infonya, bookmark dlu, ntr bru nyobain..
    visit me back, & follow my blog ;D

    BalasHapus
  8. @auni Sama - Sama :) Oke Gpp :) Tunggu Ya saya Segera kesana :D

    BalasHapus
  9. wah.. artikel yang bermanfaat :D
    Disini templatenya bagus & Artikelnya juga Berkualitas :D
    kalau diberi umur panjang aku akan datang lagi kesini :)



    #Semoga Rezekinya Lancar :D

    BalasHapus
  10. @Darmawan Saputrawah,, trima kasih sobat.. tiap km datang kesini, pasti bikin saya terharu heheheh

    BalasHapus
  11. makasih maz sangat membantu tutornya,,,!!!

    BalasHapus
  12. @MuyufarSama2 Gan, :) Smoga Bermanfaat :D

    BalasHapus