Add Animated Fancy Navigation Menu with Jquery to Blogger / Blogspot

A

nimated Fancy Navigation Menu with Jquery for Blogger. Every One has trying to add a beautiful menu with animation effect by jquery to their Blogger Blogs. But it has very difficult to add a menu to blogger blogs

How to Install?

• Go to Blogger Dashboard > Design tab.
• Click on Add a Gadget any where in your Layout.
• Choose LinkList Gadget and Leave Title Field as Blank
• Try to Add Some Links and Save Gadget 

• Edit LinkList Widget Once again, And Copy Widget ID From URL like in Image  

 Make Sure the ID may Exact to match in the URL even a Block Letters(Capital Letters) Also for Perfect Working of This Widget! 

 Here is LinkList1 is the widget ID in this URL , if its LinkList1 leave it as its....

or

But If its LinkList2 Replace  that ID in Code ......also .........

1. Log in to blogger account and Click drop down.

 2.Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

The widget  ID is  LinkList2 Replace  that ID in Code also

 #Linklist1 h2{display:none}
    #Linklist1 ul{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqu25y3x5wxwTcImvBjusnpMYn19AurtD1Go4MF59UVKHRFXXVuk1Y4ywW4pBMezVvA5ASWsVMAvEqQxkfD8cQveZIQlPJcytTE8uKpF0BnSg_KqFXVbXqB1bTo9fOSzoB7M4-olGUHN3A/s1600/way2blogging-fancymenubg.gif") repeat-x scroll 0 0 transparent;width: 100%;margin: 0;padding: 0;list-style: none;float: left;font-size: 1.1em;}
    #Linklist1 ul li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}
    #Linklist1 ul li a, #Linklist1 ul li span { padding: 10px 20px;float:left;text-decoration:none;color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqu25y3x5wxwTcImvBjusnpMYn19AurtD1Go4MF59UVKHRFXXVuk1Y4ywW4pBMezVvA5ASWsVMAvEqQxkfD8cQveZIQlPJcytTE8uKpF0BnSg_KqFXVbXqB1bTo9fOSzoB7M4-olGUHN3A/) repeat-x;text-transform: uppercase;clear: both;width: 100%;height: 20px;line-height: 20px;}
    #Linklist1 ul li a{ color: #555;background-position: left bottom;}
    #Linklist1 ul li span{ background-position: left top;}

7. Find this tag by using Ctrl+F    /head

8.Paste below code Before  /head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
    $("#Linklist1 ul li").prepend("<span></span>");
    $("#Linklist1 ul li").each(function () {
        var linkText = $(this).find("a").html();
        $(this).find("span").show().html(linkText)
    });
    $("#Linklist1 ul li").hover(function () {
        $(this).find("span").stop().animate({
        marginTop: "-40"
        }, 250)
    }, function () {
        $(this).find("span").stop().animate({
        marginTop: "0"
        }, 250)
    })
    });
    //]]>
</script> 

9.Save your template, You are Done!.