How to add Evergreen css navigation menu to blogger/blogspot . 2

Hi friends now add this special green color css navigation menu in your blogger blog easily.

PREVIEW:-

Follow simple and easy step to adding this menu in your blogger blog---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* After above step find this code ]]</b:skin>

* Copy below code and paste before ]]</b:skin>

.navcontainer  {
height : 44px;
background : url(http://santabanta.mywapblog.com/files/nav-background.png) repeat-x left top;
border-top : 2px solid #e1fbcd;
}
#nav {
height : 38px;
}
#nav, #nav ul {
padding : 0;
margin : 0;
list-style : none;
line-height : 1;
}
#nav {
margin-bottom : 1px;
padding-left : 10px;
}
#nav ul {
float : left;
list-style : none;
margin : 0 0 0 0;
padding : 0;
}
#nav li {
float : left;
list-style : none;
margin : 11px 0 0 0;
padding : 0;
}
#nav ul li {
list-style : none;
margin : 0;
padding : 0;
}
#nav li a, #nav li a:link {
color : #e8f3df;
display : block;
margin : 0 4px 0 4px;
padding : 5px 10px 6px 10px;
text-decoration : none;
font-size : 12px;
font-weight : bold;
text-transform : uppercase;
}
#nav li a:hover, #nav li a:active {
background : url(http://santabanta.mywapblog.com/files/nav-hover.png) repeat-x left top;
color : #fff;
display : block;
text-decoration : none;
}
#nav li.current-cat a {
background : url(http://santabanta.mywapblog.com/files/nav-hover.png) repeat-x left top;
color : #fff;
}
#nav li:hover, #nav li.sfhover {
position : static;
} 

* Now click to save your Blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you are here--->>> Page element.

* Click in add Gadget which is your blogger sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div class="navcontainer">
     <ul id="nav">
     <li><a href="TAB1 URL HERE">TAB1 TITLE HERE</a></li>
     <li><a href='TAB2 URL HERE'>TAB2 TITLE HERE</a></li>
     <li><a href='TAB3 URL HERE'>TAB3 TITLE HERE </a></li>
     <li><a href="TAB4 URL HERE">TAB4 TITLE HERE</a></li>

     <li><a href="TAB5 URL HERE">TAB5 TITLE HERE</a></li>
     <li><a href='TAB6 URL HERE'>TAB6 TITLE HERE</a></li>
     <li><a href='TAB7 URL HERE'>TAB7 TITLE HERE</a></li>
     </ul>
     
    </div>

NOTE:- Remove highlighted text in above code with your own ok

* Now click to save your HTML/javascript and drag and drop this element below header.

* Now click to save button now you are done. comment how it is????

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: How to add Evergreen css navigation menu to blogger/blogspot . ~