Membuat Footer bar static bottom menggunakan CSS.

Terima kasih untuk sahabat dotcom-ilmu semua yang sudah mampir ke website saya, kali ini saya akan coba sharing mengenai footer bar static yang ada di website ini. Footer bar ini menggunakan CSS untuk menentukan letak footer agar menjadi static di bawah. Jadi footer akan terlihat terus dibagian bawah walaupun halamannya di scroll sampai bawah.

OK! Langsung aja Gan, Cekidot:

1. Buatlah background gambar guna warna dasar footer gambar anda, buatnya dengan pixel kecil saja, karena gambar akan kita looping/repeat menggunakan CSS.

2. Cari kode ]]></b:skin> dan paste code dibawah ini diatas code itu.

.botnav{
 width:100%;
 height:45px;
 position: fixed;
 bottom:0px;
 background-image:url('https://lh4.googleusercontent.com/-0opHluj4hwk/TrtvRO6EfNI/AAAAAAAAAyk/XlFtGfZFQxI/s128/footerbar.png');
 background-repeat:repeat-x;
 z-index:1;
 color:#FFF;
}
.botspacer{
 height:38px;
}
.botnav a:link {
 color: #EE1C24;
 text-decoration: none;
 font-size: 12px;
 font-weight:bold;
        padding-left:20px;
        padding-right:20px;
}
.botnav a:visited {
 color: #EE1C24;
 text-decoration: none;
 font-size: 12px;
 font-weight:bold;
}
.botnav a:hover {
 color: #FFF;
 text-decoration: underline;
 font-size: 12px;
}
.botnav a:active {
 color: #FFB720;
 text-decoration: none;
 font-size: 12px;
}
#tengah{
 padding-top:10px;
}
#tengah1{
 padding-left:50px;
}
/*-------------- Akhir dari style navigasi buat bawahnya -----------------*/

3. Lalu cari kode </body> dan paste code dibawah ini di atas itu.

Home
      | PHP
      | Android
      | Java
      | Trik and Trik

Selesai! Ga Sulit kan? Hehehehe… Selamat Mencoba! Hasilnya dapat diimplementasikan seperti dibawah ini.