Maximize Your Sidebar By Image-Mapping

Image Mapping.jpg

When I first decided to write this post I had a really hard time with coming up with the best way to share it. Naturally, as a designer it is second nature to me when I create my clients sidebars. I don't really think in terms that a lay man (or lay blogger) would understand. Considering that, I just want to say that if you all have any questions, please please please, email me directly and I will help you the best way I can! 

Now let's get to the meat of the post!

Image mapping is all the rage in blogland right now and why shouldn't it be? After all, by creating one giant image, split into sections with links taking them wherever you wish your readers to go can save valuable sidebar or footer real estate. It can also make a header even more attractive and functional. Now I don't know about all of you but I am a sucker for pretty and functional! Especially when I am blogging and need to make a maximum impact in the first few words of a new visitor stumbling upon my little home here on the web. And when you really think about it, they eye is naturally drawn to ways to read more, see more and learn more. All in one place!

Enter image mapping. 

Now there are a few places you can go to create a map of whatever image you choose. A lot of bloggers like to use ImageMaps.com but I much prefer this little gem.

Now to break down the lingo a bit for you before we begin, an image map is simply a single image that has the ability to be broken into several sections and you can then add a URL directly to that particular section or space.

For obvious reasons you will want to decide exactly what you want to show off to your readers. If you have image mapped your header the process is the same. For example purposes I am going to use my current sidebar table to show you how I did it. Ready?

1 | First you go to your choice of photo editing program; then host your image on your own blog.

My personal favorite is Photoscape. Create the image or edit the one you wish to use. Here's mine:

Step One -- Creating Your Image Map

Now we need to host the image. I use my own personal blog to host my images and will be sharing a how to for the soon. In the mean time, take a look at Trisha's for a tutorial. While you are there be sure to show her some love and follow her!

2 | Take your image URL and plug it into image maps. The start plugging in your URLs to where you want to link.

So we have created our image and hosted it. What we need now is the image URL (typically you can right click the image and there it is. If you have any issues, check with your photo host). Once you have it, head on over to image maps and paste it into the section that asks for it. Once you have done that, it should look a bit like this:

Step Two -- Creating Your Image Map

It's super easy to go ahead and click and drag to create a highlight or box over what section you want to add the link to.

Here I wanted to link my favorite resources to my sidebar so I created a box that covers it. Then I added the URL to the box stating "ENTER LINK URL". I elected to have these links open in a new page and then added the rest.

Once you are completely finished adding all the necessary URLs, save and you are finished creating your image map! Simply click where it says "Save to Finish" and a code will generate inside of a box. Choose the HTML code and make sure you copy the whole thing. Then let's head back to your blog.

3 | Lastly, add your new code to your blog!

Now that you're back to Blogger, go to

DASHBOARD >> LAYOUT >> CREATE NEW WIDGET.

(Be sure you are adding a widget for HTML/Java Script and paste the code from image maps into said box.)

Once the box pops up, go ahead and paste the copied code in and save. You can then see your LAYOUT and move the widget from the very top to wherever you want it to appear on your blog. Remember: Always be sure to click on SAVE ARRANGEMENT up at the top of the layout page or the widget will not move! Finally, view your blog and you are done!

Here's how mine turned out:

Step Three -- Creating Your Image Map

It's that simple.

By image mapping things to one large graphic you will be able to save yourself some space and time as you won't be creating multiple widgets anymore. It's quick, it's easy and you need a very limited knowledge of coding.

What are you image mapping? Leave me a link in the comments so I can see your handiwork!

Do you use Image Mapping tools? If so, come join me on Twitter and let's talk about what methods you use and how you decide what will go into each section.

Comment /Source

Elle Ay Esse

I'm Elle, a California girl transplanted to the Midwest with a goal of landing in New Orleans some time in the next five years. I'm self taught in all aspects of design, harking back to the bygone era of MySpace custom flash layouts. I have an eye for pattern and a love for color that makes me a perfect candidate for working as a web designer. Combining my love of design with coding and helping others and I am a natural teacher of all things blog related. My first ever blog was created on AOL Hometowns back n 2003 so I have had a lot of time and experience watching Blog Land grow and evolve and become a place of sharing stories, reviewing products and even making enough money to help support their families.