Mar 17, 2012

Cara Membuat Footer Banyak Kolom

Footer dalam template blog berfungsi persis dengan sidebar. Bisa untuk menempatkan widget, terutama untuk widget / gadget yang mungkin dianggap kurang penting. Mengapa saya sebut kurang penting, karena rata-rata widget di footer adalah widget yang kurang mendukung SEO.  widget iklan misalnya, saya yakin teman-teman blogger memasang iklan adsense dan sejenisnya pasti di bagian header atau sidebar. sebetulnya banyak fungsi footer yang lain, jika disidebar blog penuh dengan iklan, bisa kita taruh widget recent posts, random posts ataupun follower. Dan bisa jadi jika kita tempatkan gadget di sidebar mungkin bisa membuat berat loading blog kita.

Oke, di bawah ini tutorial lengkap bagaimana cara membuat footer banyak kolom, di sini saya akan mencontohkan cara membuat footer 4 kolom.


  1. Masuk ke akun  Blogger sobat > Klik Design/Rancangan > Edit HTML
  2. Backup  Template sobat
  3. cari kode  ]]></b:skin>
  4. sebelum kode ]]></b:skin> masukkan kode di bawah ini;

    #kaki {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #kaki-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #kakibar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .kakibar {margin: 0; padding: 0;}
    .kakibar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .kakibar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .kakibar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .kakibar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .kakibar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .kakibar li a:hover {
    text-decoration:underline;
    }
    .kakibar li:hover {
    display:block;
    background: #222;
    }

5. Kemudian cari kode </body> dan masukkan kode di bawah ini di atasnya kode </body>


    <div id='kaki'>
    <div id='kaki-wrapper'>

    <div id='kakibar-wrapper'>
    <b:section class='kakibar' id='kakibar1' preferred='yes'>
    </b:section>
    </div>

    <div id='kakibar-wrapper'>
    <b:section class='lowerbar' id='kakibar2' preferred='yes'>
    </b:section>
    </div>

    <div id='kakibar-wrapper'>
    <b:section class='kakibar' id='kakibar3' preferred='yes'>
    </b:section>
    </div>

    <div id='kakibar-wrapper'>
    <b:section class='kakibar' id='kakibar4' preferred='yes'>
    </b:section>
    </div>

    <div style='clear: both;'/>
    </div> </div>
6. Simpan template dan selesai.

Tampilannya nanti akan seperti gambar di bawah ini. 


Modifikasi dan pengaturan footer;
  • untuk menambah atau mengurangi lebar seluruh widget silakan ubah lebar / width 960px; dan sesuaikan dengan lebar template sobat.
  • jika sobat ingin membuat 3 kolom saja hapus kode berwarna hijau di atas, namun juga sesuaikan ukuran widgetnya yang awalnya 23% menjadi 30%

<div id='kakibar-wrapper'>
    <b:section class='kakibar' id='kakibar4' preferred='yes'>
    </b:section>
    </div>

  • sedangkan jika ingin menambahnya menjadi 5 kolom copy saja kode di atas, kemudian ubah kakibar4 menjadi kakibar5, dan ubah persentasenya menjadi 16% atau 17%
  • Untuk mengubah warna background footer silakan sobat berimprovisasi sendiri, hehe atau masuk ke tool Kode warna untuk mengetahui kode warna yang diinginkan 
  • Akhir kata Wassalam, selamat mencoba. 

12 comments:

  1. waaaa... bagus buat space iklan nick sob...!!! waaa kalau butuh nnti kesini ahhhhh....!!! nice sahre sob...!!!

    ReplyDelete
  2. Nah, ini tutorial yang mantap,, ada yang buat WP ga?
    Kunjungan balik sob :)

    ReplyDelete
  3. artikel yang sangat bermanfaat
    bisa diterapkan di blog saya. :D

    superrefreshing.blogspot.com

    ReplyDelete
  4. Berhasil diterapkan...
    terima kasih sebesar-besarnya...

    ReplyDelete
  5. Trima kasih,,,kebetulan lagi belajar blog. akhirnya bisa mampir di blog sobat...ilmunya bermanfaat

    ReplyDelete
  6. sangat bermanfaat, ,jngan lupa mampir di blog saya mas, di tunggu kritik dan sarannya

    ReplyDelete
  7. keren keren.... saya seneng bisa mendapatkan ilmu web ini

    ReplyDelete
  8. ma kasih ya om infonya
    saya masih newbie
    lihat dan berkunjunglah di blog saya ya om
    di http://m4riberbagi.blogspot.com/
    thanks
    Likes n Bergabung ya om

    ReplyDelete
  9. mantapppppp......
    artikelnya....

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih