26 May 2014

How To Rock Your Blog With Image Maps



Since I wrote my post on Blog Design Tips. I have gotten a lot of questions about how to use Image Maps. Image maps are an amazing tool for your blog which helps you create a seamless look, and can link many different url's to one image. Bottom line... if you are designing your own blog and you aren't using image maps... you are missing out!

Image Maps have changed their interface since I first started using it, and I will admit, it certainly isn't exactly user friendly. There are a few tutorials out there on the old image maps but I haven't been able to find anything using the new site. So I thought I would pass on what I have gleaned through my own trial and error and hopefully it will save you all a whole lot of time!

I've included a lot of screen captures for all of the visual learners out there like me! So hopefully its easy peasy!

Once you've made the image you want to be mapped, you'll need to upload it to an online host. Something like 'photobucket' works great for this and is always what I use. Once you get your image into photobucket you can resize or edit it how you like. When you have made all of your changes and save them you'll see the image with 'Links to Share This Photo' on the right hand side, you'll see this below. Click 'Direct' which will copy the direct link to the image as hosted with photobucket. 


Go to the image maps site. The first page that comes up is what you will see below. You'll see a box that you can paste the url you just copied from photobucket (Tip: if you skip the previous step you'll have to create an account with image maps which you don't want to do, if its not hosted by anyone than image maps will delete the photo after an hour... not good) 
Paste the url into the box and click 'Start Mapping' - When the next page pops up just click 'click to continue' instead of making an account. 


The next page you'll see is your image. Right click on the image and then select 'Create Rect'. 


Next you'll see something like a text box pop up, you can expand this like a text box as well. Put the box around the area you want to have linked. In the box below erase the default 'Map URL' and change it to the url that you want to have the part of the image linked to. 
You'll see in my example below that I'm creating an image that will link to popular posts or categories. I want the words 'cloth diapers' to link to my post on "Cloth Diapers for Dummies". I found the link to the post and then copied and pasted it into the 'Map URL' box. 


You will then click over to the 'Settings' tab. Change all categories to what I have below. Overflow doesn't matter, it can be either visible or hidden. change background color to #ffffff which will make the rectangle on your map transparant. Then change opacity to 0 and just erase border and font color. Click save. 


Right click again and select 'Get Code' from the menu that pops up. You'll see the tabs that say 'Map Info', 'HTML Code', and 'HTML Output'. Click on the 'HTML Code' tab.   


Scroll down to where you see the complete code. It will look something like below. Highlight and copy. 


Now that you have your code you'll want to put it into your blog. The easiest way to do this with Blogger is to go to your layout, and 'Add a gadget'. You'll then select 'HTML Code' from the list of gadgets. Paste the code for your image maps into the box that pops up, save and then move it to where you would like it on your blog. 

Voila! Your image should now be showing on your blog with working links to where you have directed them to go. For an example of this you can check out my blog header, each category goes to a different URL and the large header image goes to the homepage. 

I hope this has been a helpful tutorial for you. If you have any questions I am happy to at least try to answer them below. Be sure to check out my other blog design tips here

14 comments:

  1. Oh Hannah I cannot even tell you how much I love you for this post!! I HATE the ugly square box on my links and couldn't figure out how to make it go away. Thank you, thank you, thank you :)

    ReplyDelete
  2. Yay!!! SO happy it was helpful for you!

    ReplyDelete
  3. What great news this is to get rid of those white boxed backgrounds! Love this and PINNED this to read again and again! Stopping by from Turn It Up Tuesday!
    Cathy @ three kids and a fish

    ReplyDelete
  4. Pinning this to come back to and follow step by step! Thanks for sharing!

    ReplyDelete
  5. Bookmarking this for when I have time to do some design stuff on my blog! Thanks so much!

    ReplyDelete
  6. Agh, thank you!! I've been trying to figure this out for ages, but didn't even know what image maps were called. Definitely going to use this.

    ReplyDelete
  7. I wanted to add my social media icons to the header. Is this how I would do this? This is some great information and I've pinned it! Thanks for sharing with Turn it Up Tuesday!

    ReplyDelete
  8. Thank you for pinning Cathy! Yes I. Always hate those boxed backgrounds too!! :)

    ReplyDelete
  9. Thanks Kelli! I always get the urge to change things up on my blog but man it takes so much time!!

    ReplyDelete
  10. Oh yay Katie! So glad this is helpful for you! Makes doing these posts so worth it!

    ReplyDelete
  11. Yes you could definitely use image maps for that! Thank you for pinning!

    ReplyDelete
  12. Okay, wait, back up. HOW DID YOU MAKE THAT IMAGE? Seriously. How did you put the space in between each "box"?


    And how did I miss this post??? I'm so glad you made it! Thank you, friend! ~Jenna

    ReplyDelete
  13. Just used this tutorial for a new design on my blog - thank you, thank you, thank you for this!! You explained it in such a simple way and it worked great! Also, thanks for suggesting the Rhonna Designs app - love it!!!

    ReplyDelete

I love reading your comments. I always respond but tend to reply to your comment rather than email. I hope you'll check back for my response!

UA-45077507-1