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.
Cool Fixed Fadeout 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.

5 Comments

  1. mytrickslab.com February 12, 2013
    • Waleed Khan February 12, 2013
  2. Bradon johnson February 14, 2013
  3. Nucky.P .N September 11, 2013
  4. Maaste Blogerrmen February 20, 2014

Leave a Reply

Your email address will not be published. Required fields are marked *