Horizontal Navigation Bar for Blogger - Without Hacking Your Template
81This 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.
 | Amazon Price: $3.97 |
 | Amazon Price: $18.03 List Price: $39.99 |
 | Amazon Price: $14.11 List Price: $24.95 |
 | Amazon Price: $30.96 List Price: $39.99 |
 | Amazon Price: $14.95 List Price: $24.99 |
Further Reading - Blogger Tips and Tricks
- Add Your Recent Tweets to Blogger
If youve 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...
vote upvote downsharePrintflag
- Useful (13)
- Funny
- Awesome (1)
- Beautiful (1)
- Interesting
CommentsLoading...
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.
You can make your own one very easily,
Add Menu Bar To Blogger Blog
Worked like a charm..Thank you so much!!
How do I make the font larger? thanks!
What if I want multiple articles to be embedded within that one menu title for example articles. Do I separate them by using comma or something else??
Thank you KatieP! Your site is very helpful! Thank you! =)
I'm always looking for new ways to create nav bars, whether it be for a traditional Web site or blog site. I'll definitely give you horizontal navigation code a try. Looks pretty easy and well made.
Thanks for sharing this!
Okay, the nav bar was easy to install but I do not know how to get the links to work...any suggestions?
Easy and no fuss? Really? I didn't understand this AT ALL. So I copy and paste this into a gadget, but... then what? I don't get how to link my articles to the bar. Type titles and pipe symbols where? huh?
Okay, I figured it out. Not *exactly* what I want, but will def work for now. Thanks so much. I guess I just needed to read a little harder.
Thank you! this helped so much!
That's great! Thanks. It's one of those "why didn't I think of that?" tricks. So simple.
Thank you so much. It worked like a charm :) Is there anyway to make the font bigger thou?? It blends in and i want it to stand out :) Thanks so much again. I been lookin like crazy and the hacking into the CSS code was really hard to me.
THANK YOU MR.
Hi, I done this before and my blog is looking great, But isin't there any other way to do it because it isn't look professional
yes... wonderfull info... helped me lot..
Now Blogger lets you create as much as 10 static pages. The pages can be used for example for About page. And with the template designer feature you can now customize the look of your blogger template very eazy. You can create 1 or 2 sidebars, you can customize the footer and so on. If you don't find the template designer try at draft.blooger.com
Finally, someone who directs my concern! Thanks!!!
hey, i was wondering. how do you get multiple pages for one label?
Thank you so much for this. Look at what you've done to my blog. Amazing! Love it!
lovely. i am searching for [ http://www.php-example.com ] a navigation bar like this without hacking the original template.What will be the solution if someone has a lot of post?
cheers
iqbal
Thank you, thank you, thank you!
That's amazing I love it. can you do it with subpage I mean when you click the navigation page there is another page that will associate to that specific page
just what I was looking for. I wanted the links to go straight to my shops, but pages doesn't do that. This is a great temporary solution until I learn more about html and all!
Good Work
such a valued information u shared.. thanks
If you are able to hack your own blog site, for example, then chances are other Internet users may learn how to access it as well. Your files and documents will not be that safe to begin with. There is no harm in sharing your knowledge with others but you also have to ensure yourself that all your hard work are kept intake and inaccessible to others.
This is why we need to more vigilant in protecting our personal and business information. If you are able to hack your own blog site, for example, then chances are other Internet users may learn how to access it as well. Your files and documents will not be that safe to begin with. There is no harm in sharing your knowledge with others but you also have to ensure yourself that all your hard work are kept intake and inaccessible to others.
Thanks for this tip it does not look too hard to do :-)
tHANKS///
This is great, thank you!
Thanks for your tips! They're very helpful!
your info is not complete.. if you would like to share the info pls share it in a proper way not just one part only..if you do not one to share pls do not post it out...
nice info,thanks for sharing
Nice post, i have tried in my way. http://pro-bit.blogspot.com/
looking for your feedbacks.
Thanks in advance
hey , i did what you told .. but i couldnt change the label thingy
Thanks for your tip to create a horizontal navigation bar for the top of my blogger page and it’s so easy to implement.
hello , u know how to make my menu bar automatically go to my facebook account ...?? ?
You should take part in a contest for one of the best blogs on the web. I will recommend this hubpages post!
Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.
Thank you! :)
Thanks for sharing this information and resources its really help full for me with the help of this we can improve our web design and development.
Web Design Company India
I got my code from a different web site, but this is exactly what I use for my navigation bar. It is so simple and works perfectly! Thanks for the great explanation.
I just tried this and it works- thank you! Now my problem is- how do I create backdated pages???
I need blogger for dummies cause what you said makes no sense at all and there's funky code all over my blog page now instead of pretty menu tabs. Oh and BTW, the tabs that are there don't function :/ HELP!
worked great... thanks so much
wow..its work for my site..
How to get back blogger navbar if you are using a custom template
hi.. u hav done a greate job..
i need 1 more thing.. how abt submenus??
This is great! I was wondering if you knew how to adjust the size of the font?
Anamika S Level 4 Commenter 2 years ago
This is an info i was looking for. Thanks for sharing.