How to create your own Menu Bar

When I first starting blogging, I had no idea how to make my menu bar or how to make it linkable. I really understand how frustrating it can be when first starting your own blog. I wanted things to work and to work right away. It was a good deal of late nights and doing things over and over again until I figure it out. Luckily though there is a fellow blogger right next door that was able to help me along when I got really stumped! (check out her blog too, Happy Go Lucky , she has a lot of great tutorials!) Not everyone has a fellow blogger right next door. So what do you do when you are really stumped? You search the internet for how to... or tutorials! Recently I have needed a challenge. ( and to update my blog a bit) I have never created a step by step how to. Creating a post like that, with screen shots (lol getting them in order took me more than one try!) was just the challenge I was looking for. I knew that it would need to look good and be really thought out. It was also a great way for me to show and archive what I have learned. The best thing about accomplishing this post was I was able to challenge myself and create my new menu bar! So here it goes........ How to create your own Menu Bar Step by Step

Step 1

In blogger create a page for each one of your categories that will be in your menu bar. For example Recipes could be a category. Makes your categories relate to what you are posting on your blog. 

Step 2 

Once you have created your pages, now you can design your menu bar. There are many free online photo editors out there. I like to use PicMonkey when creating something new.  It is easy to use and has a lot of awesome overlays. It is free to use, but you can sign up for Royal and get even cooler overlays and fonts. oh and I have found that when using PicMonkey the back button can be your best friend!

The one thing that always seems to frustrate me is the font size when I am transferring my picture onto my blog. It can be trial by error, but I have found that font size 24 worked in my menu bar!

Wondering why my background is checker? That is because it is set to transparent. I tried with different color backgrounds, and didn't like them. The transparent background made my menu bar easier to read on my blog.

Once you have constructed your menu bar save it!

Step 3

Once you are happy with your menu bar, now you need to link it to the pages you made in step 1. Load your image on to a image mapping tool. I like to use Image-Maps.com. The first time I used it, I was so surprised at how easy it was (and it is free).

Right click over your first category in your menu bar. Now draw a rectangle over the category and place the page URL. To find your page URL, go into your blogger pages dashboard and hit view. Just copy the URL and paste it into the image map tool. Do this for each one of your categories. Once you are finished linking your pages each category should be in red. Right click again and hit Get Code. Copy the HTML code.

Step 4

The next step is to get your new link menu bar onto your blog. Go to your blogger dashboard and open up the layout section. Under the header of your blog create a HTML gadget. Paste the HTML code from the image map into the gadget. Preview your blog before you click save arrangements to make sure everything is the way you like it!

And voila, you have created your own menu bar!

Building your own menu bar can be frustrating, but I hope this how to can get you over that stump. And besides doing something like this for your blog is always gratifying!

So how did I do creating my first step by step how to?

Want a few more tips on building a menu bar? Here are a few other things I learned along the way!

If you want your menu bar center in your blog add <center> to the beginning of the HTML.

It took me three tries to link up my email to the ASK category. The : was what I was missing! 
mailto:your@emailhere

Social media is key to any blog! Over at DesignCrazed they have a post of 130 Best Free Social Media Icons! 

And don't forget I am always here for ya! Have any questions about building a menu bar? Just shoot me an email!