How To Create A Custom Category Menu

I've had a couple people ask me how I customized my categories menu on my sidebar so I figured I'd share a quick tutorial with you. I'm using Wordpress but everything should work the same for blogger except for where you will place the html code at the end. Also before you start this tutorial make sure you already have your categories set up, you will need the URLs towards the end.how_to_create_a_custom_category_menu 1. Create your menu. I used photoshop for mine but you can easily do the same thing using PicMonkey. Make sure when you are creating your menu that you make it the correct size of your sidebar. For example my sidebar width is 250 pixels. After you are done, save the image as a .png filetutorial1

2. Next, upload the menu you just created to an image hosting site. I use Photobucket. Then copy the direct link for that picture. In photobucket you will find the direct link under where it says "get links".. links --> direct.tutorial2

3. Then go to THIS image mapping site and create an account (its quick and I promise they won't spam you). Go back to the home page and paste that direct link you just copied into where it says paste URL. Then click "start mapping". A preview of your menu should pop up on the next page.(click on continue if it doesn't automatically take you to the next step)

4. Right click on your image to bring up the menu. Then click on "create rect". You should then see a little square box off to the side. tutorial4

tutorial4 (2)5. Now take your cursor and make a rectangle around your first menu option. Try to keep it as close to the word as possible so that it doesn't interfere with the other words you are going to have to map. Where it says "map url" paste in the URL for that particular category. Then click save.tutorial5

6. Continue step #5 for each of your menu options. Be sure to click "save" after each. (the rectangle around your words should turn red after they have been saved)

7. When you are finished, right click on your image again and click on "get code". Another box will pop up, when it does click on the "html code" tab. Then scroll to the bottom and copy the html code.tutorial7

8. After you have the code copied, go into your blog's appearance settings and paste the code in its appropriate place. I'm not sure where blogger users would put the code but for Wordpress users you would do appearance --> widgets --> drag the html code widget into your sidebar --> paste the code and save. I'm sure it is fairly similar for Blogger users.

You're done! After you have everything completed go back and click on your different categories to make sure they all lead to the correct pages. If there is anything else you would like to ask me how to do or wan't to know, feel free to ask me HERE. Also if you are a DIY blog designer like me, check out Sarah's Saturday Sessions posts..I have learned how to do so much from her tutorials!