|
|
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.
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:
3. Copy and paste just above/before </head> tag, the following code:
4) Now search for <body> tag. If you can't find it, search for this one:
5) Just below/after this code, paste the following code:
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 ;)
Source:Internet
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.
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://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]Fixed Fade Out Menu.css"/>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]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='"loading" + 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 ;)
Source:Internet
0 comments:
Post a Comment