You can Add navigation menu easy. try these steps.
1. Go to blogger dashboard and click Layout and
2. Click Add Gadget and select HTML/JavaScript widget.
3.You can see navigation bars code below.you can copy the code paste it to
inside HTML/JavaScript widget.
3.You can see navigation bars code below.you can copy the code paste it to
inside HTML/JavaScript widget.
Style 1.
<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
Style 2:
<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"><li><a href="Link 1"><span>Name 1</span></a></li><li><a href="Link 2"><span>Name 2</span></a></li><li><a href="Link 3"><span>Name 3</span></a></li><li><a href="Link 4"><span>Name4</span></a></li><li><a href="Link 5"><span>Name 5</span></a></li><li><a href="Link 6"><span>Name 6</span></a></li><li><a href="Link 7"><span>Name 7</span></a></li></ul> </div>
4. In this codes you can see, Name is what u have to put on navigation menu( Home, Contact us.About me)
5: Link is what You put on there as name,Its URL.
6. Now save template and see. you are done.
0 Comments:
Post a Comment