Add animated navigation bar or menu to blogger

this is my another blogger tutorial for making the animated navigation bar or menu. this tutorial will take around 5 min to install if you know some thing like html or css. don't worry if you don't know i will make simple for the ones who don't any of this. you can see the demo on my only for this tutorial. so lets start it

first of all go to blogger sign in go to your blog which you want to add this navigation bar or menu than layout>edit html

ok now we will need to copy some code and paste it to the css of the current blog css. to do this find content css comment as shown in below image

now copy the lines like i have done it in above image and paste it above the content comment like in below image and replace content with navigation menu this is done because in future suppose if you want to remove this you can easily remove it

now copy the below css code and paste it like i have done it below

/* navigation menu

--------------------------------------*/

paste your css code here

here is that css code which you have to paste

 

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Important - Masking out the hover state by default--*/
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span>  will be a duplicate of the <a> tag--*/
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(http://hitesh1987.superfreehost.org/img.jpg) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
	color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
	background-position: left top;
}

now search </head> we have to paste some code here also paste the below code above </head> line

here is the code which you have to add above </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
	
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	}); 
	
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({ 
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});
	
});
</script>

now save the template all the css coding is done in the template now go to layout of that blog and add a html/JavaScript gadget to your blog

paste this below code in that big box

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

replace # sign with your links and save the gadget with giving any title

now move that gadget to top of the blog posts by dragging like i have done in below image

now you save it and you have done it

now whenever you need to change the links in the navigation menu edit this gadget

don't forget to comment about this tutorial if you like it than please share this tutorial with other