ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Blogs

Horizontal Navigation Bar for Blogger - Without Hacking Your Template

Updated on September 12, 2011

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.

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

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

    • profile image

      Veipliers 4 years ago

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

    • profile image

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

    • profile image

      JJJYYY 5 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. ?

    • KatieP ThinEnough profile image
      Author

      Katie Paul 5 years ago from Sydney, Australia

      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

    • profile image

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

    • profile image

      nhiey 5 years ago

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

    • BackpackerGirl profile image

      BackpackerGirl 5 years ago from Ohio

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

    • profile image

      Mubs 5 years ago

      hi.. u hav done a greate job..

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

    • profile image

      enc0d3r 5 years ago

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

    • profile image

      willy 5 years ago

      wow..its work for my site..

    • Fancy and free profile image

      Fancy and free 5 years ago

      worked great... thanks so much

    • profile image

      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!

    • profile image

      Beth Coulton 5 years ago

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

    • randomcreative profile image

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

    • profile image

      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

    • profile image

      Panu (Thailand) 6 years ago

      Thank you! :)

    • profile image

      Bangla Choti 6 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.

    • profile image

      Bangla Choti 6 years ago

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

    • profile image

      aisple 6 years ago

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

    • profile image

      Translation Services 6 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.

    • profile image

      haseena 6 years ago

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

    • profile image

      Mohammed Ali 6 years ago

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

      looking for your feedbacks.

      Thanks in advance

    • profile image

      yahaya 6 years ago

      nice info,thanks for sharing

    • profile image

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

    • profile image

      Brenda 6 years ago

      Thanks for your tips! They're very helpful!

    • profile image

      Kathie 6 years ago

      This is great, thank you!

    • profile image

      FaiK 6 years ago

      tHANKS///

    • agvulpes profile image

      Peter 6 years ago from Australia

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

    • profile image

      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.

    • profile image

      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.

    • profile image

      riz 6 years ago

      such a valued information u shared.. thanks

    • profile image

      Hasan 6 years ago

      Good Work

    • profile image

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

    • profile image

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

    • profile image

      Elle 7 years ago

      Thank you, thank you, thank you!

    • profile image

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

    • profile image

      Queer English 7 years ago

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

    • profile image

      Alisha H. 7 years ago

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

    • profile image

      algons 7 years ago

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

    • theboxmeister profile image

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

    • profile image

      esoftload 7 years ago

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

    • profile image

      ivneet singh 7 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

    • profile image

      SHAIJAL 7 years ago

      THANK YOU MR.

    • profile image

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

    • profile image

      Jihan S. 7 years ago

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

    • profile image

      Sharon Schock 7 years ago

      Thank you! this helped so much!

    • profile image

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

    • profile image

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

    • profile image

      gayvaughan 7 years ago

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

    • askjanbrass profile image

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

    • profile image

      Peter Paul 7 years ago

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

    • profile image

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

    • profile image

      Amy 7 years ago

      How do I make the font larger? thanks!

    • profile image

      Angela 7 years ago

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

    • profile image

      sara 7 years ago

      You can make your own one very easily,

      Add Menu Bar To Blogger Blog

    • KatieP ThinEnough profile image
      Author

      Katie Paul 7 years ago from Sydney, Australia

      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.

    • profile image

      saifi 7 years ago

      thanx alot i m searching for this for along time

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

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

    • profile image

      sixmats.com 7 years ago

      Great idea!

    • profile image

      Prabu 7 years ago

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

    • profile image

      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.

    • profile image

      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

    • profile image

      New Kid 8 years ago

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

    • KatieP ThinEnough profile image
      Author

      Katie Paul 8 years ago from Sydney, Australia

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

    • profile image

      New Kid 8 years ago

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

    • profile image

      New Kid 8 years ago

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

    • profile image

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

    • profile image

      Shynn 8 years ago

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

    • KatieP ThinEnough profile image
      Author

      Katie Paul 8 years ago from Sydney, Australia

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

    • profile image

      Julie 8 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
      Author

      Katie Paul 8 years ago from Sydney, Australia

      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.

    • profile image

      Tycie 8 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
      Author

      Katie Paul 8 years ago from Sydney, Australia

      You're welcome.

    • Anamika S profile image

      Anamika S 8 years ago from Mumbai - Maharashtra, India

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