As promised to some of my readers, here’s a tutorial on awesome navigation or tab menu Version 2.0 for blogger user. I made it into a multi level, so you don’t have to go any further editing. Just replace your respective links with (#) sign and replace link title with your page or label title. I’ll end this amazing tutorial of new features by saying that we’re currently working on one another Application to include a bunch of cool Smart tools features. I won’t say what those features are just yet, but stay tuned—you’ll be seeing more cool stuff shortly! Got any questions? Or maybe, have something to add? Please leave a comment below and tell us what you're thinking about our updated Multi Level Navigation Menu Version 2.0 !!!…I have checked myself by operating that navigation menu is functional. (also see screen shot below.)
Now Let's Start Adding Navigation
1. Go to your Blogger Dashboard>> Template>> Edit HTML
2. and Look for the following code in your HTML.
]]></b:skin>
3. Paste the following code immediately above(before) it:
#css3_menu {
width: 960px;
height: 50px;
margin: 0px auto;
border-top: none!important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCPsUqBu-k2umUAUH76eaJxJSxYmQJ8lmyIK0u0JFrP7bTquvWVAYWLSoBwYQlZzZ9eR_aqlYWFO7qgUcbpSn0RII3ZQB74tkQZL7T7g7dvb9WXsHtM2SH5pc40XsNVDytxxRJNU6weFA/s1600/menu_bg.png) no-repeat;
}
#css3_menu, #css3_menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#css3_menu:before,
#css3_menu:after {
content: "";
display: table;
}
#css3_menu:after {
clear: both;
}
#css3_menu li {
float: left;
border-right: 1px solid #FFA722;
box-shadow: 1px 0 0 #CC5200;
-moz-box-shadow: 1px 0 0 #cc5200;
-webkit-box-shadow: 1px 0 0 #cc5200;
position: relative;
}
#css3_menu a {
float: left;
padding: 15px 30px;
color: #fff;
text-transform: inherit;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-shadow: 1px 1px 0px #6f4900;
}
#css3_menu li a:hover {
color: #6f4900;
text-shadow: 1px 1px 0px #482f00;
}
#css3_menu li:hover > a {
color: #d2d2d2;
}
*html #css3_menu li a:hover {
/* IE6 only */
color: #fafafa;
}
#css3_menu ul {
margin: 20px 0 0 0;
_margin: 0;
/*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 47px;
left: 0;
z-index: 1;
background: #ec6c00;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#css3_menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#css3_menu ul ul {
top: 0;
left: 174px;
margin: 0 0 0 20px;
_margin: 0;
/*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(210,210,210,.2);
-webkit-box-shadow: -1px 0 0 rgba(210,210,210,.2);
box-shadow: -1px 0 0 rgba(210,210,210,.2);
}
#css3_menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0;
/*IE6 only*/
-moz-box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
-webkit-box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
box-shadow: 0 1px 0 #cc5200, 0 2px 0 #ec8e00;
}
#css3_menu ul li:last-child {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
#css3_menu ul a {
padding: 12px;
width: 150px;
color: #ffc66c;
_height: 12px;
/*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#css3_menu ul a:hover {
background-color: #f99100;
color: #fff;
}
4. Click save button and you are done first step.
Note:- If this style sheet doesn't work fine with your template. before adding this menu in your template completely remove your previous menu.
The code worked flawlessly!. If you have any problem or you want to change the background color font color or anything else just leave your comment with your requirement. We are ready for help 24/7.
How to add HTML
1. Go to Layout > Add A Gadget and select HTML/JavaScript gadget.
2. Copy the HTML link and paste it inside the content box.
<ul id="css3_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Plugin</a>
<ul>
<li> <a href="#">Facebook</a></li>
<li> <a href="#">Twitter</a></li>
<li> <a href="#">Pinterest</a></li>
<li> <a href="#">Google Plus</a></li>
<li> <a href="#">Adsense</a></li>
<li> <a href="#">Custom</a>
<ul>
<li> <a href="#">Hello Bar</a></li>
<li> <a href="#">Earning Boster</a></li>
<li> <a href="#">Clock</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tips Tricks</a></li>
<li><a href="#">Blogger News</a></li>
<li><a href="#">Blogger Help</a></li>
</ul>
</li>
<li><a href="#">Template</a>
<ul>
<li><a href="#">Blogger</a>
<ul>
<li><a href="#">By Column</a>
<ul>
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
</ul>
</li>
<li><a href="#">By Color</a>
<ul>
<li><a href="#">Red</a></li>
<li><a href="#">Blue</a></li>
<li><a href="#">Orange</a></li>
</ul>
</li>
<li><a href="#">By Width</a></li>
</ul>
</li>
<li><a href="#">WordPress</a></li>
</ul>
</li>
<li><a href="#">Faqs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
3. Click Save.
4. Drag to reposition the gadget below the header.
Click Save and view your blog. You should see a functional menu installed.
Try hovering the tabs, make sure the dropdowns appear.
You may delete or add menu or sub menu(up to multi levels). Make sure you add/remove the relevant code completely i.e. starting from the opening tag until the closing tag. Do the changes very carefully.
Renaming And Adding The Links
As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).
Below is a code snippet for one of the category.
<li><a href="#">Home</a></li>To rename the category, simply replace
Home with your own text. As for the link, just replace # with the Page intended URL.Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment
Enjoy..!!