How to Add Blue Navigation Menu to blogger ! With Search Box. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

How to Add Blue Navigation Menu to blogger ! With Search Box.

Hello friends here i am telling you best navigation menu for your blogger blog this is very effective and easy to add in your blogger blog you can see this menu preview from www.shoutmeloud.com and if you like add in your blog now.

Follow simple and easy step to adding this navigation menu in your blogger blog--->>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML now.

* Find this code ]]</b:skin> by CTRL+F key easily now.

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

#wrap{background:#FFF; width:960px; margin:10px auto 10px; padding:0; position:relative; border:1px solid #616161}
a, a:visited{color:#007EC4; text-decoration:none}
a:hover{color:#007EC4; text-decoration:underline}
a img{border-width:0}
#nav{background-color:#198dc9; width:960px; height:30px; overflow:hidden; margin:0 auto 0 auto}
#nav ul{margin:0px 0px 0px 0px; height:30px; padding-left:10px; float:left; width:750px}
#nav li{float:left; margin:0 10px 0 0}
#nav li a:link, #nav li a:visited{color:#FFF; padding:0 5px; display:block; height:30px; line-height:30px !important; float:left; font:normal small-caps bold 13px Arial; text-shadow:0 0 3px #333}
#nav li a:hover{overflow:hidden; background:#0F4F7E}
#secnav, #secnav ul{padding:0; margin:0; list-style:none}
#secnav a{display:block; line-height:25px; padding:0 20px 0 20px; color:#fff}
#secnav li:hover, #secnav li.sfhover1{background:#0F4F7E; cursor:pointer; overflow:hidden}
#secnav li:hover span, #secnav li.sfhover1 span{color:#0080ff}
#secnav li{float:left; font-size:12px}
#secnav li ul{position:absolute; width:16px; left:-999em; margin-top:30px}
#secnav li li{font-weight:normal}
#secnav li:hover ul, #secnav li.sfhover1 ul{left:auto}
#secnav li ul li a{background-color:#198dc9; border:1px solid #6FADFF; font-size:12px; width:150px}
#secnav li ul li a:hover{background-color:#0D82D6; color:#fff}
#google-search{width:220px; height:19px; float:left; background:transparent; display:block; margin-left:-20px; margin-top:4px}
#google-search form{float:left}

IF YOU WANT TO ADD THIS MENU ABOVE BLOGGER HEADER FOLLOW THIS STEP--->>>

* Now again find <body> by CTRL+F key easily.

* Copy below code and paste after <body>

<div id='wrap'>

<div id='nav'>
<ul id='secnav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='YOUR URL1' shape='rect' target='_blank'>YOUR TITLE</a>
</li>
<li><a href='YOUR URL2'>TAB1 TITLE</a>
          <ul class='children'>
          <li><a href='SUB URL2'>TAB2 TITLE</a></li>
          </ul>
</li>
<li/>
<li><a href='URL3'>TAB3 TITLE</a>
          <ul class='children'>
          <li><a href='SUB URL3'>SUBTAB3 TITLE</a></li>
          </ul>
</li>
<li><a href='YOUR URL4'>TAB4 TITLE</a></li>
      </ul>

<div id='google-search'>
         <form action='/search' id='searchform' method='get' style='display:inline;'>
<div>
<input id='searchbox' maxlength='180' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this website...&quot;;}' onfocus='if (this.value == &quot;Search this website...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</div>
</form>
      </div>

</div>
</div>

Note- Change highlighted color text and URL with your own ok.

* Now save your template now.and you are done.

If you want to add this Navigation menu below blog title copy above Second code and go to design tab and click add gadget which is below header and select html/javascript and when open blank box paste this code and save now you are done ok