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:

about blog sponsor contact

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:

Icing and Write

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


  1. great q and a, aizzing!
    love the look of your blog... and it's cool how you used 2ne1... love them! :)
    have a great week!

  2. I did a similar post a couple of weeks back. I'm a newbie to HTML too. Isn't it so great when you create something that works out!


    1. yup! so glad there are free websites which can do the work for us. :)

  3. Thanks for sharing this, Aizzing! It's always fun and helpful learning new little blog tricks!

  4. genius! these definitely make things a lot easier! thanks for sharing! :)

    1. no problem ally! i missed you on skype! hope you're doing great! :)

  5. thanks for sharing this! super useful for me <3

    I usually visit to get some cute grabbie that is provided there, you can check it :)

    My Random Thoughts

    1. oh, is also share these kind of tips and sharing.. but in her blog she shares some photograph too and some story about her daily life :)

    2. awesome! thanks for the suggestions!