728x90 AdSpace

Saturday 25 January 2014

How To Add Navigation Menu Bar To Blogger


Share It With Your Friends





Add Navigation Menu Bar To Blogger


You can Add navigation menu easy. try these steps.


1. Go to blogger dashboard and click Layout and
 click Page Element

Read This : How To Add Adsense Ads Inside Blogger Every Post


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.

Add Navigation Menu Bar To Blogger

Style 1.


Add Navigation Menu Bar To Blogger




<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:



Add Navigation Menu Bar To Blogger

<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.
  • Blogger Comments
  • Facebook Comments

0 Comments:

Post a Comment

Top