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;
}
--------------------------------------- */
#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'/>   
<a href='http://www.blogger.com/profile/09605865706748083663' target='_blank'> Authorized by</a>
   <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&m=g&t=2&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>
<p><img border='0' src='http://sites.google.com/site/centralifo/background/LINK_EXCHANGE.jpg'/>   
<a href='http://www.blogger.com/profile/09605865706748083663' target='_blank'> Authorized by</a>
   <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&m=g&t=2&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".
- 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:
bagus ,,, menarik ya
BalasHapusTutorail 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