Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
The aim is to have a fixed navigation that follows the user when he scrolls, 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.
- Go To Blogger Dashboard > Design > Edit HTML
- Search for the tag </head>
- And paste the code above it.....
<link rel="stylesheet" href="https://sites.google.com/site/widgetcraftfiles/home/hb-fadeout.css"/>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/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>
- Now search for the <body>
- Just below it 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='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</a></li>
<li><a href='Your Link Here'>Text Here</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>
- Now replace Your Link Here with the link which you want to add to a text.
- And replace Text Here with the text which you want to appear on fade out menu.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
