How to Add Stylish Css/Jquery fixed horizontal menu to blogger blog?Adding this widget to blogger is very simple just follow these steps:

Let's start adding the code:

1. Go To Blogger >> Design >> Edit HTML and check "expand widget templated" box;

2. Search (using CTRL + F) for this tag:

</head>

3. Copy and paste just above/before </head> tag, the following code:

<link rel="stylesheet" href="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js"></script>
<script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
                    var scrollTop = $(window).scrollTop();
                    if(scrollTop != 0)
                        $('#nav').stop().animate({'opacity':'0.2'},400);
                    else
                        $('#nav').stop().animate({'opacity':'1'},400);
                });

                $('#nav').hover(
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'1'},400);
                        }
                    },
                    function (e) {
                        var scrollTop = $(window).scrollTop();
                        if(scrollTop != 0){
                            $('#nav').stop().animate({'opacity':'0.2'},400);
                        }
                    }
                );
            });
        </script>

4) Now search for <body> tag. If you can't find it, search for this one:

<body expr:class='"loading" + data:blog.mobileClass'>

5) Just below/after this code, paste the following code:

<div id="nav">
<ul>
<li><a class="top" href="#top"><span></span></a></li>
<li><a class="bottom" href="#bottom"><span></span></a></li>
<li><a href='URL address'><span>Link 1</span></a></li>
<li><a href='URL address'><span>Link 2</span></a></li>
<li><a href='URL address'><span>Link 3</span></a></li>
<li><a href='URL address'><span>Link 4</span></a></li>
<li><a href='URL address'><span>Link 5</span></a></li>
<li><a href='URL address'><span>Link 6</span></a></li><li class="search">

<input type="text"/><input class="searchbutton" type="submit" value=""/>
</li>
</ul>
</div>
<div id="top"></div>
<div class="desc"></div>
<div id="bottom"></div>
<div class="scroll"></div>

Replace URL address with the url of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link you want to appear in the menu.

Now Save Template and you're done ;)
And if you liked this post, please like us on fbpage. Thanks!

2 comments:

Sanjay7 February 2013 at 03:32
wow brilliant nice work i really appreciate this. keep it up.

http://www.deepdesigncompany.com/

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:
1. You Can add HTML CODE in comments.
2. You can always Test the tutorial.
3. No cheesy/spam Comments tolerated Spam comments will be deleted immediately upon our review.

Regards,
Saeed Aquib Ahmed :)