Saturday, March 14, 2015

Blogging 101: How to Create Clickable Images

A while ago I did a tutorial on how to create your own, unique blog header. In that tutorial I mentioned clickable images. For those you who don't know, clickable images are images that, when you click on them, lead you to another link. For example, in my header I have all of my social media icons. If you click on any of them they'll take you to the desired site.

So how to you do this? I'm so glad you asked. Here is the all-inclusive tutorial on how to create a clickable image FOR FREE!

1. The first thing you want to do is create your image. Whether it's a header, an "about me" box, etc. you need something you want to be clicked. This is the image I'm going to use for the example purpose today. {this my old header}











2. Now that you have your image, head over to image-maps.com {or click here}






















3. Next, browse the file that you want to make clickable and click "start mapping."

4. Once you have your image uploaded, you should see this...






















Now that you have your image, right click anywhere on the screen. This will bring up a menu. Once the menu comes up, you want to click on "create rect."

5. One you click "create rect" a box will pop up. The first thing you want to do though is create a box around the image you want "clicked."






















6. One you have the rectangle around your image {in my case I have it around my Instagram icon} now you insert the link that you want people to be directed to in the "map URL" box.
{Ex. https://www.pinterest.com/touchofclassblg/}





















7. Once you have your link switch to the "events tab" and under "target" switch from "_self" to "_blank" so that it looks like this



















8. Once you've done all of the above steps, click "save." Repeat the steps above as many times as you need.

9. Once you're done right click on the screen again but this time click "get code"























10. Once you get your code, move over to the tab that says "HTML code." Scroll all the way down until you get to "HTML Map Code." Now copy and paste this code into your desired gadget, widget whatever you have.

11. But we're not quite done. You need to replace the image hosting {as of now image-map owns your image and if you don't pay for their service, they'll delete your link. You can pay if you want but it's easy to get it for free.}

12. The part that is highlighted red is what you need to change. There are several ways to get an image URL {through blogger, wordpress, picmonkey, etc.} the important part is that you get one and replace the image-map code with your own.
















13. Once you've replaced your code you are all good to go! {just remember to hit save!!}

I hope this was a helpful tutorial. If you have any questions don't hesitate to contact me! Happy Blogging!!

{This post was added to Hucklebrry Love's Link Up here}