Add Css/Jquery fixed horizontal menu to blogger blog

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

Aly Chiman

Aly Chiman is a Blogger & Reporter at AlyChiTech.com which covers a wide variety of topics from local news from digital world fashion and beauty . AlyChiTech covers the top notch content from the around the world covering a wide variety of topics. Aly is currently studying BS Mass Communication at University.

Leave a Reply

Your email address will not be published.