Add CSS/Jquery Fixed Floating Menu Bar To Your Blogger

Views:

Friends, After a long time search, i found a simple and beautiful menu bar. It is a semi-transparent fixed floating menu bar. When we are scroll down the page, it slightly showing up by fading out and becoming almost transparent. If you want to see this menu bar, just move your mouse pointer on menu bar. It is made with pure CSS code and JavaScripts. You can add this menu bar to your blogger. Just follow step by step.

How To Add CSS Jquery Fixed Floating Menu Bar To Your Blogger (www.masterhacksindia.blogspot.com)

First Log in you Blogger account.

Go to Templates.

Click on EDIT button.

Find (CTRL+F) </head> tag.

Copy below code and paste it just above/before the </head> tag.

<link rel="stylesheet" href="https://googledrive.com/host/0B7zn8HT9f1BUSEJmZG1ldnZaaVk"/>
<script type="text/javascript" src="https://googledrive.com/host/0B7zn8HT9f1BUZ3lacHBHWENYTDg"></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>

Then find (CTRL+F) <body> tag.

Copy below code and paste it after/below <body> tag.

<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>