Today I continue the second half of this tutorial…how to add a horizontal navigation bar in Blogger…
How To Add A Horizontal Navigation Bar in Blogger – Video 3
Code needed for this video:
3. Nav Bar Code
<div id=”newnavbar”>
<ul>
<li><a href=’http://www.yourblog.blogspot.com’>Home</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>About Me</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>Reviews</a></li>
<li><a href=’http://www.yourblog.blogspot.com/yourpost’>Links</a></li>
</ul></div>(NOTE: If your nav bar displays as bullets, make sure you only have one set of quotation marks when the snippet is copied over. For some reason, single quotes seem to work better than double quotes, but toggle between the two if you have problems getting it to display correctly. Also, try erasing my single quotations altogether and retyping your own. There is something wonky about copying and pasting them that happens in Blogger.)
How To Add A Horizontal Navigation Bar in Blogger – Video 4
Congratulations! You have successfully added a navigation bar to your Blogger blog.
Any questions?
Yes, you in the back…
WOW!!! This is hands down the most fabulous tutorial set that I have ever participated in. Thank you so much as I have often wondered how to do a horizontal nav bar. I love your blog!! You are wonderful!!
[Reply]
I can’t believe I found this… actually Amanda at http://www.kevinandamanda.com told me what to search for and I found U!!! Thank you soooo much… this will make my “teacher blogs” much more user friendly!!!
[Reply]
Hi there Nicole!
Thanks for the great videos! My navbar is not horizontal. Should I erase my current html to a plane template first?
[Reply]
I can’t believe I found this… actually Amanda at http://www.kevinandamanda.com told me what to search for and I found U!!! Thank you soooo much… this will make my “teacher blogs” much more user friendly!!!
[Reply]
Thank you so much. I now have a lovely horizontal nav bar. But I’m lost. How to I link the posts to each “page” we created for the nav bar? Let’s say I have a “Recipes” link for the nav bar. When I post a new recipe it doesn’t link to the nav bar. I’m sure I’m missing an easy step, but can you explain? Thanks again for these awesome tutorials.
[Reply]
Hi Heather, glad this was helpful. About linking new into your new page, you will have to do that manually. So, if you made a new post with a recipe, it wont automatically be added to your “Recipes” page. You could add them as links in a row to have a central “hub”, but its not automatic. This process only creates the page, not the content. Hope that helps…good luck!
[Reply]
Hello,
These tutorials are so awesome. However, I am encountering a slight problem. For some reason, my tabs on my horizontal navigation bar are aligned vertically (unlike your example which is aligned horizontally). Please what am I doing wrong? I followed your tutorials to a tea. Thanks
Joy
[Reply]
thanks for helping me make my blogshop easier to navi
[Reply]
Excellent tutorial! Thank you for putting this together.
[Reply]
Hi. Thanks so much for the tutorial, however I am having problems. Something isn’t working from the last video. I did my posts, and linked them to the gadgets just like you showed but when you click on the link it’s not working and says the page does not exist. Help!!! Please!!
[Reply]
Hi, I currently have a blogshop : http://www.minijumble.blogspot.com and I want to change the archives part you know they write this: October 2009 I want to change those months to Clothes , Books like that. How Do i do that? Please email me on how to do so… Thanks
[Reply]
Hi Nichole…thank you so much for these outstanding vids!
I too am having trouble with my nav bar being vertical instead of horizontal. I’m using Stretch Minima, but have made it a 3 column…when you have a spare minute (I know you are busy) could you suggest a solution? Thanks so much!!!
Hugs,
Lisa
[Reply]
This was just the tutorial I was looking for! My nav bar only wanted to go vertical until I followed your easy steps. Love the videos too, works much better for someone like myself who learns more visually.
Thank you so much!!
[Reply]
Okay, I have the pages set up, but how do I post to them now? Under my Adoption Related Favs tab I just changed the existing post, but I don’t know how to add anther post under that tab.
Also, am I able to add more tabs? If so how?
Thank you!!!
[Reply]
Oh my goodness. Thank you. This tutorial series was the best. I appreciate your efforts in putting this together.
[Reply]
You’re welcome! Glad it was helpful!
[Reply]
For those of you who are wanting to have multiple (and new) posts show up under your new Nav Bar tabs you can do this:
Instead of directing linking to the specific post URL, create a label that you put on each post. Then in your Nav Bar have it go to the labels URL. Then anything with that label will show up.
Example: My ‘About Me’ just goes to specific post. Whereas my ‘Florida Deals’ goes to anything I’ve labeled with Florida Deals.
I’m so bad at describing things, but I hope that helps some of you. You can go to my blog and see what I’m talking about. http://www.SavingObsession.com
I do have a question of my own though — my nav bar will not go past a certain point on the left so it always has this ‘off center’ look. How can I go about fixing that?
[Reply]
Hi:
I was just about to start your tutorial but wanted to know if you know how to change the background color of the navbar. I’d like a solid color going across my page behind the links…….
[Reply]
Hi your tutorials were great. I was wondering if you knew how to make it show up more to the right instead of centered. I would appreciate it. Thanks again!
[Reply]
Hi Nicole, tks v much for your videos. It was a breeze following it. Really appreciate your tutorials.
May I ask a few questions:-
1) How do I add more horizontal menus in the navigation bar? I have tried but the additional ones turned out in black color.
2) Do u have any tutorials on how to have sub-menus under the horizontal navi bar?
Have a great day ahead!!
[Reply]
Hi Kelly, there are updates to Blogger that make adding a navbar MUCH easier. Just go to Posting>Edit Pages, then create a new page, just like you would a post. Then, upgrade to the Template Designer…go to Design>Template Designer>Advances and there you can style the “tabs text” and “tabs background”. As far as adding a secondary navbar, Im really not sure about that. You might want to Google “blogger navigation submenu” etc. Good luck!
[Reply]
Hey there Nicole !
…. I wanted to tell you that your videos were very helpful..made me understand more that i though lol…
I had a question about the last video you mention on here that if our nav. bar showed bullets to make sure you only have one set of quotation marks when the snippet is copied over. but i was confused about that … like for me the code work for the the first 4 but i wanted to add 3 more ..so i copied the codes so i could do the same …but those 3 have bullets and i dont know how to take those out…..do you think you could help me with that ?
[Reply]
Hi…Thank you so so much for these wonderful videos. This has been extremely helpful for me and i now have a navigation bar for my blog. Keep up the good work. thanks again!
[Reply]
Well thanks! Glad it was helpful…
[Reply]
I’m having troubles with my navigation bar being vertical. I followed your instructions exactly. Please help me to fix this problem. Thanks
[Reply]
Hi Nicole,
I was in search of adding a nav bar to my blog space and come across your video. It is simple and superb. You will be a good mentor, loved your presentation. Thanks for putting up these videos.
-Mythreyi
[Reply]
Hello Nicole!
I just found your site recently while looking for some tips on how to customize my new blog.
Just like everyone else, I love your easy video tutorials…very, very easy to follow.
I just followed your steps on how to create a horizontal navigation menu and, like some others, mine are showing up vertical instead of horizontal.
I’ve looked thru the comments but I see no suggestions on how to correct the problem. I’ve gone from ‘ to ” back to ‘ and back to ” again on the html codes and nothing changes.
You can look at my new blog site….downourcountryroad.blogspot.com to see how it looks and I would so appreciate any help you can give me.
Thanks,
Velma
[Reply]
Nicole Reply:
August 9th, 2011 at 9:46 am
Hi Velma,
Take a look at your code in Edit HTML. Im seeing a double set of ” around newnavbar. Right now you have
“”newnavbar”" and it should just be
“newnavbar”.
If that doesnt work, try to retype in the one set of ” around newnavbar. As crazy as it sounds, there is a difference between copied and typed quotation marks and Blogger is very sensitive to it.
Let me know if that helps!
[Reply]
Thank you so much on the tutorials they were extremely helpful and well taught!!!
much appreciated!
Tabitha
[Reply]
this is a very good informative site.
[Reply]
These are wonderfully easy videos! I followed everything perfectly but I cant seem to get the pages, About, to link up. Event the “Home” button returns an error page. I have tried it over and over. I even started that whole process over, recopying the code in Video 3. And it all looks exactly like yours. I dont know what could possible be wrong. Any ideas?
Thanks for doing these videos!
[Reply]