Cara Membuat Widget Footer Empat Kolom di Blogspot

Jika sobat melihat footer pada blog ini (lihat gambar di bawah ini), maka akan terlihat tampilan 4 kolom fooater di bawah posting artikel. 

Tidak sekedar ditampilkan tanpa tujuan, melainkan memang bagian footer ini mempunyai fungsi yang penting. 

Salah satunya adalah untuk menampilkan teks pendukung sebuah blog (seperti pada blog ini), link internal maupun eksternal dan tautan blog ane yang lain (Risalah Islam).

Desain Footer 4 kolom pada Blog FBI

Siapa yang ingin mencoba membuatnya? Silakan lakukan langkah di bawah ini.

Cara Membuat Widget Footer Empat Kolom di Blog

1. Jangan lupa berdo'a
2. Masuk akun blogger > Template > Edit HTML
3. Cari kode ]]></b:skin> dan Copas kode berikut ini di atasnya:

#lower {margin:auto;padding: 0px 0px 10px 0px;width: 100%;background:#333333;}#lower-wrapper {background:#333333;margin:auto;padding: 20px 0px 20px 0px;width: 960px; // Sesuaikan dengan lebar blog Andaborder:0;}#lowerbar-wrapper {background:#333333;float: left;margin: 0px 5px auto;padding-bottom: 20px;width: 23%; // Sesuaikantext-align: justify;color:#ddd;font: bold 12px Arial, Tahoma, Verdana;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;border:0;color:#ddd;text-transform:uppercase;font: bold 14px Arial, Tahoma, Verdana;}.lowerbar ul {color:#fff;margin: 0 auto;padding: 0;list-style-type: none;}.lowerbar 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;}.lowerbar li a {text-decoration:none; color: #DBDBDB;}.lowerbar li a:hover {text-decoration:underline;}.lowerbar li:hover {display:block;background: #222;}

4. Cari kode </body> and Copas kode berikut ini di atasnya:

<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 id='lowerbar-wrapper'><b:section class='lowerbar' id='lowerbar4' preferred='yes'></b:section></div>
<div style='clear: both;'/></div> </div>

6. Save template!
7. Setelah melakukan langkah 1 s/d 6 di atas, akan terlihat perubahan terhadap tata kelola pada tampilan layout blog Anda. Silakan klik "Layout" dan akan muncul Footer Widget baru seperti di bawah ini:

Note:
1. Untuk mengubah ukuran lebar ada di bagian "width: 960px;". Sesuaikan dengan lebar blog sobat. Jika belum tahu ukuran blog sobat, baca artikel sebelumnya.
2. Untuk mengurangi jumlah kolom/widgets menjadi 3 saja, hapus kode ini:

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

3. Untuk menambah jumlah kolom widget menjadi lebih dari empat, tambahkan kode di bawah ini dan letakkan di atas kode <div style='clear: both;'/>

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

4. Kode lowerbar# adalah jumlah kolom. Jadi, untuk menambahkan kolom kelima, ganti lowerbar# dengan lowerbar5.

5. Jika menambah kolom kelima, ubah width: 23%; menjadi width: 17%;

Demikian cara membuat widget empat kolom di blog
Sumber: