Featured Post (TOP)

27 Juli 2009

Cara Membuat Footer Navbar / Navbar Bawah



Pada kesempatan kali ini aku akan membaas tentang Cara Membuat Footer Navbar / Navbar Bawah. apa sih Footer Navbar / Navbar Bawah itu...??? Footer Navbar /Navbar Bawah itu sama seperti Strip Ad yang sebelumnya pernah aku bahas (kalau yang belum baca klik disini), tetapi kalau yang ini muncul pada bagian bawah blog kita.

sebagai contoh kalian bisa lihat di blog ku.
tidak banyak basa-basi langsung aja kita ke caranya :

1. Masuk ke Blogger -> Tata Letak -> Edit Html
2. Copykan kode berikut di atas kode ]]></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;
}


3. selanjutnya, masukkan kode berikut persis diatas kode </body>


<div id='navbar-footer'>
<p>
<img border='0' src='http://i595.photobucket.com/albums/tt40/rassiv/th_User-32x32.png'/>&#160;&#160;<a href='http://www.rassiv-web.co.cc'>Rassiv's Blog</a>&#160;&#169;&#160;2009-2010 <img border='0' src='http://www.mylivesignature.com/signatures/54487/240/54B382033CC46BF2A3C8D4D63FB5DF43.png'/></p>
<p class='info'>Creted &amp; Edited by <a href='http://www.rassiv-web.co.cc' target='_blank'>Rassiv Blog</a> | <a href='#' title='Back to Top'><- Back To Top -></a>
<br/>Best viewed in <img border='0' src='http://wiki.site5.com/images/f/f8/Firefox_icon.png'/> Email : <img border='0' src='http://i290.photobucket.com/albums/ll256/angkatan2006/icon/icon-email-small.png'/> rassiv.q@gmail.com
<br/>
</p>
</div>


* Silahkan Ubah teks berwarna merah sesuka kamu

4. SIMPAN dan selesai deh.... silahkan kamu lihat hasilnya

*Semoga Bermanfaat*

 

Subscribe to our Newsletter

Contact our Support

Email us: Support@templateism.com

Our Team Memebers