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 tag, the following code:
$(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);}});});
4) Now search for tag. If you can’t find it, search for this one:
5) Just below/after this code, paste the following code:
Link 1Link 2Link 3Link 4Link 5Link 6
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 ;)Share
