CSS : Bottom Navbar

Bagaimana memasang navbar di bagian paling bawah blog, sekaligus memunculkanya selalu mesti halaman tergulung ke atas/bawah (<i>scroll up/down</i>)?

Navbar...tedengar akrab di telinga kan? Kita sering mendefinisikan navbar sebagai sebuah lajur horisontal setinggi 30 pixel yang terletak tepat di <i>ubun-ubun</i> blog yang beralamat di blogspot. Tentu paham kan? edittag juga sempat membahas gosip berkenaan dengan keberadaannya.

Nah bila kini muncul istilah navbar bawah, maka jangan terlanjur curiga dengan mencari-cari di bagian bawah blog, karena memang tak akan menemuinya di blog standar. Istilah ini lahir untuk memudahkan penyebutan terhadap baris yang sama seperti tampilan navbar, namun penampakanya sesuai dengan namanya, berada di bagian bawah blog.

Sangat tepat untuk memasang label karya cipta (copyright) atau sekedar penyampain kredit terima kasih untuk pendukung layanan tertentu.

Ada beberapa penyesuain kode CSS untuk menambahkan navbar ini. Kita bisa memasangnya menjadi satu di bagian #footer, atau juga menciptakan sebuah id baru untuk menyebut navbar ini. Ini juga punya kelebihan agar tak bertubrukan dengan kode CSS lainya bila misalnya kita menggabungkan dengan bagian #footer.

Salin kode CSS berikut di bagian CSS blog kita. Bisa ditempatkan di bagian mana saja selama diatas </head>. Tentu setelah kita mengklik tautan Edit HTML di blog yang akan kita tambahkan.

/* 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 menuju ke bagian paling bawah di Edit HTML, cari bagian paling bawah sebelum </body> Disinilah kita akan menampilan tulisan sebagai konten yang akan termuat di bagian navbar-bawah.

<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 kita bisa mencoba mengintip hasilnya dengan menekan tombol <b>[Pratinjau]</b>. Bila puas akan hasilnya bisa langsung tekan tombol <b>[Simpan Template]</b>.

Bagi yang masih ingin mengutak atik bagian ini, kita juga bisa menambahkan gambar misalnya. Tinggal kita sesuaikan dengan penambahan CSS penyertanya.


Kabarkan ke teman blog ini

Free Tell-a-Friend by Bravenet.com