How To Make An Image Into A Button For Your Blog

Posted on Jan 29 2014 - 7:00am by Markell

makeablogbutton2

From time to time, I like to make blogging tutorials. I know that a LOT of the people who read my blog are bloggers as well, and I like to write posts that I KNOW they will find useful. This is one of those posts. Knowing this coding is essential to blogging. Whenever you put an image in your sidebar, whether it’s an ad or your own blog’s button, you use this code. If you look down at the right side of my blog, there are quite a few ads and buttons. They all use this coding. (Some are a little more intense than others, but this is the basic code).

I used this a little while ago when I made the button on the right side of my blog for the 31 days to a closer family series. I show you the process I went through. 

There are a few terms you need to know before we start this tutorial. 

1. image src – the image src is the url of the image you want shown. I know that sounds pretty intense, but it’s not. I would tell you what src and url stand for but… I don’t actually know and I’m too lazy to look it up. This is the part of the code that tells your website what picture to put up. Here is how you get your image src –

  1. Upload your picture to an image hosting site. I use photobucket and that’s what I’m going to show you on this tutorial. 
  2. On the right side of the page, there is a box that says “links to share this photo.” The link you want is the one called Direct. That is your img src. Copy and paste it onto a word document so you have it later. The img src for my button is http://i1275.photobucket.com/albums/y446/corp8292/31daysbutton_zps9748236c.jpg

makeablogbutton1 

2. The URL you want the picture to link to. This is the website you want the browser to direct your visitors to when they click your button. I wanted this button to take traffic to the intro page of this series, so the URL I wanted was http://www.amouseinmykitchen.com/2013/09/31-days-closer-family.html. Figure out what URL you want your picture to link to and save it in the word document as well. 

Okay, now that you have those two pieces of information, I’m going to give you the code you need. It looks like this: 

 <a href=”URL here” > <img src=”insert img src here” alt=”name of your button” width=”150″ height=”150″ > </a>

That code will make a button that is 150 pixels x 150 pixels. You can change the width and height to whatever you want. Keep in mind that if you make it too big and your image has a low resolution, it won’t look good. 

So, I want a button that is 300 x 300. After I insert my URL and img src and change the size and name, my code looks like this – 

< a href=”http://www.amouseinmykitchen.com/2013/09/31-days-closer-family.html”><img src=”http://i1275.photobucket.com/albums/y446/corp8292/31daysbutton_zps9748236c.jpg” alt=”31daystoacloserfamily” width =”300″ height =”300″></a>

That is just showing up as code because I entered into the visual editor on my blog post. When I put it in my text editor, it looks like this:

31daystoacloserfamily

If I add the code <center> to the start of the code and </center> to the end, it looks like this: 

31daystoacloserfamily
Any code with a / in it before a word closes the code.

If you were paid for the button in any way or if the button is for an affiliate link, you need to add the code rel=”nofollow” after the URL. So it would look like this –

< a href=”http://www.amouseinmykitchen.com/2013/09/31-days-closer-family.html” rel=”nofollow”><img src=”http://i1275.photobucket.com/albums/y446/corp8292/31daysbutton_zps9748236c.jpg” alt=”31daystoacloserfamily” width =”300″ height =”300″></a>

That is just for google search purposes. You and the site that is getting the traffic can be penalized with lower google ratings if you fail to add that code. 

Once you have the code, you can either put it right into a blog post or on the sidebar using a text widget. 

There ya go! Let me know if you have any questions. 

What other blogging tutorials would you like to see? 

Share

4 Comments so far. Feel free to join this conversation.

  1. Ai Lin February 10, 2014 at 2:07 am - Reply

    How handy and easy to follow instructions. I have bookmarked this! Thank you for the tutorial!

  2. Amy February 20, 2014 at 2:53 pm - Reply

    I wish EVERYONE knew the code for centering…I always blame the fact that I'm a virgo, but unaligned buttons always make me twitchy. 🙂

  3. Katy Blevins February 20, 2014 at 5:34 pm - Reply

    This is a neat little trick with awesome instructions! Pinning for later. Thank you!!

Leave a Reply to Katy Blevins

Click here to cancel reply.