Blogger9:- Now add css redcarpet navigation menu with serch box in blogger 0

| | , ,

Hi friends add this best css redcarpet style navigation menu in your blogger blog.



Follow simple and easy step to adding this navigation menu in your 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 easily.

* Copy below code and paste before ]]</b:skin>
#menu ul.dropdown {
background: url("http://1.bp.blogspot.com/-YBfhEnSYSHc/TVvWIs9IW-I/AAAAAAAAAX0/L4oJZiptnaQ/w2b_navbg.png") no-repeat scroll center center transparent;
float: left;
list-style: none outside none;
margin-bottom: 10px;
padding: 9px 0;
position: relative;
width: 100%;
z-index: 1;
}
#menu ul.dropdown li {
float: left;
font-weight: bold;
margin: 0 0 0 10px;
}
#menu ul.dropdown li a {
font-size;15px;
color: #CCDDCC;
display: block;
height: 25px;
line-height: 25px;
padding: 0 10px;
text-transform: capitalize;
text-shadow:1px 1px 1px #666666;
}
#menu ul.dropdown li a:hover {
-moz-border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px;
behavior:url(http://way2blogging.googlecode.com/svn/blog/way2blogging-br.htc);
background: none repeat scroll 0 0 red;
color: #FFFFFF;
text-decoration: none;
}
#menu ul.dropdown li.searchform {
float: right;
margin: 0 9px 0 0;
position: relative;
width: 173px;
}
#searchform {
padding-top: 2px;
}
.searchbox {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #666666;
padding: 3px;
}
.searchbutton {
background: url("http://1.bp.blogspot.com/-kVYnJrrHLLM/TVvV_Qc8f8I/AAAAAAAAAXw/xJKMh5svJTc/i_search.png") no-repeat scroll left top transparent;
height: 18px;
position: absolute;
right: 5px;
top: 4px;
width: 18px;
}
#mainmenu-wrap {
background: none repeat scroll 0 0 transparent;
margin: 0 auto;
padding: 0;
text-align: left;
width: 986px;
}


* Now save your blogger TEmplate .

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

* Now you are here--->>> Add new Element.

* Click in Add Gadget which is below blogger header ok if you click in sidebar gadget you should drag this gadget below blogger header ok.

* When open new window select HTML/Javascript form list.

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

<div id='mainmenu-wrap'>
<div class='menu section' id='menu'><div class='widget LinkList' id='LinkList1'>
<div class='widget-content'>
<ul class='dropdown'>
<li><a href='Your BLOG URL'>HOME</a></li><li><a href='YOUR URL1'>TAB1 TITLE</a></li>
<li><a href='YOUR URL2'>TAB2 TITLE</a></li> <li class='searchform'>
<form action='/search' id='searchform' method='get'>
<input class='searchbox' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>

<input alt='Submit button' class='searchbutton' id='searchbutton' src='http://img1.blogblog.com/img/blank.gif' type='image'/>
</form>
</li>
</ul>
<div class='clear'></div>

Note:-  Change Highlighted text in above code before adding in your blog.

* Now save your HTML/Javascript and you are now done enoy.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Blogger9:- Now add css redcarpet navigation menu with serch box in blogger ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories