5 Stylish Navigation Menu for Blogger - SEO BLOGGING TRICK

Stylish Navigation Menu!!! One of the most important gadget in blog. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish navigation menu to blogger/blogspot in one more style.

Add CSS based dropdown menu to blogger:

How to Add:

• Open your blogger dashboard.
• Select your blog.
• Select Layout option.
• Click Add a gadget option .
• Select HTML/JavaScript widget.
• In the HTML/JavaScript box paste the following code and save the widget.

/* -------Dropdown navigation menu starts----- */

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#dcdcdc;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#fff;
  padding:0 10px;
background:#333333;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #222222;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #333333;
  color: #fff;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul,

#wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}

</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='#'>Dropdown 1 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>
                  <li><a href='#'>Link 5</a></li>
                  <li><a href='#'>Link 6</a></li>
               </ul>
           </li>

           <li><a href='#'>Dropdown 2 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>

               </ul>
           </li>
    <li><a href='#'>About us</a>

           </li>
             <li><a href='#'>Contact us</a>
           </li>
         </ul>
      </div>

   </div>

<!-- dropdown navigation menu ends-->

Simple CSS3 code to add this stylish menu

For blogger.com users no need to learn CSS and HTML coding to add this type of code to your blog to remember Steve long time.

Step 1: Go to blogger.com and sign in to your dashboard

Step 2: Click Design –> Edit HTML (Note: Download template xml file with download full template)

Step 3: Find ]]></b:skin> and paste below code to above it.

/* APPLE STYLE NAVIGATION MENU */

#appleNavc4t { margin:40px 0; list-style:none;

font-family: “Lucida Sans Unicode”, “Lucida Grande”, Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

text-shadow: 0 -1px 3px #202020;

width:960px; height:34px;

-moz-border-radius:4px;

-webkit-border-radius:4px;

border-radius:4px;

-moz-box-shadow: 0px 3px 3px #cecece;

-webkit-box-shadow: 0px 3px 3px #cecece;

box-shadow: 0 3px 4px #8b8b8b;

}

#appleNavc4t li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:103px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

/* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));

background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

background-color:#5f5f5f; /* Fallback */

}

#appleNavc4t li:not(:last-child):hover {

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));

background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );

background-color:#383838; /* Fallback */

-moz-box-shadow: inset 0 0 5px 5px #535353;

-webkit-box-shadow: inset 0 0 5px 5px #535353;

box-shadow: inset 0 0 5px 5px #535353;

}

/* When the user clicks the button, we simply change the box inset (compared to the “hover”) */

#appleNavc4t li:not(:last-child):active {

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));

background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );

background-color:#383838; /* Fallback */

-moz-box-shadow: inset 0 1px 2px 2px #000;

-webkit-box-shadow: inset 0 1px 2px 2px #000;

box-shadow: inset 0 1px 2px 2px #000;

}

#appleNavc4t li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */

#appleNavc4t form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

/* We use the CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */

background-image: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgGy5CP4U47Vb4_-FzEg4tVIE9ZzABXeeloAOId1AyWYiu0JDEYpu_mq28erzxTXw8LhDpo61KgLVJW5iKZHn0RsI-7FGtomDjoLEEyuk6tfvIAR3ipcZIyToSLtPyEcTENVuE0A94zc/s1600/magnifier.png”), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));

background-image: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgGy5CP4U47Vb4_-FzEg4tVIE9ZzABXeeloAOId1AyWYiu0JDEYpu_mq28erzxTXw8LhDpo61KgLVJW5iKZHn0RsI-7FGtomDjoLEEyuk6tfvIAR3ipcZIyToSLtPyEcTENVuE0A94zc/s1600/magnifier.png”), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);

background-repeat: no-repeat;

background-color:#6E6E6E; /* Fallback */

-moz-box-shadow: inset 0 2px 1px 1px #363636;

-webkit-box-shadow: inset 0 2px 1px 1px #363636;

box-shadow: inset 0 2px 1px 1px #363636;

}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.

We also remove the borders, since they don’t need them. */

#appleNavc4t li:first-child {

-moz-border-radius:4px 0 0 4px;

-webkit-border-radius:4px 0 0 4px;

border-radius:4px 0 0 4px;

border-left:none;

}

#appleNavc4t li:last-child {

-moz-border-radius:0 4px 4px 0;

-webkit-border-radius:0 4px 4px 0;

border-radius:0 4px 4px 0;

border-right:none;

/* The width of the last menu item (search bar) is bigger than the others */

width:124px;

}

/* Fade in animation (Webkit only) */

@-webkit-keyframes showMenu {

from { opacity: 0; top:-20px; }

to { opacity: 1; }

}

#appleNavc4t {

-webkit-animation: showMenu 1s; position:relative;

}

In the above code Change Menu width and Height according to your template.

Find header code ie <div id=’header’> and add below code below it or header related code in your blog.

Note: Remove your Header default menu code. If you want to add Footer menu then find <div id=’footer’> and add below

<nav>

<ul id=’appleNavc4t’>

<li><a href=” title=’Apple’>Home</a></li>

<li><a href=’http://www.care4tech.com/‘ title=’Store’>Care4tech</a></li>

<li><a href=’http://www.thangaraju.com/‘ title=’Mac’>Thangaraju</a>

</li>

<li><a href=’http://www.w3newz.com/‘ title=’iPod’>iPod</a></li>

<li><a href=’http://www.digzzy.com/‘ title=’iPhone’>iPhone</a></li>

<li><a href=’http://www.apple.com/ipad/‘ title=’iPad’>iPad</a></li>

<li><a href=’http://www.apple.com/itunes/‘ title=’iTunes’>iTunes</a></li>

<li><a href=’http://www.apple.com/support/‘ title=’Support’>Support</a></li>

<li>

<form>

<input type=’text’/> /* your search code here */

</form>

</li>

</ul>

</nav>

Note: tested with major browser Mozilla Firefox 3.6 beta and higher, Chrome, Safari, IE 7 or higher, Not support for ie 6 or below.

Add Stylish Navigation Menu to Blogger

Features:
1. Simple and very easy to add
2. Menu with mouse hover effect and awesome look
3. Easy to add Links and use.

How to add navigation menu to blogger/blogspot

1. Go to Blogger Dashboard by clicking here >Design >Edit HTML

2. Copy the below code and paste before </head>  

<style type=’text/css’>

ul#topnav {

margin: 10px 0 20px;

padding: 0;

list-style: none;

font-size: 1.1em;

clear: both;

float: left;

width: 99%;

}

ul#topnav li{

margin: 0;

padding: 0;

overflow: hidden;

float: left;

height:40px;

}

ul#topnav a, ul#topnav span {

padding: 10px 20px;

float: left;

text-decoration: none;

color: #fff;

text-transform: uppercase;

clear: both;

height: 20px;

line-height: 20px;

background: #1d1d1d;

}

ul#topnav a { color: #7bc441; }

ul#topnav span {

display: none;

}

ul#topnav.v2 span{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje-WHre5p_Sg8pFUFgHxDx0MJiZXwN1DKCnoiuzhcMSQnMbbXYUXCnH90YE9tkogBU893B3_4bAQhlWKC9gzJrdo5JhtHgc2s_hZJwLN-Obx7s3MbPgmMQkUHd9Gqb5jfsEGYT0wGMlHc/s1600/menu-bg-b-w.png) repeat-x left top;

}

ul#topnav.v2 a{

color: #555;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje-WHre5p_Sg8pFUFgHxDx0MJiZXwN1DKCnoiuzhcMSQnMbbXYUXCnH90YE9tkogBU893B3_4bAQhlWKC9gzJrdo5JhtHgc2s_hZJwLN-Obx7s3MbPgmMQkUHd9Gqb5jfsEGYT0wGMlHc/s1600/menu-bg-b-w.png) repeat-x left bottom;

}

</style>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item…

var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag

$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag

});

$(&quot;#topnav li&quot;).hover(function() { //On hover…

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels

}, 250);

} , function() { //On hover out…

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;0&quot; //Move the span back to its original state (0px)

}, 250);

});

});

</script>

4. Then click SAVE TEMPLATE 

5. Once again go to Design tab >Page Elements >Add Gadget > HTML/Java Script

6. Copy the below code and paste it 

<div>

<ul id=”topnav”><center>
<li><a href=”#“>Home</a></li>
<li><a href=”#“>Download</a></li>
<li><a href=”#“>Internet</a></li>
<li><a href=”#“>Facebook</a></li>
<li><a href=”#“>Google</a></li>
<li><a href=”#“>Advertise</a></li>
<li><a href=”#“>Contact us</a></li>
</center>
</ul>

</div>

Important :- Replace # with your Link and change title your wish.. Save it 

Add Windows 8 Like Metro UI Navigation Menu In Blogger