Horizontal Navigation Bar for Blogger - Without Hacking Your Template
87This is a simple way to create a horizontal navigation bar at the top of your Blogger page. Most hacks for this process involve inserting code in your blogger template. This no frills solution creates a navigation bar through the existing 'add gadget' function.
From your blog page chose CUSTOMIZE - PAGE ELEMENTS - ADD A GADGET - HTML/JAVASCRIPT.
<a href= "http://yourname.blogspot.com/pagename">label | </a>
The HTML code is the same link you would use for any standard hyperlink.
If you put in some spaces before and after a pipe symbol (I didn't know it was called that until I just looked it up - it is over the backslash on my keyboard) at the end of your labels they have white space between them ... "Articles | "
Save the gadget box and then drag it to just under your header.
The backstage work is to post any new information you want to link to on pages backdated to the 1st January that precedes the start of your blog. Then they don't show up as new posts and confuse your readers (unless you want them to).
I have all mine posted on 1 January 2006 so they are all archived in the one month and are easy to find.
When you want to link to your hubpages from your blog, just insert the information on the page that links to your ARTICLES label in the horizontal menu bar.
So there you have an easy no fuss way to insert a horizontal navigation bar underneath your header in Blogger without the need to hack the HTML code of your template. It is not flashy or very exciting, but it is a simple solution if you want a quick and painless way to have hot links to your favorite posts prominently installed at the top of your Blogger page.
|
Blogger: Beyond the Basics: Customize and promote your blog with original templates, analytics, advertising, and SEO (From Technologies to Solutions)
Price: $31.57
List Price: $39.99 |
|
BenSpark.com
Price: $0.99
List Price: $0.99 |
|
Blogging Heroes: Interviews with 30 of the World's Top Bloggers
Price: $6.73
List Price: $24.99 |
|
WordPress for Business Bloggers: Promote and grow your WordPress blog with advanced plug-ins, analytics, advertising, and SEO
Price: $30.97
List Price: $39.99 |
|
The IT Girl's Guide to Blogging with Moxie
Price: $3.95
List Price: $24.99 |
Further Reading - Blogger Tips and Tricks
- Add columns to Blogger Footer: How to Add Three Colu...
The default Blogger template has only one column footer. If you surfing Internet frequently, you will see that many websites and blogs has three column footer. This three column footer is becoming very... - Add Your Recent Tweets to Blogger
If you’ve got a Blogspot.com blog, you can add your Twitter feed to the sidebar very, very easily. The feed will list your last 5 tweets, as well as the time it was posted and link to follow if the reader... - How to Insert a Custom Signature in Blogger Posts
Before I explain how to insert a custom signature at the end of each of your blog posts, please note this is tutorial is only meant for users of Blogger. If you want to do this with Wordpress or something... - How To Place Photos Side By Side In Blogger
If you're reading this article, you've probably been trying to get pics into your blogger posts in a side-by-side fashion, but couldn't quite figure out how to manage it. That's because the option isn't...
PrintShare it! — Rate it: up down flag this hub
Comments
You're welcome.
Hey girl,
This seems to be what I am looking for and I cant seem to click on the HTML so that the code will come up! Where can I get the code to add to my blog? I would love your help!!! Thanks so much!
Tycie
Hi Tycie
You just need to copy the code in the html box and then paste it into your 'add gadget' html box in Blogger as many times as you need it.
This is just the sort of tutorial I need. I really want to make my blog my own but don't know enough about coding etc. to really make a difference. This is fantastic
Thanks for taking the time to write and post this!
Julie
Thanks Julie, I love playing with my blog (which now looks totally different from when I posted this!)
thank you so much! u're genious!!!
I did what you said but when I hover my mouse over the horizontal bar that I created, it isn't a link. Any suggestions? Thanks!!!
I can't get the links to click through, help?
Fixed, make sure it's a href NOT a ref and the links will click through.
Thank you so much New Kid -- I didn't realise the typo in the code box. I've fixed it now. Thank you again.
You're very welcome, thank you for the easy way to do the bar!
I tried but did not work, just the home link, it refreshes, the other links did not work, I compare it to your pic above and is the same
this is the message I got
Page not found
Sorry, the page you were looking for in the blog test does not exist.
This information is very useful to blogger. Thank's for sharing.
Great idea!
Hi Katie Thank You, for very long time i was looking for this solution, now i get it..its really a simple one.
Thank you very much for this tutorial. Great info here, and look forward to seeing what you post next!
thanx alot i m searching for this for along time
Thank you to everyone for your kind words. I've graduated to Wordpress now so maybe I can share my tips and tricks for that platform in the future.













Anamika S says:
4 months ago
This is an info i was looking for. Thanks for sharing.