Add stylish Blue hover style page navigation menu in blogger.

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 ]] by CTRL+F key.

* Copy below code and paste before ]]

#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.

HOME



TAB1 TITLE HERE


TAB2 TITLE HERE


TAB1 TITLE HERE


TAB1 TITLE HERE



TAB1 TITLE HERE

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.