DIY Image Menu Bar Under Header

Before we start > If you don't have photoshop then you can also use the paint program. Check out this DIY I did a while ago to help you create an image in paint for a header, and instead apply it to making an image menu.
Also, I did a post on how to do this a while ago, but I left out details like how to actually create the image menu and upload the photos first. I also changed the code that I used to a code that allows you to choose a size for each image. If you want you can still check it out here.
Lastly before we get started, if you don't like reading a lot and have a bit of a handle on this then scroll to the bottom for the easy 5 step guide. 

 
Step One: First I created an image in photoshop of what I wanted my image bar to look like. I got the flowers from the Pugly Pixel if you want to check those out here! Also, the font I used is You Won't Bring Me Down. I found it on DaFont if you want to check that out as well here.

Step Two: Crop what you want your first image to be. So you can see that I cropped after the flower for my first button. This means that when I go to crop my second image I will crop right before the flower in the same place.
After you crop your first section Save As and name it. I usually keep all of my images that I am working with saves on my desktop so that I can find them easily and then store them in a file later.
After you crop and save the first image go to undo to bring back your whole menu bar. Then do it for each separate image in your menu.

Step Three: Once you have all your images saved separately, upload them to an image sharing service. Some people use Flickr or Photobucket or something like that. What I do is create a page where I can upload photos that no one else can gain access too. To do this go to dashboard > New Post > Edit Pages > Create Page. Upload all of your separate images and then right click them and press copy image location. If you have created a secret page on your blog like I have then you will have to press preview and then right click on the image.

Step Four: Go to your dashboard and then design. Under your header press add a gadget and select the HTML gadget. Copy the code in the box below once for each image you are putting in your menu bar. For example I have five buttons therefore I copied the code five times. Then add your information in the code. So where it says too add your blog address, blog title (or the title of the button ex. "home"), and your image location (right click on the image, like explained above). Then you have to add the size you want your button to be. I usually have to play around to get this to be what I want it to be. So right now you can see that I have my width at 185 and my height at 70. You can change this depending on what you want your buttons to look like. So if you find that your bar is too long then you can shorten the width on each one to make it fit. Make sure you have the height set for the same size on each one or your bar won't line up correctly.

<center><a href="BLOG ADDRESS HERE" title="BLOG TITLE HERE"><img src="IMAGE LOCATION HERE" width="185" height="70" alt=LDC designs" /></a>

Step Five: Now all you have to do is add < span > (without any spaces) between each code to remove the spaces between the images. If you want to have each button separate instead of a full bar then you don't have to do this. Make sure you have each code touching the span. So what you will have is CODE< span >CODE< span >CODE but without the spaces between span and the arrows. If you don't do this then you will have white spaces in between.


Here is the short version for those of you who don't like reading that much, like me. 

1. Create your menu bar in a program like photoshop
2. Upload them so you can get the image location
3. Add the info into the code above
4. Play around with the height and width to get it the right size.
5. Use the < span > code (without the spaces) to remove the white between each image.

And that is it I think! Send me an email if you have any questions at all! Also, let me know if I let some important detail out accidentally haha.
Email me the link to your blog if you end up using this tutorial to create an image menu bar!
Good Luck!
Xo ldc