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.
- Masuk ke akun Blogger sobat > Klik Design/Rancangan > Edit HTML
- Backup Template sobat
- cari kode ]]></b:skin>
- 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 |