Cool Blue Hover navigation menu for blogger blog.

Posted by Android Market on -






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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMsma4_BST91-X0aPjz9QeM3noc1H63QyxO6icuG8LbahA3Y2sjmYQ8PftK4NYNYmzR318x2sKpSf3xXlDMcIPAcqNXa2bPTGGhYxVlCRneIHQQgwsf9qLeO3Ke6aIv6IQ15-F0lkUaEA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj317EajjoLVj5drxlu_qohcapZd-Ydam39w3uHPSzH1KMyezol_FwWggt5Aynxwtr3mIjFJaNd7DBzpvzFFqtTA-1ZrOism3K8ie5_s8EXYIQHHDcf-g_OdhyJEXsQmV_rPZTZ9eRKGVQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi80YCNTQyyZUynahixPr7yYLbv98_8ADT-p-SGPyPYpJIy46uXGc80DN7V_cpTkwUp1gThDgbVaNFcuGk_5_MGAF3Uan1fkg3Kh_CqmfAWctjM0Y6nuXnHKlsRkGvhlbB1y6qv213nkag/) 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........

Categories: , , , ,

Leave a Reply