So,what does a navbar look like?
so how to add a navbar to your site?(I'll explain for blogger, .com is similar to)
I find it from http://www.reallifeblog.net ,
original post from 'Tips for New Bloggers' in Bizwhiz's post entitled ' Add Page Element to Blogger Header and Blog'.
so I'll just quote some and rearrange it for a better understanding,
go to layout > edit HTML(to get access to your blog's CSS code)
/* menubar */
#newnavbar ul li{
background: #FFFFFF;
}
#newnavbar ul li{
font-size:100%;
font-style:italic;
font-family:Times;
font-weight:bold;
list-style-type:none;
display:inline;
margin:50px;
}
#newnavbar li a{
color:#7E587E;
}
#newnavbar li a:visited {
color: #7E587E;
}
#newnavbar li a:hover {
color: #B93B8F;
background: #CAF99B;
}
body#layout #main,
body#layout #sidebar {
padding: 0;
}
paste the following code into there(someplace below the <body>;
Then go to Layout > page element > Add an HTML/JavaScript gadget
<div id="newnavbar"> <ul> <li><a href="http://www.blogger.com/URL%20of%20your%20Home%20page">Home</a></li> <li><a href="http://www.blogger.com/URL%20of%20your%20About%20page">About</a></li> <li><a href="mailto: Your Email Address">Contact</a></li> </ul></div>
substitute the " " in href with real address and its done!
In case you have no right place to put your gadget into,
go to layout > edit HTML
Find
<div id="header-wrapper"> <b:section class="header" id="header" maxwidgets="1" showaddelement=" no">
</b:section></div>
adjust maxwidgets yourself--its the maximum widgets can have around your header,
change showaddelement to 'yes'
similarly,find
<div id="main-wrapper"><b:section clas="main" id="main" showaddelement=" no">
</b:section></div>
change showaddelement to 'yes'
<div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align:center"> <b:section class="crosscol" id="crosscol" showaddelement=" no"></b:section></div>
</div>
change showaddelement to 'yes'
Now you can have the navbar exactly the same as the picture above. You may also wanna learn how to create image based navbar:here
Enjoy site crafting in order to make money online.
No comments:
Post a Comment