In This Tutorial You Will Learn How To Add Simple Navigation Bar In Blogger Blog. Navigation Bar Is Good For Visitor To Find Links Easily.Now a days people find easy way to navigate just take an example of phonebook. To Add Navigation Bar In Your Blog Follow The Steps Below.But how the navigation look like see image below anything you want new tell me. Let's get to tutorial.
4. Replace The Above Code With The Following Code.
5. Now Search For The Following Code In Template Using Ctrl+F.
6. Paste The Code Below After Above Code In Your Template.
7. If It Show Navigation Bar On Left Then Add Above Code After First Div Tag.
8. You Are Done.
Note: Replace Your Links With #.
 |
| Horizontal Navigation For Blogge |
- Login To Blogger Account.
- First backup your template.
- Go To Design > Edit HTML.
- Tick Expand Widget Templates Checkbox And Search For The Following Code Using Ctrl+F.
]]></b:skin>
4. Replace The Above Code With The Following Code.
#homemenu{background:#fdfdfd;display:block;font:18px Cambria;font-weight:400;height:31px;border-bottom:1px solid #ccc;padding:0}
#hmenu a{color:#333;display:block;font-weight:400;border-right:1px solid #ccc;padding:5px 10px}
#hmenu a:hover{background:#f9f9f9;color:#333;display:block;text-decoration:none;margin-bottom:1px}
#hmenu,#hmenu ul{height:29px;list-style:none;margin:0;padding:0}
#hmenu li{height:29px;float:left;margin:0;padding:0}
]]></b:skin>
#hmenu a{color:#333;display:block;font-weight:400;border-right:1px solid #ccc;padding:5px 10px}
#hmenu a:hover{background:#f9f9f9;color:#333;display:block;text-decoration:none;margin-bottom:1px}
#hmenu,#hmenu ul{height:29px;list-style:none;margin:0;padding:0}
#hmenu li{height:29px;float:left;margin:0;padding:0}
]]></b:skin>
5. Now Search For The Following Code In Template Using Ctrl+F.
<body>
6. Paste The Code Below After Above Code In Your Template.
<!--Home Menu Starts-->
<div id='homemenu'>
<div id='hmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li></ul>
</div>
</div>
<!--Home Menu Ends-->
<div id='homemenu'>
<div id='hmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#' rel='author'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li></ul>
</div>
</div>
<!--Home Menu Ends-->
7. If It Show Navigation Bar On Left Then Add Above Code After First Div Tag.
8. You Are Done.
Note: Replace Your Links With #.
0 comments:
Post a Comment