How To: Image Mapping and Blog Buttons

I received some quite surprising emails from four readers the other day asking me about "how to put different links in one image" and "how to create codes for a blog button". It's not everyday I get requests like these and I'd love to help out the best way I can. I guess you already know by now that I'm not much of a DIY-er myself so posting a tutorial is not really one of my biggest strengths. Here's the thing: You don't have to be an expert in HTML codes or possess any special skill in order to do both of these. You can cheat your way around and today I will be sharing two really awesome websites which can do the job for you for FREE. :)

First question:

"I noticed that your Twitter/Bloglovin buttons on your right sidebar under your profile is only one image. How did you put different links to it? It's only one photo right?"

Yes. It's just one photo. It's called "image mapping" and I have this cool website to thank for it. You can link various parts of an image without having to divide or slice the image into separate image files. Just host your image somewhere (like Photobucket) and have your links ready, then go to ISDNTEK IMAGE MAPPER to generate the codes you can insert to your site.

Here is a sample of how I did a clickable image:

This is how the above generated codes will look like once you put it in your website or blog:



Second question:

"Hi Aizzing! Hope you can help me. I sent emails to some bloggers but they're not replying. :( Just wondering how do you make those codes for the blog ad buttons? I want it to look like the one you have in your right sidebar so others can copy the codes and post them in their blogs as well."

It's actually very easy, dear. Again, just host your image somewhere and go to GRAB MY BUTTON CODE GENERATOR. Just fill in the blanks, customize the color and size to your liking, and you're all set. Once you have the codes, post them to your site through a blog post or as a gadget in your left or right sidebar to share. It's gonna look like this:

<div align="center"> <a href="http://www.icingandwrite.com/" title="Icing and Write"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvcE-xMVlk_Zq-51MFssfjRFPCWFe640yvbqnFhFE9gw68Ghbu_wEsvEk6SckgvOixeYErR6mBSq7oGsIWeXbrTN67jvtdPeFPiruToRFuuwna2wz0DzuddqakcpTvXh9Xyd2QdC-nnGX/s1600/aizzing200x200.png" alt="Icing and Write" style="border:none;" /></a></div>

That's it! I hope some of you would find the above helpful. If you happen to know other cool online resources that you think would make a blogger's life a lot easier, feel free to share them with me. I only know the very basics when it comes to HTML and I'm also a newbie when it comes to graphic design so I'd appreciate any tips from you guys. Enjoy the rest of the week! :)

Image Credits: Pixabay