Pasang Float Bottom Navbar

Hmm.. navbar sepertinya tidak asing di telinga kan !? Kita biasa mendeskripsikannya sebagai sebuah kotak setinggi 30 pixel yang terletak pada bagian kepala blog yang beralamat di blogspot ! Loh tapi tunggu dulu navbar memang biasanya berada di ubun-ubun blog tapi kok ini posting judulnya pasang bottom navbar sih :t

Jangan panik dulu, di bagian bawah blog memang tidak ada navbarnya (coba saja cari!) makanya saya mau berbagi ilmu tentang bagaimana caranya membuat bottom navbar atau navbar di bagian bawah blog yang selalu akan tampak di layar meskipun halaman tergulung ke atas/bawah (scroll up/down), sesuai dengan namanya kan ‘float bottom navbar’ !

Navbar yang modelnya seperti ini pas banget untuk menampilkan label karya cipta (copyright) atau mungkin menu navigasi lain yang cocok dipasang di bagian bawah ! Halah penjelasnku ga mudengi ya :t

Akan seperti apa jadinya navbar ini kita coba saja yuk, salin kode CSS di bawah ini dan paste di bagian CSS dari template blog. Pastinya setelah kita mengklik tautan Edit HTML pada blog yang akan kita otak-atik !

/* Navbar-bawah
----------------------------------------------- */
#bottom-navbar p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:150px;
line-height: 1.2;
vertical-align: bottom;
}

#bottom-navbar p.desc {
float: right;
padding-right:150px;
line-height: 1.5;
height: 100%;
vertical-align: bottom;
}

#bottom-navbar {
align: center;
position: fixed;
border-top: 1px solid #ccc;
border-bottom: 5px solid #ccc;
background-color: #fff;
width: 100%;
left: 2px;
text-align: center;
color: #000;
font-family: verdana;
font-size: 12px;
opacity: 0.9;
filter: alpha(opacity: 90);
z-index:10000;
bottom:0;
}

Setelah itu kita langsung meluncur ke bagian paling bawah dari Edit HTML, cari kode </body>, disinilah navbar akan dimunculkan. Salin kode berikut dan paste di atas kode </body> !

<div id='bottom-navbar'>
<p>
copyright : <a href='http://alamatblogku.blogspot.com'><b>Blogku</b></a></p> |
<p class='desc'>Powered by <a href='http://www.blogger.com'>Blogger</a>
<br/>
</p>
</div>

Setelah itu lakukanlah pratinjau, bila puas maka simpanlah :D

NOTE
Bagian kode CSS dan kode HTML bisa Anda otak-atik agar bisa menjadi seperti yang Anda inginkan !