Karena sering ditanya tentang bagaimana caranya membuat footer/footbar dengan 3 kolom (Biasanya nanyanya gini: "Mas cara membuat footer dg banyak kolom yg kayak punya mas gmn? yg ada "Posting Terbaru", "Komentar Terbaru", "Tombol Koleksiku", "Our Sponsor" itu lho). Ya kan? Hayo ngaku... Footerbar multi kolom itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya sudah dari dulu ingin posting tentang itu, tapi karena malas posting akhirnya aku tunda sampai sekarang, Maaf yah bagi yang sudah bertanya kepada saya yang kebanyakan lewat kontak form blog ini karena baru bisa aku jawab sekarang. Dan sebenarnya juga footer multi kolom seperti ini bukan aku yang buat tapi aku cuma adaptasi dari template gratisan yang aku dapatkan dari
themelib.com terus aku modifikasi sendiri :)
Bagi yang belum paham apa itu footer multi kolom bisa lihat sendiri di bagian footer pada blog ini atau bisa juga
disini :D (hehe sambil promosi nuy).
Lalu seperti ini cara membuat footer multi kolom tersebut:
Step 1
Login ke Blogger terus pilih menu "Layout --> Edit HTML". Seperti biasa Back Up dulu template yang sedang kamu gunakan jadi jika terjadi hal yang tidak diinginkan bisa langsung diinstal kembali! Oh iya untuk tutorial kali ini aku pakai template Minima untuk contoh.
Step 2
Cari kode ini ]]></b:skin>. Kemudian masukkan kode di bawah ini sebelum kode ]]> atau kedalam tag CSS! /* Footer
------------------------------------------- */
#footer {
background: #000000; /* Warna Background Footer */
width: 871px; /* Lebar Footer Secara Keseluruhan */
height: 350px; /* Tinggi Footer Secara Keseluruhan */
color: #fbfcbf; /* Warna Teks Footer */
font-size: 11px; /* Ukuran Teks Footer */
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
text-align: left;
padding-bottom: 5px;
position: relative;
line-height: 17px;
border-top: 3px solid #535353; /* Warna Border Atas Footer */
border-bottom: 1px solid #535353; /* Warna Border Bawah Footer */
}
#footer p {
color: #ffffff;
font-size: 86%;
padding: 2px 0px 0px 0px;
list-style-type: none;
margin: 0px;
}
#footer h2 {
color: #e9fdff; /* Warna Judul Widget Footbar */
font-family: Trebuchet, Trebuchet MS, Arial, Tahoma, Verdana;
font-size: 14px;
font-weight: bold;
border-bottom: 2px dashed #535353; /* Garis Bawah Judul Widget Footbar */
padding: 0px 0px 1px 0px;
margin: 7px 0px 0px 0px;
text-transform: uppercase;
}
#footer a {
color: #017F8D; /* Warna Link Footer */
text-decoration: none;
}
#footer a:hover {
text-decoration: none;
}
#footer ul {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
#footer ul li {
display: inline;
padding: 0px;
margin: 0px;
}
#footer ul li a {
display: block;
color: #ffffff;
text-decoration: none;
margin: 0px;
padding: 5px 0px 5px 0px;
border-bottom: 1px dotted #f0f0f0;
}
#footer ul li a:hover {
background: #fff4f4;
color: #017F8D;
text-decoration: none;
}
.footerleft {
float: left;
width: 200px; /* Lebar Footbar Kiri */
margin: 0px 0px 0px 20px;
padding: 0px;
display: inline;
}
.footermiddle {
float: left;
width: 190px; /* Lebar Footbar Tengah */
margin: 0px 0px 0px 20px;
padding: 0px;
display: inline;
}
.footerright {
float: right;
width: 265px; /* Lebar Footbar Kanan */
margin: 0px 20px 0px 0px;
padding: 0px;
display: inline;
}
Step 3
Jika langkah di atas sudah selesai maka selanjutnya Anda harus mencari kode berikut ini:
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
Jika sudah ketemu lalu replace dengan kode berikut ini:
<div id='footer'>
<div class='footerleft'>
<b:section class='ft' id='footerleft'>
</b:section>
</div>
<div class='footermiddle'>
<b:section class='fm' id='footermiddle'>
</b:section>
</div>
<div class='footerright'>
<b:section class='fr' id='footerright' showaddelement='yes'>
</b:section>
</div>
</div>
Step 4
Lakukanlah preview jika sudah sesuai lalu tekan save :D
Note
*Untuk mengubah warna seperti link, font, background, dll. Anda bisa merubah kode CSS-nya begitu juga jika Anda mau merubah lebar dan tinggi bagian dari footer!
*Jika Anda melihat letak footer tidak sesuai dengan template mungkin Anda salah meletakan kode HTML footer-nya (kode yang ada diawal step 3!), caobalah untuk memindahkan kodenya sampai Anda menemukan tempat yang cocok atau mungkin jika Anda tidak ingin repot letakan saja kodenya di atas kode </body> (kok ga dari tadi aja bilangnya) :(
Okay silakan mencoba “Don’t ask for it; Go win it on your own; Do that and you’ll be succeed”
