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. 

Tweet

Subscribe to receive free email updates: