Horizontal Navigation Bar for Blogger - Without Hacking Your Template

This 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.

Horizontal navigation underneath your blog header
Horizontal navigation underneath your blog header

From your blog page chose CUSTOMIZE - PAGE ELEMENTS - ADD A GADGET - HTML/JAVASCRIPT.

HTML code for horizontal navigation in Blogger
HTML code for horizontal navigation in Blogger
<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.

newly created gadget positioned under the header
newly created gadget positioned under the header
post all your information on a date that precedes the start of your blog to make it easy to find and edit
post all your information on a date that precedes the start of your blog to make it easy to find and edit

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.

Hubpages articles linked from your blog
Hubpages articles linked from your blog

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.

More by this Author


Comments 76 comments

Anamika S profile image

Anamika S 7 years ago from Mumbai - Maharashtra, India

This is an info i was looking for. Thanks for sharing.


KatieP ThinEnough profile image

KatieP ThinEnough 7 years ago from Sydney, Australia Author

You're welcome.


Tycie 7 years ago

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


KatieP ThinEnough profile image

KatieP ThinEnough 7 years ago from Sydney, Australia Author

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.


Julie 7 years ago

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


KatieP ThinEnough profile image

KatieP ThinEnough 7 years ago from Sydney, Australia Author

Thanks Julie, I love playing with my blog (which now looks totally different from when I posted this!)


Shynn 7 years ago

thank you so much! u're genious!!!


Tara 7 years ago

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!!!


New Kid 7 years ago

I can't get the links to click through, help?


New Kid 7 years ago

Fixed, make sure it's a href NOT a ref and the links will click through.


KatieP ThinEnough profile image

KatieP ThinEnough 7 years ago from Sydney, Australia Author

Thank you so much New Kid -- I didn't realise the typo in the code box. I've fixed it now. Thank you again.


New Kid 7 years ago

You're very welcome, thank you for the easy way to do the bar!


ME 7 years ago

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


me 7 years ago

this is the message I got

Page not found

Sorry, the page you were looking for in the blog test does not exist.


Prabu 7 years ago

This information is very useful to blogger. Thank's for sharing.


sixmats.com 7 years ago

Great idea!


samironwebtrack profile image

samironwebtrack 7 years ago

Hi Katie Thank You, for very long time i was looking for this solution, now i get it..its really a simple one.


EWealthGuide profile image

EWealthGuide 7 years ago from Vancouver

Thank you very much for this tutorial. Great info here, and look forward to seeing what you post next!


saifi 7 years ago

thanx alot i m searching for this for along time


KatieP ThinEnough profile image

KatieP ThinEnough 7 years ago from Sydney, Australia Author

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.


sara 7 years ago

You can make your own one very easily,

Add Menu Bar To Blogger Blog


Angela 6 years ago

Worked like a charm..Thank you so much!!


Amy 6 years ago

How do I make the font larger? thanks!


Rukhpar Mor 6 years ago

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??


Peter Paul 6 years ago

Thank you KatieP! Your site is very helpful! Thank you! =)


askjanbrass profile image

askjanbrass 6 years ago from St. Louis, MO

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!


gayvaughan 6 years ago

Okay, the nav bar was easy to install but I do not know how to get the links to work...any suggestions?


Paula 6 years ago

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?


Paula 6 years ago

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.


Sharon Schock 6 years ago

Thank you! this helped so much!


Jihan S. 6 years ago

That's great! Thanks. It's one of those "why didn't I think of that?" tricks. So simple.


Amy 6 years ago

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.


SHAIJAL 6 years ago

THANK YOU MR.


ivneet singh 6 years ago

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


esoftload 6 years ago

yes... wonderfull info... helped me lot..


theboxmeister profile image

theboxmeister 6 years ago

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


algons 6 years ago

Finally, someone who directs my concern! Thanks!!!


Alisha H. 6 years ago

hey, i was wondering. how do you get multiple pages for one label?


Queer English 6 years ago

Thank you so much for this. Look at what you've done to my blog. Amazing! Love it!


iqbal 6 years ago

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


Elle 6 years ago

Thank you, thank you, thank you!


bokals 6 years ago

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


Missus D 6 years ago

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!


Hasan 6 years ago

Good Work


riz 6 years ago

such a valued information u shared.. thanks


shredding Houston 6 years ago

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.


shredding Houston 6 years ago

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.


agvulpes profile image

agvulpes 6 years ago from Australia

Thanks for this tip it does not look too hard to do :-)


FaiK 5 years ago

tHANKS///


Kathie 5 years ago

This is great, thank you!


Brenda 5 years ago

Thanks for your tips! They're very helpful!


josephine 5 years ago

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...


yahaya 5 years ago

nice info,thanks for sharing


Mohammed Ali 5 years ago

Nice post, i have tried in my way. http://pro-bit.blogspot.com/

looking for your feedbacks.

Thanks in advance


haseena 5 years ago

hey , i did what you told .. but i couldnt change the label thingy


Translation Services 5 years ago

Thanks for your tip to create a horizontal navigation bar for the top of my blogger page and it’s so easy to implement.


aisple 5 years ago

hello , u know how to make my menu bar automatically go to my facebook account ...?? ?


Bangla Choti 5 years ago

You should take part in a contest for one of the best blogs on the web. I will recommend this hubpages post!


Bangla Choti 5 years ago

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.


Panu (Thailand) 5 years ago

Thank you! :)


Chetaru 5 years ago

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


randomcreative profile image

randomcreative 5 years ago from Milwaukee, Wisconsin

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.


Beth Coulton 5 years ago

I just tried this and it works- thank you! Now my problem is- how do I create backdated pages???


Marcia 5 years ago

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!


Fancy and free profile image

Fancy and free 5 years ago

worked great... thanks so much


willy 5 years ago

wow..its work for my site..


enc0d3r 4 years ago

How to get back blogger navbar if you are using a custom template


Mubs 4 years ago

hi.. u hav done a greate job..

i need 1 more thing.. how abt submenus??


BackpackerGirl profile image

BackpackerGirl 4 years ago from Ohio

This is great! I was wondering if you knew how to adjust the size of the font?


nhiey 4 years ago

maam can you create a video for this tutorial??pls thank you


JJJYYY 4 years ago

Thank you for a really simple solution. I tried it at the top of my webpage using the Awesome template in Blogger and it did not do well...the lettering was faded and the tabs were thin.

However, I used it in the footer and it's really a gem. Easy to set up and change.

can be viewed here: www.liveholisticnow.com

Also, it drew me to your main site http://hubpages.com/@katiep-thinenough and i was very touched by your film. May you be able to continue to turn a tragic event into a healing for others.


KatieP ThinEnough profile image

KatieP ThinEnough 4 years ago from Sydney, Australia Author

Blogger has changed so much and I no longer use it so I'm glad you've found a use for the coding. Thank you for your kind words about my film. K


JJJYYY 4 years ago

You are welcome. I am new to Blogger and don't have a clue about HubPages. I only know that little number next to my photo spot keeps going down, down, down. I'm wondering how I can get it into negative numbers: -1,-2, -3, etc. ?


jontymagicman 4 years ago

Thanks a lot Katie,

I am going to apply this trick on my newly created blog at http://www.hubberspot.com .... I wanted to have categories link to be displayed on horizontal navigation bar ..... can you help ??.... As blogger provides only twenty pages ..... i need to have labels as my naviagation tabs ...... please do share a post related to it ....... Thanks a lot once again ......


Veipliers 3 years ago

I utilized to get at the top of existence yet of late I've truly accumulated the level of resistance.


gepeTooRs 8 months ago

Virtually no tool matches the simplicity of which No Hands SEARCH ENGINE OPTIMIZATION has, the one required plugs are your blog street address, search keyword phrases and desired single point texts and also NHSEO will do devices available for you.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working