Tuesday, December 27, 2011

Add Stylish Navigation Menu to Blogger

This is the our first post about blogging. One of the most important gadget in blog is navigation menu. 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 animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog. 
Live Demo 



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/AVvXsEhyHVvdqZm9VTEj4xkYuWZnqKnj0zzGGjAVXcWq34cK2_gfkwmApYcc7tf633SOFfI7vop29w1yaCnHfrXrF47Ox7gOQU3zL6MAbyrAQDawpP147VI63kRsx5r8aw6E_ClhYSsJXVlumUI/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/AVvXsEhyHVvdqZm9VTEj4xkYuWZnqKnj0zzGGjAVXcWq34cK2_gfkwmApYcc7tf633SOFfI7vop29w1yaCnHfrXrF47Ox7gOQU3zL6MAbyrAQDawpP147VI63kRsx5r8aw6E_ClhYSsJXVlumUI/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 class="container">

<ul id="topnav" class="v2"><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 
Share and Enjoy!
Posted by at 10:35 AM
Labels: ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)