Jan 28, 2009

Adding A Horizontal Menu To Blogger Blogs

Do you wish your garden blog on Blogger had a fancy horizontal menu near the top like the ones you see on garden blogs powered by WordPress? Well, you can easily add one to your Blogger garden blog by copying and pasting a little bit of code. In this example I'll show you how to add a horizontal menu like the one I added to the Chicago Gardeners blog.

Step #1:
Backup your template and save it in case you do anything wrong you can always upload it and go back to your original template. Another option is to try this first on a test blog and if you do it without any damage to your test blog then you can proceed to do it on your own garden blog. To implement this you need do the header modification that allows you to add gadgets to your blogger header.

Step #2:
DynamicDrive.com provides a number of free horizontal menus you can add. For the Chicago Gardeners blog I chose "thick underline menu." So I copied the The CSS code they provided leaving out the very first line and the very last line. Look carefully, see what I didn't bother to copy? <style type="text/css"> and </style> at the very bottom.

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
I just pasted this into my template before the footer code and previewed to make sure I didn't make a mistake then saved my template. The next step was to copy all of the HTML code they provide that will create the links/buttons that people will click on to navigate your garden blog.

<div class="underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>


In your header add an HTML/JavaScript gadget and past the above code. Just make sure to change these URLs to URLs on your garden blog or to websites you want people to visit. For example I would change the first two as follows

<li><a href="http://www.gardenbloggers.com/">Home</a></li>
<li><a href="http://www.gardenbloggers.com/2008/09/about.html">About</a></li>


Hopefully you get the idea. You can make the links either to posts of yours or links to your photo album or another blog you may have. It is up to you. Once you've done that just save the gadget and move it up or down to where you want it to sit on your header.

DynamicDrive provides a number of horizontal menus you can use and you can probably find one to match your garden blog colors and style. If you happen to choose one that uses images just right-click the images they provide and save them to your computer. Then upload them to your image hosting site and replace the url in the code with the url where your image is hosted.

36 comments:

  1. WOW - I love this blog. It's like you are reading my mind. I want to print out every post and save them for when I'm feeling a little less stupid than usual.

    ReplyDelete
  2. Wicked,

    Save the tree and just look at the link in the menu bar above labeled Table of Contents. I'll be adding all of the posts there by category to make them easy to find in one place. I just updated it today because of your comment. Thank you for the feedback it means a lot.

    ReplyDelete
  3. Wow...these posts are totally made of win for being practical and easy to read. I will try this one out once I stop having such a yucky headcold that makes everything seem an effort. Thank you for all the time you take to do these posts, MBT.

    ReplyDelete
  4. Thank you so much!!! I've been struggeling with this for a long time now, and I finally got it right!

    (Sorry for my bad english, I'm from Norway.)

    ReplyDelete
  5. ok I got the tabs up on my site...now how do i actually post the content in the particular tab? for me, it's recipes on one of the tabs, how do i post recipes in that tab?
    my site is
    http://loveveggiesandyoga.blogspot.com

    ReplyDelete
  6. Averie,

    Looks like you got it to work. Now just copy the code for the links and replace the URL from Dynamic Drive with the URLs to your posts. Click on the title of your post(s) to get the direct links to those particular posts you want to put in your navigation bar.

    ReplyDelete
  7. Thank you for the speedy reply but I am a yogi and code is not my forte :)

    Could you rephrase what you just told me in a bit more basic language...the Dynamic Drive thing is a mystery?

    Thanks in advance!

    ReplyDelete
  8. Averie,

    Do you see the code above that has all the links to DynamicDrive.com? It is above the line that reads "In your header add an HTML/JavaScript gadget and paste the above code.?"

    Copy all of that and change the URLs to the URLs of your blog posts.

    ReplyDelete
  9. I'm not trying to be retarded, I promise. Are you talking about the code on dynamicdrive's site or yours? Sorry I am at my maximum capacity with trying to figure this stuff out...so close...but just can't quite figure out what to put where? If you could give me the link and then tell me what to do b/c I don't see what you're talking about, sorry. Thank you for your time, I really appreciate the help!!

    ReplyDelete
  10. LOL Averie,

    Do you see the bunch of code I'm talking about? The second to last block quote? With all the links to the webpages on DynanicDrive.com?

    Then if you look at all the last block quote I showed how I changed the URLs in the code to my gardenbloggers.com blog?

    That's what you have to do too.

    Copy everything that is in the block quote and then just remove all of the http://dynamicdrive.com URL and put YOUR URLs there.

    Let me know if that is clearer or not.

    ReplyDelete
  11. Right that is actually what I did in order to create the tabs.
    For instance "codeblahyadda/About" or yaddayaddacode/Recipes. So yes, the tabs are coded like that. It's just that from my own internal workings of when I make a post, how do I get it to post into recipes? Or post into the particular tab I want it in. Like, I go to Make New Post, start typing, write my post. Say that's a recipe, and I want it in my recipe tab. how do i get it into http://loveveggiesandyoga.blogspot.com/recipes ?

    I guess that's the question. I actually figured out how to change the code in the Add Widget-Add Java Script, change the name of the code, etc...got that part.

    It's the how to make a post to show up into that section I am stumped on.

    It's not clear to me....I need handholding. Like go to this link, do this, then do that, etc....

    Thanks for one last ditch effort to help me :) I actually have a few masters degrees...clearly not in code though!

    ReplyDelete
  12. Avery,

    Ok. Now I think I understand what you're talking about. Try this: Click the "recipe" label in a blog post of yours. It should show you all of the posts you marked with "recipe" so now go to your URL and copy the URL string. Just looked at your blog and it looks like this: http://loveveggiesandyoga.blogspot.com/search/label/recipe

    Add that URL for the Recipes, do the same with the label for Yoga and so forth.

    Now for the others. For home you would use your URL http://loveveggiesandyoga.blogspot.com/ do not use http://loveveggiesandyoga.blogspot.com/home , like you are currently doing. As for the "About" one you'll need to create a post and title it "About" and then when you publish click the title and copy the URL and post that for your link. I see you currently are using http://loveveggiesandyoga.blogspot.com/about which is not a valid link on your blog.

    Same thing if you'd like to have your Blogroll up there, you'll need to create a post, titled, BlogRoll (or something similar) publish it, click the title, then copy the link and use that URL.

    Does that all make sense?

    ReplyDelete
  13. This totally makes sense and after I get my 2 yr old to bed and have a clear head to do this I totally will and think this will work. Ahhh...now we are speaking the same language. Email is a tricky medium but you totally answered my question about how to post and get it to show up in the right section. And the tips abou the About and Home sections...excellent, thank you! I will post back and letcha know how things are going later on....thank you so much!!!!!!!!!

    ReplyDelete
  14. Well after trying what you suggested and trying to do what you say....I am coming up empty handed. The posts are not going into the correct tabs.

    I need to be able to type a recipe for say a chocolate cake. I need to type chocolate, add water, eggs blah blah. Then I need to be able to hit "Publish Post" and I need to be able to have that recipe slip in under the Recipe Tab. Same with pics I plan to post or the About. Arrgghhhhh....thank you so much for trying to help me and you don't know me from Adam and have been so kind, but it's just not comin' together for me. Oh well....

    ReplyDelete
  15. Averie,

    I sent you an email.

    ReplyDelete
  16. Same prob as Averie. I have my menu bar, but only one original post in each section. If I add a new joke which I want to fall under "jokes" it stays only on home page. If I post a new recipe, it only stays on home page and not under "recipes" What am I doing wrong??

    ReplyDelete
  17. Thank you Good Tips.

    ReplyDelete
  18. I need to know what Avery and Pat have trouble with. How do I put posts into certain tabs????

    ReplyDelete
  19. Hello sir!!! i have one query!! as i m just beginner of bloggiing i wana ask u you that what does"FOOTER CODE" in above post means!!! where do i find it !!! in edit in html i knw!! but where!! please help me out

    ReplyDelete
  20. Manik,

    It is at the bottom of the template (only those with footers) and it reads "footer."

    ReplyDelete
  21. Anonymous3/15/2010

    hello there!very helpful this article!i m done to replacing the links!but i m stack at the same problem they had!i cant post under the right label!cant make it work!

    ReplyDelete
  22. Anonymous4/24/2010

    Thank you very much for posting such a useful code. Your post greatly helped me to finish my project.... thanks a lot

    ReplyDelete
  23. thanks man !
    hexlator.blogspot.com
    that was helpful
    Cheers

    ReplyDelete
  24. thank you for your concern about making such a good article. i'll try.

    ReplyDelete
  25. how to change the link with picture?

    ReplyDelete
  26. I want to thank you very much for the great tutorial, i made it finally!
    Btw, there is any way to keep the buttons selected after I clicked one from the horizontal menu?
    Thank you again!

    ReplyDelete
  27. Bogdan,

    If only does that if it is part of the code. Sorry I can't help with that piece.

    ReplyDelete
  28. Thanks For Your Help...

    ReplyDelete
  29. ""I just pasted this into my template before the footer code""

    can you please explain it more that where i should add?

    ReplyDelete
  30. A lot of thanks.
    Hey, do you know that you really helped me by this post which I searching for so long. Eventually, I got yours. And it's working very nicely on my blog. http://for-tech-lovers.blogspot.com/

    ReplyDelete
  31. Hi.

    I have created 4 menu bars in 4 colors(Red,green,blue,black) so it can be used on any blogger theme.

    http://blogshippo.blogspot.com/2011/09/how-to-add-professional-horizontal-css.html

    Tell me if you like them and how can i improve them .

    Cheers

    ReplyDelete
  32. Hi, did anyone figure out how to 'post' in each tab and how to create those posts? Id idealy love to original ones i.e. what i am reading, bucketlist and then about music that i blog about. HELP!

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. Hiii
    Can they point to "labels" instead a post?

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.