Add stylish Blue hover style page navigation menu in blogger. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Hi now add this special blue hover effect page navigation menu in blogger.

PREVIEW:-

Follow simple and easy step to adding this special menu below your blogger Header--->>>

* 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>

#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{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -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:2px solid #111; background:#3399FF top left repeat-x; 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 ul li a.current, #nav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;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{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:-20px; 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:-1px;width:176px}
#src-m input{border:0; background:none; color:#777}

* Now click to save your blogger Template.

* Now again go to blogger Dashboard .

* And click in design tab and 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.

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

<!-- Start Menu -->
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimfAoiB7mRqiix30WlmLffMWpXqL0w5xRZ0Q7EOyhRvnYQezK_RXBLTPW3O4twsjbZ99VufcB-33k1hhqgYu0CEd12H5a7iisDpHeRfd6laBi2h9hGGVuJAXeh5wmYEbsEicL3SMkGjW6B/s1600/search.gif' style='border: 0pt none; vertical-align: top; padding-top: 3px;' type='image'/>
</form>
</div>
</div>
</div>
<!--TOP MENU SETTING-->
<div id='nav-left'>
<div id='nav'>
<ul>
<li class='current'>
<a class='current' href='/'>HOME</a>

</li>
<li>
<a href='TAB1 LINK HERE'>TAB1 TITLE HERE</a>
</li>
<li>
<a href='TAB2 LINK HERE'>TAB2 TITLE HERE</a>
</li>
<li>
<a href='TAB3 LINK HERE'>TAB1 TITLE HERE</a>
</li>
<li>
<a href='TAB4 LINK HERE'>TAB1 TITLE HERE</a>
</li>

<li>
<a href='TAB5 LINK HERE'>TAB1 TITLE HERE</a>
</li>
</ul>
<script language='javascript'>setPage()</script>
</div>
</div>
<!-- END TOP MENU SETTING-->
</div>
</div>
<div class='clear'></div>
<div id='crosscol-wrapper' style='text-align:center'>
<div class='crosscol section' id='crosscol'></div>
</div>
<!-- End Menu -->