Some of you have noticed that I added a linked menu bar to my blog. I was sick of how cluttered my sidebars were getting, so I decided it would be good to give some of those elements seperate pages. It is very simple to do with the right instructions.
First, you will need to create a graphic for each of the sections you would like to have on your toolbar. I created four buttons for now: Home, Contact Me, Buttons, and Featured On. This would also be a good place to link up to other blogs you have or to your Etsy page.
To create these graphics you can use the instructions from my Creating a Blog Button tutorial with a few little tweaks. Basically, you will want to create a background image, without text, that is roughly 150p x 60p.
You will have to adjust the size of your graphics depending on the number of links you want to put in your toolbar. If you are going to have more than 6 links, you will have to make your graphics smaller. This is probably just going to be a frustrating trial and error process. After you have made your graphic’s background, save it to your computer.
Now you will open up that new file and add the text for your first button. Save that graphic to your computer under another name, like menuhome.jpg.
Make a mental note of the font size you used for the first button, so the text on all your buttons is the same. I would suggest creating the button with the most amount of text first, so you can make sure you aren’t using a font that is too big. I have also seen menu bars where each button has a different font/color/font size, and those are really cute too. It all depends on your style. Save each button individually.
Upload your newly created graphics to photobucket.com or another site which will give you the html code for your image.
After you have all your menu graphics saved to photobucket.com follow The Girl Creative’s two tutorials here and here. She tells you how to alter your layout to allow for a menu bar, and how to set up the graphics on your page.
When the second tutorial tells you to “enter the url of the page you want that particular button to link to,” here is what I did. Which may be totally incorrect, but it worked for me. 😛 For the “Home” graphic, obviously I just linked to my blog’s home page. For the other graphics, I wrote a new blog post containing the appropriate information.
For example, for the “Buttons” post, I copied all the html code that I had in my sidebar for my three buttons, created a new blog post, clicked the “Edit HTML” tab next to the “Compose” tab, and pasted all that code right into the post. Click “Publish.” Then I copied the link for that post, and pasted it as a hyperlink for my “Buttons” menu graphic, following The Girl Creative’s directions.
If you were wondering why a bazillion Mad in Crafts posts popped up in your RSS reader the other day, that’s why. 😛
I know these seem like a lot of directions, but it is really a simple process. If you are like me, you will spend most of your time dinking around on picnik.com trying to get your buttons to look just the way you want them to. Installing the menu bar is no problem at all.
If you need any help deciphering this tutorial, or any other blog help, send me an email at madincrafts at hotmail dot com, and I will try to help!