Through navigation menu visitors can easily navigate through different pages and labels. Bloggers and developers have released many stylish navigation menus used by vast number of new comers. We have found a very fancy navigation menu which can be easily used in blogger and its completely CSS based, so it will not slow down your page anyway.
DEMO
How to use navigation menu
Follow these easy steps:
- Log in to your blogger dashboard
- Click on Template >> Edit Html.
- Press CTRL + F
- Search for ]]></b:skin> and just above it paste the following code
#tabs31{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio7yCewDqoWBoFxzDqOHx_EuDnyJKQBf9X2psFH6_PsB-wGh0Q-eCh3Zr2gyJ9eFsv2BrfmtDOCCT7JPCxk0v7zw7WeyVx8obh6lNvXQoJPbp_SreEHCKY4pu8tYUQSmkSmScssOcVxmg/s1600/bgDIVIDER1.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#tabs31 ul{margin:0;padding:0;list-style-type:none;width:auto;}
#tabs31 ul li{display:block;float:left;margin:0;}
#tabs31 ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUAIgj9Sjzyc5DLnaqh-ZwWz_jUmLj7ti84Z9ltWkGpjraXx4XKPNMO1BSoTfHLvGJQe282fCM6Egmm7YEQFkKdwL4jHR_bhXTwTU15fOgWfgygIQ2JjAluvAq8Gh1xmKp41kWwuwYZhc/s1600/bgOFF1.gif) no-repeat top right;}
#tabs31 ul li a:hover,#tabs31 ul li a.current{color:#B30000;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3OGxTgObbTWT7auqQEzUDIggYDJU_ZeVMbcVhDKxGDFM4hPAnoX6aFrGLceadmknoAQJnVdDIemwUpTIB072rrDyOUx0wcuEDZGnjdWbYkZIywOnEct6iOG0eC5w8oYJMNPDPz83hYQ/s1600/bgON1.gif) no-repeat top right;}
Now we need to copy the HTML part of navigation menu.
- Find <div id="header-wrapper">.
- Just above it paste the following code
<div id="tabs31"> <ul> <li><a href="#" title=""><span>Home</span></a></li> <li><a href="#" title=""><span>About Us</span></a></li> <li><a href="#" title="" class="current"><span>Services</span></a></li> <li><a href="#" title=""><span>Our Work</span></a></li> <li><a href="#" title=""><span>Contact Us</span></a></li> </ul> </div>
Customization
- Edit Font Size
- The url of the menu
- Change the tabs name
What More!
This navigation menu is designed by CSS Portal and Ozynetwork has made some of the modifications in it. As it is completely CSS based, It is very light to use.
If you are facing any trouble regarding this menu, let us know, we will try to help you out.
About the Author
0 comments: