Cara Membuat Footer 3 Kolom di Blogger

Anda pasti telah melihat blog-blog komersial atau blog profesional yang menggunakan footer 3 kolom. Blog-blog tersebut memanfaatkan kolom-kolom tersebut di footer untuk menambahkan widget untuk menampilkan berbagai informasi-iformasi penting dan menarik.

Footer dengan 3 kolom sangat berguna untuk memudahkan pengguna mengeksplorasi informasi-informasi yang tidak dapat ditampilkan di posisi tengah atau bagian header blog.

Footer yang akan dibuat berikut terdiri dari 3 kolom yang dapat dimafaatkan untuk menambahkan berbagai widget  yang Anda inginkan sebanyak-banyaknya.

Preview footer template blogger 3 kolom.

Berikut langkah-langkahnya:
Buka Dashboard Blogger > Template > Edit HTML
Tekan CTRL+F untuk mengaktifkan fitur pencarian dan cari ]]</b:skin>
Copy Paste kode css berikut diatas kode tersebut

/* -----   SEKSI LOWER ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
} 
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; 
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

Kini cari kode </body> lalu copy paste kode berikut diatas kode tersebut

<div id='lower'>
    <div id='lower-wrapper'>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar2' preferred='yes'>
    </b:section>
    </div>
    <div id='lowerbar-wrapper'>
    <b:section class='lowerbar' id='lowerbar3' preferred='yes'>
    </b:section>
    </div>
    <div style='clear: both;'/>
    </div> </div>

Simpan template Anda. Selesai!