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!


Chele said...

AWESOME!!! Thank you for your expertise! :)I was waiting patiently for this!

LadyBug-Kellie said...

I think I am a lost cause LOL!

I followed the instructions on how to add a gadget to my header spot, and it apparently didn't work. I tried a few times, it seems pretty easy so i am not sure what i messed up :)

I'll keep trying - thanks for the great info!

Muthering Heights said...

Awesome tutorials, thank you!!!

I do have a couple of questions though...what if you have buttons that you would like to use along the top menu bar? How does that change the required steps?

Also, what about applying my blog design to a 3 column layout? Do I need to find a new design?

Nicole Feliciano said...

I really want to do this...must set aside time to tackle this project. Thanks for the guide.

Jennifer R said...

Oh where were you when I first started my blog LOL. These are great instructions - I am going to try them on my newest blog and see if I can do it. Thanks!

Oh - this is Eighty MPH Mom - I changed my blogger profile to Jennifer R

Flying Giggles and Lollipops said...

You motivated me. I had the toolbar...but I just used paint.net to add some buttons...it doesn't look wonderful, but it does look better than it did. I will have to mess around with it...thanks!

JamericanSpice said...

I already have the header thingy boo so I'll go check out the craved 3 column. And no i wont leave you. Thanks :)

m.e (Cathie) said...

THANK YOU!!! I have been madly trying to change to 3 column with alot of failures, yayyy, I finally got it. now for your next project.
thanks again :)

Joy said...

Thanks so much, I have been wanting to change to this and I didn't know how. I am going to try it today :)

ChefDruck said...

Your posts are amazing. I have been waiting for months to do this. Maybe even years. Now I have my project for tomorrow.

Another question I have is how to make my header thinner. The width is fine, but it is too tall. Any suggestions on software to fritz around with that?

Chanda the Eco-Cheap Mom said...

Your tutorials have been so helpful! I could not have done as much with my blog without your help! Thank you so much!

I have a question about this one...how can I change the text size and color?

Thank you!

Related Posts with Thumbnails