Tech Tuesday: Menu Bars and a 3 Column Blogger Layout

Since you're all salivating over the 3 column layout, I'll get to that first. Well, actually, I'm going to send you somewhere else--to another blog that has a better handle than I do on turning your 2 column layout into a 3 column one. I essentially would have been repeating what was there anyway, so I might as well save myself the trouble and just send you the direct link, from a site called Blogger Buster. All they do at that site is teach you about messing with your blog. But don't leave me for that site!! I may be a busy mama, but I still want to help you, so I'm offering a tutorial on another cool thing--a menu bar!

That's the fancy line of buttons across my blog, right under my header, that link to my contact info, about me, subscribing, etc. It's great having a menu bar to free up some space on your sidebars. While mine has graphic buttons, I'm going to instruct you how to put a simple text version on here. If you are able to create your own graphics, you can make the type that I have too, however many of you don't have graphics software like Photoshop to create them. Because I {heart} my readers, I tried messing around with Paint, trying to figure out a way to make buttons, but I wasn't able to do it. I'll keep working on this.

So for now, it will just be simple text links, like these:
Simple in my book, is often better and more clean looking than lots of junk all over your blog, so don't be disappointed!

To begin, you'll need to add a gadget to your Blogger header, as circled in red below.
You may recall a previous post about adding another gadget to your header in Blogger. Well, you'll need to refer to that and go through those steps before beginning here. Off you go!

Now that you have that gadget, you can use it to add your menu bar.

1. First, think about the topics you'd like to put on your menu bar. Things like "contact me", "about me", and "giveaways" would be obvious choices.

2. For each topic, you'll need to have a URL link to that button. For example, for "giveaways", you'll need to label all of your posts that are for giveaways and then put the link to those labels. You can right click on the label on your blog (I have my labels in the sidebar) to get the URL. It's typically something like: http://katydidandkid.blogspot.com/search/label/Giveaways

3. For some of your topics, you may need to write a new post that has the link for that topic. An "about me" page might require this, so go ahead and write a flowery description of your wonderful self. I date the post way back into the archives (like January 2006), so it doesn't really show up on my blog. You'll then use the link for that "about me" post.

4. For a "contact me" link, you can use your email address. The link would be maito:youraddress@something.com. Be sure to have no space in the "mailto" section.

5. Once you have links for all of your menu topics, it's time to do the nitty-gritty tech stuff. Go to your Layout page and select the "Add a Gadget" above your header.

6. Select HTML/Javascript

7. You will now add the code for your menu bar tags here. You'll need to add them in the order you'd like them to appear on your blog, going across the top from left to right. Here's an example
<a href=http://yourblog.blogspot.com>HOME</a>
<a href=http://youraboutmepageURL>ABOUT ME</a>
<a href=mailto:youraddress@something.com>CONTACT ME</a>
<a href=http://yourblog.blogspot.com/search/label/Giveaways>GIVEAWAYS</a>
<a href=http://yourblog.blogspot.com/search/label/Blogroll>BLOGROLL</a>
Etc. etc.
The sections in purple are the URL links to each of your topics. You can add more categories, based on the links above. You'll just replace the URL addresses with your own, and then add your own category in the sections that are in capital letters (or lower case, if you prefer that look). All other parts of the code will be the same.

8. You can also center your menu bar on your page by enclosing all of the HTML text that you add with the tag <center> (put this at the beginning of all that text) and closing it with the tag </center> (at the end of the entire text).

9. Once you've finished adding all of your links and tags, save the gadget. Then preview your blog to see how it looks. At any time, you can simply delete the HTML gadget to get rid of your menu bar. But be careful of that too!

As always, let me know if I can troubleshoot any problems you may encounter. Good luck!