How to Add Clickable Social Media Buttons to Blogger

20:54


Adding social media buttons to Blogger requires making an 'image map'. This is where you add clickable sections to a plain graphic, and is a really useful thing to be able to do if you like to design your own blog. This is a tutorial for social media buttons, but you also use the same method to add clickable links to your blog's header or add navigation buttons to your sidebar. You can design your own graphic in Photoshop or any editing program of your choice, but for this I'm using Picmonkey which is free to use with no sign up and nothing to install.

1. Start by choosing the social media buttons of your choice. You could either make these yourself, buy a set from Etsy or use one of the free sets I've created HERE.

2. If you're using one of my free sets, you'll need to choose and resize the ones you want. Do this by saving the set to your computer, then to to Picmonkey.com, 'edit' then upload the file.


3. Using the crop tool, crop the set of buttons you want to use.

4. Using the resize tool on the left, resize the cropped image to around 200x30 pixels (uncheck the 'scale photo box). Important: it's important to resize the image to around 200 pixels wide in order for it to fit in your sidebar. Image maps wont automatically resize to fit the space, so if you don't make it smaller you'll be left with a huge set of buttons across your screen.

5. Save your image, and upload the file to a free image hosting website like photobucket.com or tinypic.com. Get the 'direct link'

6.  Go to image-maps.com and paste the 'direct link' you just got from tinypic and click once into the box. It's important that you don't upload the file straight from your computer to the image maps website, as image maps will only host files for a few days before deleting them. When this happens you'll have a broken image where your image map is supposed to be.

7. Start mapping! Simply left click, 'create rectangle' and draw your first rectangle where you want your first button to be clickable. Fill in the link information that corresponds to the image, just filling in the first box and leaving everything else blank. Continue this way until all of your images have links placed over them.


8. Left click, and in the box that comes up select 'get code.' Click the second tab along the top 'html code' and scroll to the bottom ignoring the signup information. In the bottom box is your image map code. Copy this.

9. Go to 'layout' from your Blogger dashboard and add a 'html/ javascript' gadget. Paste in your code, save and move it to where you want it to sit on your blog.

10. BONUS: if you want your pages to open in a new tab when you click on them, carefully go through the html code and change all of the places that it says the word 'self' to the word 'blank'. Be careful not to change any other text or punctuation marks or your map wont work.

And you're done! There are a few steps involved it gets easier the more you do it, and being able to add image maps to your blog makes it much more user friendly.

You Might Also Like

8 comments

  1. This has been so helpful but how do you get rid of the facebook one??

    ReplyDelete
    Replies
    1. Do you have 'Paint' or a similar basic editing program on your computer? If so just do it on there :) then upload to Picmonkey once you're done to resize x

      Delete
    2. I'm using your free social media buttons and I just want to get rid of the facebook one. so I just cover it up and it sure work?

      Delete
    3. If you have MS Paint on your computer, just cut the buttons you want and paste them over the Facebook icon so that you cant see it. Does that make sense? If you're struggling email me beautiful-solutions@outlook.com and I'll send you the buttons without the Facebook icon :)

      Delete
  2. Thank you! I've been trying to figure this out. Your instructions were great!

    ReplyDelete
  3. Thanks SO MUCH for these! Even a not-so-tech-savvy girl like moi could do this!

    ReplyDelete

Follow

Related Posts Plugin for WordPress, Blogger...