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
Pengikut
10 komentar:
Kamu bisa dapetin ilustrasi wajah yang sesuai dengan wajah kamu di moselo.com/Bikingemeys. Jangan lupa ada promo jika pesan dari aplikasinya langsung.
Langganan:
Posting Komentar (Atom)
Postingan Populer
-
Nokia Indonesia merilis varian Asha terbaru. Seri untuk kelas bawah ini hadir dengan sentuhan baru. Terutama dari segi kemudahan berbagi fil...
-
Setelah kita memiliki blog tentu yang perlu dilakukan selanjutnya adalah mengelola dan mempublikasinya. Mengelola berarti selalu melakukan p...
-
Seakan diingatkan oleh Mbak Hanan karena di blog saya belum pernah menulis tentang bagaimana membuat link read more disetiap postingan blog...
udah diaplikasikan di tempat saya... hewhewhew
BalasHapuspro anang : tepat sekali contohnya!
BalasHapuswah, mantap...
BalasHapusdah liat di blog mas Anang...
Keren juga yah...
Boleh dicoba khan?
pro bobby : jelas silakan dicoba....:)
BalasHapusmas Agus, knp bottom navbarku ga bener2 di bawah/dasar ya? coba tengok ya...thanks
BalasHapuspro fajar : aku dah tengok blognya, dan aku liat pake firefox, nampak tepat di bagian bawahnya. and pakai browser apa?
BalasHapuskalo untuk wordpress masangnya gimana ya? thanks alot...
BalasHapusselama wordpressnya bisa diedit CSSnya, sebenarnya hampir sama, untuk di wordpress biasanya di satu file css tertentu, lokasinya bisa menyesuaikan untuk pemasangan kodenya.
BalasHapusmaksih infonya..
BalasHapusslam knl...
Salam kenal kembali Alfi!
BalasHapus