<style type="text/css">
div.menubar{
color: #000000;
background-color: #000000;
width: 960px;
padding: 5px; }
a.menu{
width: 100px;
text-align: center;
font-family: Verdana;
font-style: normal;
font-size: 9pt;
font-weight: bold;
color: #5CB3FF;
text-decoration : none;
background-color: #153E7E;
padding: 3px;
border-style : outset ;border-color: #153E7E; border-width: largest; }
a.menu:hover{
color: #153E7E;
background-color: #5CB3FF;
border-style: inset ;border-color: #153E7E;border-width: medium; }
</style>
<div class="menubar">
<a class="menu"
href="URL">OPTION1</a>
<a class="menu"
href="URL">OPTION2</a>
<a class="menu"
href="URL">OPTION3</a>
</div>
<style type="text/css">
div.menubar{
color: #000000;
background-color: #000000;
width: 960px;
padding: 5px; }
a.menu{
width: 100px;
text-align: center;
font-family: Verdana;
font-style: normal;
font-size: 9pt;
font-weight: bold;
color: #5CB3FF;
text-decoration : none;
background-color: #153E7E;
padding: 3px;
border-style : outset ;border-color: #153E7E; border-width: largest; }
a.menu:hover{
color: #153E7E;
background-color: #5CB3FF;
border-style: inset ;border-color: #153E7E;border-width: medium; }
</style>
<div class="menubar">
<a class="menu"
href="URL">OPTION1</a>
<a class="menu"
href="URL">OPTION2</a>
<a class="menu"
href="URL">OPTION3</a>
</div>
Add this code in a sidebar widget to make vertical navigation buttons or add this code below the header to make horizontal navigation buttons.
Replace the URL with the link you want the button to link to.
Replace OPTION# with the name you want for the button.
This code has 3 buttons on it already to add more just go to the bottom of this code and add the following code below between the div tags
<a class="menu"
href="URL">OPTION1</a>
href="URL">OPTION1</a>
Tweak the color and font modifiers to what you want and save.
Really you don't have to change the font in less you want a different look then normal font.
You will have to change the width to the size of you blog. You may have to play around with this to get it right.
5 comments:
I want to make my blog system like yours. ie Only 1 blog post(welcome note) on homepage and others in side navigation bar. I saw ur code for navigation bar. Tell me how can I just show single post on homepage. The homepage should not show all new and updated post.
You just need to go to Settings--> Formatting and you will see the option there. Now their is another option in the Page Elements under the Blog Post Edit. But this option has a bit glitch and will not allow to show only one post. So you are forced to do if from the setting which will allow 1 post per page.
oh..thank you..that was easy.
Ok, have my navigation buttons working and they look great on Firefox but when I pull the page up in Safari it looks like crap. Am I missing something or is there some magic code that makes Safari play good with this code? My site is http://joeridesblog.blogspot.com
They look the same to me from browser to browser. Try updating your Safari browser. Also I did notice a few syntax errors in my coding which could of caused them. While Firefox and chrome can read past the errors some inferior browsers have trouble rendering properly.
Post a Comment
Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.