New css stylish navigation menu for blogger add now. 2

Hi friends now add this special css Navigation menu in your blogger blog easily.

PREVIEW:-

Follow simple and easy step to adding this css 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.

* Now find this code ]]</b:skin> by CTRL+F key.

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

#sub_header  {
position : relative;
height : 50px;
background : url(http://santabanta.mywapblog.com/files/sub-header.png) repeat-x left top;
padding : 4px 5px;
margin : 0 0 15px 0;
}
#sub_header .content {
padding : 2px 0 0 0;
color : #ccc;
}
#sub_header .block a {
color : #fff;
}
#sub_header .block {
color : #fff;
margin : 0 350px 0 30px;
padding : 5px 0 0 0;
}
#sub_header .block-title {
float : left;
width : 150px;
text-align : right;
margin : 0 20px 30px 0;
color : #99ca30;
padding : 0;
}
#secondary {
padding : 0;
margin : 0;
position : absolute;
right : 20px;
top : 10px;
font-size : 12px;
color : #0053a0;
}
#secondary li {
padding : 0 6px 0 8px;
}
#secondary a {
padding : 7px 0;
margin : 0;
font-size : 11px;
font-weight : normal;
color : #344a04;
}
#secondary a:hover, #secondary a.active {
text-decoration : underline;
color : #344a04;
}
#secondary ul.links li {
border-left : 1px solid #344a04;
}
ul.links li {
border-left : 1px solid #ccc;
}
ul.links li a {
margin-left : 2px;
}
ul.links li.first {
border-left : none !important ;
}
ul.links li.last {
padding-right : 0 !important ;
}
#primary {
position : absolute;
bottom : 0;
left : 0;
}
#primary li {
border : none !important ;
margin-left : 2px;
padding : 19px 0;
float : left;
}
#primary a {
background : #73b2ec;
padding : 15px;
font-size : 15px;
font-weight : bold;
color : #fff;
margin-left : 2px;
}
#primary a:hover, #primary a.active {
font-size : 15px;
font-weight : bold;
}
ul.links li.first {
border : none;
padding-left : 0 !important ;
}
ul.links li.last {
padding-right : 0 !important ;
}
#search {
position : absolute;
right : 10px;
top : 10px;
vertical-align : middle;
padding : 6px 15px;
background : url(http://santabanta.mywapblog.com/files/searchmera.png);
z-index : 2;
}
#search label {
font-family : Georgia, "Times New Roman", Times, serif;
font-size : 1.3em;
}
#search .form-text {
border : 1px solid #99ca30;
font-size : 1.2em;
height : 21px;
vertical-align : middle;
width : 175px;
padding : 3px 5px 0 5px;
margin : 0;
}  

* Now click to save your blogger Template.

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

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

* Click in add Gadget which is below your blogger Header.

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

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

<div id="secondary"></div>
          
  </div>

  <div id="sub_header">       <div id="primary"><ul class="links"><li class="menu-473 first"><TAB1 URL HERE" title="">Home</a></li>
<li class="menu-770"><a href="TAB2 URL HERE" title="">TAB2 TITLE HERE</a></li>
<li class="menu-341"><a href="TAB3 URL HERE" title="">TAB3 TITLE HERE</a></li>
<li class="menu-343"><a href="TAB4 URL HERE" title="">TAB4 TITLE HERE</a></li>
<li class="menu-766"><a href="TAB5 URL HERE" title="">TAB5 TITLE HERE</a></li>
<li class="menu-769"><a href="TAB6 URL HERE" title="">TAB6 TITLE HERE</a></li>
<li class="menu-5800 last"><a href="TAB7 URL HERE" title="">TAB7 TITLE HERE</a></li>
</ul></div>

         
    <form action="YOUR_BLOG_URL_HERE/"  accept-charset="UTF-8" method="post" id="search-theme-form">
<div><div id="search" class="container-inline"><div class="form-item" id="edit-search-theme-form-1-wrapper">
 <input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit-1" value="Search"  class="form-submit" />
<input type="hidden" name="form_build_id" id="form-efb8b5933e50b2715a4eecedc0acc562" value="form-efb8b5933e50b2715a4eecedc0acc562"  />
<input type="hidden" name="form_id" id="edit-search-theme-form" value="search_theme_form"  />
</div>
</div></form>
 </div>

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

* Now click to save your HTML/javascript and you are done ok.

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: New css stylish navigation menu for blogger add now. ~