14 HOW TO: Create a Menu Bar

A lot of you requested that I teach you how to make a navigational bar under your header to make your blog more accessible.  So guess what we are going to do today?

 The good news - it is easy to do.  It may take some time depending on how you do it, but you won't regret it. The first way is the easiest way and that is to use the Blogger Pages which then creates a menu bar for you.  However, this is nothing fancy and only involves the pages you create via Blogger Pages.  Click HERE to find out how to do so. If you're looking for something a little fanicer... say something like the one I did on Someday Crafts or My Thoughts and Treasures, then you will need to do a little more work. The first step is to create your menu images.  Whether you want a fancy text or an actual button does not matter, you still need to create a jpg, gif or png image to use as the basis for the menu button.  If you want Home, About, Shop and Contact buttons, then you need to create a separate image for each.  There are many ways you can do this, depending on what software you have.  I am going to show you how using Paint, available on most Windows based computers.  (If you already know how to create your images scroll down to the bolded green text below).  First click on your start menu, all programs, accessories, Paint. When it opens you will have something like this:

 You will want to crop the artboard so that your buttons are all consistent in size and provides equal spacing between each button.  SO, click on the Rectangle tool and create a rectangle the size you want your button to be. Something like 200 px X 75 px should give you enough room... but you may have to play with the size depending on how wide your blog is.  If your blog is only 625 px wide you will only be able to fit 3 buttons at 200 px wide.  You can tell what size your rectangle is by clicking and forming your rectangle - look down in the bottom right of the program and you will see the size change as you move the size.  Once you get the size you want, right click and select crop.  Now you have the artboard the size you want.

Now looks like this:If you want your button to be an actual button go ahead and fill in your background or use the rounded rectangle shape to create it.  If you just want text use your text tool to add your wording.

 

To center it use the Rectangle tool to select the text and move it where you want it.  (If you have a colored background like I do in the example above and you need to move your text you are going to get a white spot.  To fix this, select your background color and then use the paint bucket and click where the white is.) NOTE: Unfortunately you cannot create a transparent background in Paint, so if you are putting this on anything but a white background you will see white around the words.  Fortunately most people have white backgrounds where the menu would be placed anyway.

Now you want to click on file, save as.  Name your file and I recommend saving it as a png.   Delete the text you have now (using the rectangle tool, select the text and then hit your delete button.  Again, if you have a background color you are going to have a white spot where you just deleted and will need to use the bucket tool to fill it back in).  Continue on with the rest of your buttons following the steps above. Once you have created all of your buttons, go to your Blogger Dashboard.  Create a new post and upload your images.  Insert them into the post. Right click on Design and either open in a new tab or in a new window..

 

In the design window in the gadget box under your header you are going to click Add a Gadget.

Select HTML/Javascript. 

In another tab or window open your blog.  Find the first page you want to link to in your menu.  If it just your homepage, then select the link.  My link is http://733blog.blogspot.com.

 Go back to the html/javascript gadget box and in the html format type the following:

 

To find your image source go back to your post where you inserted your menu button images and click Edit HTML.  Locate img src= and copy all of the text within the quotes.  Do this for each image (it is important to name your images so you can locate each one in the html.  If you prefer you can add one image to the post at a time and then delete it after you have copied and pasted the image source, thus making it easier to find the code you are looking for).  See example below: Paste your image source in the html string where it says YOUR IMAGE SOURCE in the gadget window. Once you have done this for each button you will click on Rich Text.  Now you can see your buttons. Click save and you should be done! Need a place for cute, free fonts? Check out Kevin and Amanda's Free Fonts! Now if this looks like to much work you can have me do your buttons for you!  I will design and implement them on your blog for you all for only $15!  Check out my Design page HERE.