Header Ads

  • Breaking News

    How To 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

    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.                             
                                                     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>Name 4</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> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul>
    <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 3:


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


    Style 4:

    <style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul>
    <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> 
    

    No comments

    Post Top Ad

    Post Bottom Ad