Cara Menambah Footer 3 Kolom di Blogspot

Kebetulan sekali malam ini sebenarnya saya mau posting tentang bagaimana Cara Menambah Footer 3 Kolom di Blogspot, nah pas cek komentar di salah satu artikel saya ada sahabat blogger (Ndolem: http://www.ndolem.com/) request tentang Footer tadi.

Menambah footer entah itu 2 kolom, 3 kolom atau 4 kolom di bawah postingan sudah menjadi hal yang umum, jika berbicara tutorial sudah banyak juga yang buat, tetapi terkadang beberapa kode yang disebutkan tidak dapat ditemukan (karena templates tidak support) atau bisa jadi ada perbedaan kode, sehingga mengurungkan niat untuk membuat footernya.

Nah, anggap saja ini adalah Alternatifnya (apabila teman-teman ingin membuat footer tapi harus mengganti kode tapi kode yang dimaksud tidak ada) karena kita tidak perlu menghapus tetapi hanya menambahkan saja.

Fungsi:

Footer (3 kolom) digunakan untuk membuat space di dalam blog agak luas di bagian bawah sehingga tidak membuat sisi sidebar penuh (karena tambahan widget ini dan itu).

Kebetulan templates blog saya yang sekarang ini sebelumnya tidak memiliki footer sehingga saya harus menambahnya secara manual, dan caranya seperti di bawah ini.

Ok, buat teman-teman yang ingin Menambah Footer 3 Kolom di Blog nya, silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Lalu cari kode berikut: ]]></b:skin>

4. Tambahkan kode di bawah ini persis berada di atas kode tadi:

/* bottom
---------------------------- */ #bottom {
width: 900px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background: transparan;
padding: 15px 0 15px 0;
}
#bottom h2 {
text-align:center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#AEB404;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #AEB404;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: transparan;
}

#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

5. Teruskan dengan mencari kode berikut:

<div id='footer-wrapper'>

atau

<div id='footer'>

(biasanya ada di atas kode </body>)

6. Dan tambahkan kode di bawah ini persis berada di atas kode tadi:

<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

7. Jika sudah klik Save Templates (lihat perubahan sementara pada bagian Page Element).

Note:

Harap diperhatikan kode-kode yang saya beri warna di atas:

a. Untuk kode width: 900px; harap disesuaikan dengan lebar header blog masing-masing (kode: #header {), jika lebar header 660px, maka diganti width nya 660 px,

b. Untuk merubah warna judul Footer harap ganti pada kode #bottom h2 { ..... color:#AEB404; [kode warna bisa dilihat di menu tab di atas]

c. Lalu perhatikan kode di bawah ini:

#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

Harap disesuaikan width nya untuk memberi jarak pada masing-masing element, misal total width-nya 100%, maka kita beri jarak masing-masing dengan total 4%, maka sisanya adalah 96%, lalu kita bagi sehingga masing-masing element mendapat luas 32%.

Nah, seperti itulah teman-teman bagaiman Cara Menambah Footer 3 Kolom di Blogspot, semoga cara ini bisa bermanfaat dan diterapkan di blog masing-masing, selamat mencoba. Salam...