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>
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxgFXe8e9tWqWt-1LNBQzaSwOLnZGNhQghoSf3OiiV4hD5tt9lBsfIZN_8nrOzh885CbVnAwiFwKYPpJ9NSKd8ehPz7zoUCnrEfTbvt0hDVf_M6eS4j8R0eNb8Q9NWes_lYtFxVcxHWut/") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmg6CDQWTSd_uk6AtcLOMJwCp_iSXI8Q_o5d4EKQPbXPselxb_5OaW4ld0ya4vOJO7uNBlZNiHzrisPOzywnucuFfb_qKDB_gTuyrAMeml4m2tDSXzwhTH5Hoc1wZ2UVN7XEeE82J5at7/") 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.
|
0 Responses So Far: