Blogger Footer Navbar

Bila anda ingin memodifikasi tampilan blog anda dan menampilkan navbar (navigational bar) seperti yang ada di bagian bawah atau footer dari Anang's Blog ini. Navbar tersebut senantiasa muncul pada bagian bawah blog kita, meskipun halaman tergulung (scrolled) ke atas maupun ke bawah.

Nah, untuk membuatnya berikut ini akan saya tunjukkan beberapa langkah-langkahnya. Pertama sekali tentunya anda harus login dulu ke akun Blogger anda. Buka Dasbor dan klik pada menu Layout dilanjutkan dengan menu Edit HTML dan beri tanda centang pada Expand Template Widget. Lalu pastekan kode CSS berikut ini persis sebelum tanda ]]></b:skin>:

#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#navbar-footer a {
color: #333;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}


Langkah selanjutnya, masukkan kode berikut persis sebelum </body>:

<div id="navbar-footer">
<p>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYfgdgefUEceQPlmQaiIxUYjGmroqqXUgFsknn9Gb7jjYkY4hDa3CBdSp2ypAgXUvWFE6o7NFbvgHRQWr-7tCMT2NJkBYCexgsDJdEyIOjL4HoOE-zPC6IYUtEY4Tm0T3MLnzB/s400/anang.jpg"/>&#160;&#160;<a href="http://anangku.blogspot.com/index.html">Anang's Blog</a>&#160;&#169;&#160;2006-2008 <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2WZt6VLV9a_U1Mkm-6X-2gn8mUEc8QbaAXN4IwzedjKmMBZZo8tzr9B5D7WT4uR3PjOtgOAJvPwc36Ee8SBi6PlLU2d0cCwCnsLCvyhx69n3lSnCkjohJOz2qXIKCdsbDQRgG/s400/signature.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.friendster.com/anangku" target="_blank">Anang</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution
<br/>
</p>
</div>

Ganti semua yang berhuruf tebal warna merah sesuai dengan keyakinan anda.. Halah.. Sesuai dengan blog dan identitas anda... Avatar, tandatangan, URL Blog/Friendster terserah anda...! Oke?

Selamat mencoba!

Source gambar dari wiki CA.
Inspirasi dari sini.