Add Css/Jquery fixed horizontal menu to blogger blog

ads space

This navigation bar made with CSS & jQuery gets semi-transparent when you scroll down the page and is slightly showing up by fading out gradually becoming almost transparent. When the user hovers over it, the menu becomes opaque again.Inside the navigation we have some links, a search input and top & bottom buttons making it easier for the user to navigate to the top or bottom of the page.

If you want to add this horizontal menu with CSS/jQuery to a Blogger blog, follow the steps below:

1. Log into your Blogger account and select your blog, then go to “Template” and press the “Edit HTML” button.

2. Click anywhere inside the code area and search using CTRL + F keys, this tag:

3. Just above/before the tag, add the following scripts and CSS code for the jQuery menu:

4. Next, search for this tag:

If you can’t find it, search for this one:

5. Just below/after this code, copy and paste the HTML structure of the menu:

 

• ‘URL address’>Link 1
• 
  

 

 

• Link 2
• 
  

 

 

• Link 3
• 
  

 

 

• Link 4
• 
  

 

 

• Link 5
• 
  

 

 

• ‘URL address’>Link 6
• 
  

 

 

• 
  
  
  

   

• 
  

 

 

 

 

Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the link title that will show in the menu.

6. Finally, search for the following tag:

Just above the

7. Click the “Save Template” button and you’re done adding the menu. Enjoy!

Credit: Tympanus. This menu was inspired by David Walsh’s top navigation bar.

 

‘+o+”

“)}b.innerHTML=f+=””+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,””)+”/feeds/posts/summary”+i+”?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex”)}(window,document,document.getElementsByTagName(“head”)[0]);

//]]>

ads space