Pengikut

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

10 komentar:

  1. udah diaplikasikan di tempat saya... hewhewhew

    BalasHapus
  2. pro anang : tepat sekali contohnya!

    BalasHapus
  3. Anonim1:56 PM

    wah, mantap...
    dah liat di blog mas Anang...
    Keren juga yah...
    Boleh dicoba khan?

    BalasHapus
  4. pro bobby : jelas silakan dicoba....:)

    BalasHapus
  5. mas Agus, knp bottom navbarku ga bener2 di bawah/dasar ya? coba tengok ya...thanks

    BalasHapus
  6. pro fajar : aku dah tengok blognya, dan aku liat pake firefox, nampak tepat di bagian bawahnya. and pakai browser apa?

    BalasHapus
  7. kalo untuk wordpress masangnya gimana ya? thanks alot...

    BalasHapus
  8. selama wordpressnya bisa diedit CSSnya, sebenarnya hampir sama, untuk di wordpress biasanya di satu file css tertentu, lokasinya bisa menyesuaikan untuk pemasangan kodenya.

    BalasHapus
  9. maksih infonya..
    slam knl...

    BalasHapus
  10. Salam kenal kembali Alfi!

    BalasHapus

Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.

Postingan Populer