Simple Stylish Blue Hover Style Page Navigation Menu In Blogger

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

PREVIEW HERE:-

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/AVvXsEgmeLbAHJxm2jN6IXxpWrpxazQ7JSWVrLoa6fihMlZL9QMDpE3k4nWBugyOFx5f3G0izCj-Y1NvFAIL4gF7ouroh4PY90L5kNRzYnDc_nZ8Q-Y_FONLkDDuQKdMbL2yVPfR3qGKWl7I2Dpp/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'>TAB3 TITLE HERE</a> </li> 

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

<li> <a href='TAB5 LINK HERE'>TAB5 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 -->

NOTE:- Change Highlighted text in above code with your own ok.

* Now click to save your HTML/Javascript and now you are done my friend.

Now One More Design Specially For You

Click Here