Cool Fixed Fadeout Horizontal Menu with Css/Jquery for Blogger



Cool Fixed Fadeout Horizontal Menu with Css/Jquery for Blogger

We are very happy because of successful release of social widgets and many other widgets like recent comments and recent posts widget. I was planing to release another social widget but I delayed that. A question will definitely rise in your minds that why I cancelled release of another social widget So, the answer is here. In the previous week I have already shared many social and other cool widgets with our readers through which we got a very good and positive response But I feel that some thing is really missing after releasing such nice widgets. 

We have received many emails from our readers that there is a need of a cool menu. You can also contact us. So, after receiving a large number of emails that demands a cool menu for blogger today I have a Cool  Fixed Horizontal menu with Css/Jquery for Blogger.

Features of Cool Fixed Fadeout Horizontal Menu with Css/Jquery for Blogger.

Cool Fixed Fadeout Horizontal |Menu with Css/Jquery for Blogger

The menu has a very cool look it has many splendid features like with will fadeout when any one scrolls and fade in when someone hovers over it. You can call it also semi transparent at the time of scrolling. Menu has some links buttons but it just don't have enough features. It have some extra features also like it contains Buttons that let the user to go to TOP or Bottom of the page instantly. Another and one of the main feature of this classic menu is that it also contains a Search Box which allows visitor to search content within your blog.

How to Add  Cool Fixed Fadeout Horizontal |Menu with Css/Jquery to Blogger

1. Go to Blogger Dashboard >> Template >> Edit HTML.

2. Tick the expand widget box.

3. Now search </head> and paste the following code just above it.

<link rel="stylesheet" href="http://widgetbloggiks.googlecode.com/svn/trunk/fadeoutmenu.css"/>
<script type="text/javascript" src="http://widgetbloggiks.googlecode.com/svn/trunk/jquery.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 and if you can't find this tag then find the following code.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

5.  Paste the following code just after/below it.

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

6.  Replace URL adresss with URL's of your pages and Link with names of pages.

7. Now click on save.

Last Words

Hope you all guys love it. If you need any help regarding to this widget then just drop comment in the comment box. Do share your views with us. Subscribe to Bloggiks to get free updates directly in your Inbox.

Get free daily email updates!

Follow us!


About Author:

Waleed is a certified SEO Consultant, Pro Blogger and an addicted Web Developer

read more...

Follow him @ Bloggiks |Mobi2Android | Facebook | Google Plus

5 comments:

  1. Thanks Waleed Brother. Your are Publishing some cool features for the blogger. I have a suggestion . Plz make a demo blogspot page and show demos on that page. It will be much easier to Check how it looks after adding to blogger. Thanks

    ReplyDelete
    Replies
    1. sure next time we will give demo. We usually give demo. Thanks for feedback.

      Delete
  2. Interesting post... good work thanks for sharing.
    online data storage

    ReplyDelete
  3. thank for info .. i make template with this .. :)

    ReplyDelete
  4. thank you so much.... the information you provided were very interesting and helpful .... It would be better if you make the matter more easier to understand for common people…. Make Money , Blogging Tips

    ReplyDelete

 

About Me

My Photo

A Pro Blogger
Waleed khan is a young Blogger and Web Security Consultant.He is a SEO Consultant & Web Developer.

Alexa/PR

Recent Post

Recent Comments

Powered by:

Bloggiks © 2012. All Rights Reserved | Contact | About | Discliamer