Add Css/Jquery fixed horizontal menu to blogger blog

A

This navigation bar gets semi-transparent when you scroll down the page and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again.

Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

 fixed horizontal

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://mybloggertricksorg.googlecode.com/files/Fixed%20Fade%20Out%20Menu.css”/>
<script type=”text/javascript” src=”http://mybloggertricksorg.googlecode.com/files/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=’&quot;loading&quot; + 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 😉

About the author

domdom rung

1 comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives