Menebar ilmu | berbagi informasi | dan tegakan sunah

Cara Memasang Float Navbar di blog

"float Navbar adalah ( navbar melayang) maksudnya navbar ini tidak menempel pada element blog, sehingga jika scroll Up/Down, maka navbar ini akan tetap berada di bagian bawah blog anda.
contohnya lihat di bawah blog,lihat cara juga(Cara Membuat navbar Autohide di Blog)
bila agan tertarik membuat float navbar berikut langkah-langkahnya ;

"loggin ke blogger >> Layout  >>HTML/Javascript (jangan lupa click "Expand Widget Template")nda cari coke ini: ]]></b:skin> (untuk menghemat waktu guanakan pencarian cepat dengan menekan CTRL=F di keyboard


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

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

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

#navbar-bawah a {
color:#FFFFFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #FF8000;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px transparent #ddd;
border-bottom: 1px transparent #FF8000;
background-color:#0B0B0B;
width: 100%;
left: 0px;
text-align: left;
color: #DF7401;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

nb; 
ganti kode warna merah dengan warna yang di inginkan


  • Selanjutnya cari kode: </body> , kemudian anda letakan kode dibawah ini, tepat diatas kode: </body>
<div id='navbar-bawah'>
<p><img border='0' src='http://sites.google.com/site/centralifo/background/LINK_EXCHANGE.jpg'/>&#160;&#160;&#160;

<a href='http://www.blogger.com/profile/09605865706748083663' target='_blank'> Authorized by</a>
&#160;&#160;&#160;<img border='0' src='http://sites.google.com/site/centralinfo/background/note.jpg'/></p>

<p class='info'><a href='ymsgr:sendIM?xco_only'> <img src='http://opi.yahoo.com/online?u=xco_only&amp;m=g&amp;t=2&amp;2=us' style='width: 148px; height: 30px;'/></a> </p>

<p class='info'>Powered by <a href='http://www.blogger.com'>centralinfo</a> |
<a href='http://www.centralinfo1.blogspot.com' target='_blank'>http://centralinfo1blogspot.com</a><br/>
Copyright © 2009</p>
</div>



  • "Preview" sebelum anda "Save Template".
 keterangan:
  • Ganti URL yang berwarna merah dengan URL logo blog anda.
  • Ganti URL yang berwarna hijau dengan URL profile anda.
  • Ganti URL yang berwarna Orange dengan URL foto/avatar anda.
  • Ganti "xco_only" dengan Yahoo Messanger ID anda.
  • Ganti tulisan-tulisan yang berwarna biru sesuai dengan blog anda.

ARTIKEL TERKAIT:

2 komentar:

  1. Tutorail yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com

    BalasHapus