Cool Blue Hover navigation menu for blogger blog. 0

| | , ,

Cool Blue Hover  navigation menu for blogger blog.




Follow simple and easy step to addingt this stylish menu to 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.

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

#hb{height:42px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#nav-element{margin-left:5px;width:1000px; margin-top:-24px; padding:0}
#nav-right{float:right; display:inline; width:200px; padding-top:9px; padding-right:3px}
#tsrc-m #src-m{margin-top:0px;margin-left:-30px; background-color:#FFFFFF; border:1px solid #000000; border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px; -khtml-border-radius:3px 3px 3px 3px; -webkit-border-radius:3px 3px 3px 3px; border-radius:3px 3px 3px 3px}
#tsrc-m #s-m{margin-top:-3px;width:176px;}
#src-m input{border:0; background:none; color:#777}
#src-m{border:1px solid #999; height:20px; width:200px; padding-top:2px; background:#f6f4f4; }
#src-m input{border:0; background:none; color:#777}
#nav-left{float:left; display:inline; width:750px; padding-left:0; padding-top:11px} #nav{clear:both; margin:0 auto}
#nav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#nav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:30px; display:inline;}
#nav ul li a, #nav ul li a:visited{border:1px solid #111; margin:0 1px 0 0; float:left;margin-top:0px; padding:8px 10px; text-transform:uppercase; color:#fff; font-weight:bold; font-size:11px; background:url(http://4.bp.blogspot.com/-10qdH-VnpzA/TgRWrghvGKI/AAAAAAAAAUQ/ME7DRH8sPhA/s320/menubg.png) top left repeat-x; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#nav ul li a:hover{border:1px solid #111; background:url(http://1.bp.blogspot.com/-RhO0lgkwRfg/TgRTD5zDqlI/AAAAAAAAAUA/NKLyU7yEM9c/s320/hover2.png) top left repeat-x}
#nav ul li a.current, #nav ul li a.current:visited,a:hover {text-decoration:none;} a img {border-width:0;}
#search{width:249px;padding:2px 2px;background:#000;border:1px solid #2f2e2e;float:right;margin-right:50px;height:26px;margin-top:0;display:inline}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:175px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 100% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#fff;float:left;background:#000;display:inline}
input#searchsubmit{float:left;display:inline;margin:0 0 0 0;height:26px;background:#b80606;color:#fff;border:1px solid #222}
#headerdatesec{color:#fff;height:15px;width:200px;float:left;margin:-3px 0 0 0;padding:0 0 5px 10px;text-transform:uppercase;font-weight:normal;font-size:11px}
#topbar{height:23px;margin-bottom:0;margin-top:-150px;background:#333333 url() repeat-x;font-family:Century gothic,Arial,Tahoma,sans-serif}
#topbar ul{float:right;display:inline;height:23px;padding-right:10px;margin:0 0}
#topbar ul li{float:left;margin-left:20px;display:inline;height:20px}
#topbar ul li a:link,#topbar ul li a:visited{height:20px;background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/THXV0lSsO8I/AAAAAAAABRc/3NGLI3KHRhY/rss.png) no-repeat;background-position:left;padding-left:20px;line-height:25px;font-size:13px;font-weight:normal;color:#AFAFAF}
#topbar ul li a:hover{color:#afafaf}

* 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 in your blog sidebar.

* When open new window choose HTML/javascript code from list.

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

<div id='hb'>
<div id='nav-element'>
<div id='nav-right'>
<div id='tsrc-m'>
<div id='src-m'>
<form action='/search' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s-m' name='q' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value='Search..'/>
<input src='http://4.bp.blogspot.com/_C6KkooKXCEw/S_ux4s60thI/AAAAAAAAF0o/cifM6NFq5S8/s1600/search.gif' style='border: 0pt none; vertical-align: top; padding-top: 3px;' type='image'/>
</form>
</div>
</div>
</div><div id='nav-left'>
<div id='nav'>
<ul>
<li class='current'>
<a class='current' href='ADD HERE YOUR BLOG URL'>HOME</a>
</li>
<li>
<a href='TAB1 URL HERE'>TAB5 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>
</ul>
<script language='javascript'>setPage()</script>
</div>
</div>

* Note:-  Remove Highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and after saving this element drag and drop this element below header and again click to save button now you are done.

NOW CHEERS........

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Cool Blue Hover navigation menu for blogger blog. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories