Add css navigation menu with search box in blogger. 0

Hi Now add this special css Navigation menu with search box in blogger blog easily.

Follow simple and easy step to adding this css navigation menu in blogger---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

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

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

#nav {
-moz-border-radius:30px 30px 30px 30px;
-webkit-border-radius:30px 30px 30px 30px;
background:none repeat scroll 0 0 #000000;
border:1px solid #000000;
float:right;
height:21px;
margin:35px 0 0;
padding:15px 20px;
width:578px;
}
#nav ul {
float:left;
list-style:none outside none;
margin:0;
padding:0;
width:378px;
}
#nav li {
display:inline;
}
#nav li a.current {
color:#FFFFFF;
text-decoration:none;
}
#nav li a {
color:#999999;
font-size:1em;
font-weight:normal;
line-height:21px;
margin:0 25px 0 0;
padding:0;
text-decoration:none;
}
#nav li a:hover {
color:#ffffff;
}
#nav form, fieldset {
float:right;
margin:-4px 0 0;
width:200px;
}
form, fieldset {
border:0 none;
margin:0;
padding:0;
}
.searchfield {
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
background:none repeat scroll 0 0 #444444;
border:1px solid #444444;
color:#eeeeee;
font:1em arial,verdana,tahoma,sans-serif;
margin:0;
padding:5px 14px;
}

* 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 below blogger Header.

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

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

<div id='nav'>
<ul>
<li><a class='current' href='YOUR BLOG ADDRESS HERE' title='Home'>Home</a></li>
<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>

</ul>
<form action='/search' id='searchthis' method='get' style='display:inline;'>
<fieldset>
<input class='searchfield' name='q' size='23' type='text'/>
</fieldset>
</form>
</div>

NOTE:- Change Highlighted Text in above code with your own ok.

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

blogger tutorials Social Bookmarking Blogger Widget

I'm reading: Add css navigation menu with search box in blogger. ~