How To Make A Blog Button

Soooo I’m writing this post for a few reasons.

  • I’ve offered HTML help to other bloggers a few times and I thought I may as well put it online for EVERYONE to enjoy.
  • I’m also lazy, so didn’t want to keep repeating myself.
  • More importantly  – someone taught me about this, so I’m paying it foward. Can I get an AWWHH?

p.s. I just want to point out NOW, that this is not any sort of beauty review so all you NON-BLOGGER READERS – probs not for you, soz. 
I’ll publish something EXTRA sexxy for you next time. (And I wonder why Google Adsense seems to think I’ve got adult content???)

So welcome to BLOG BUTTONS 101! Take your seats please….

FaceValue Beauty Blog

So what is a blog button? The concept of a blog button is an image that is linked to your website, so when you click the image it will take you to a website. Easy peasy right?

To get this, you need to host your picture somewhere, and then put this link into some HTML code which says “hey, if you click THIS pic, it directs to THIS website”.


And by hosting, I mean so that your image is officially ‘on the internets’ – a place that everyone can access as opposed to trying to use a picture you have only on your computer.

How do I know my image is hosted? When you type the image address in your browser, it will take you to that picture. It should end with .jpg normally.

How do I host?  Some people use photo hosting sites like Photobucket or ImageShack. These are quite good because direct links for you to copy and paste are often made REALLY OBVIOUS for you.

But if you cant be bothered to register…. if you upload the picture onto your blog and right click it, you should be able to copy the link address. SNEAKY eh?

For example, the picture of my haul from a couple of posts ago would be:


You then need to paste that image link into some HTML code which looks like this. 

<a href=”http://YOUR WEBSITE HERE” target=”_blank”><img src=”THE LINK TO YOUR IMAGE“></a>

For example here’s mine:

<a href=”” target=”_blank”><img src=”“/></a>

Looks like gobbledegook? Here’s what it reeeeally means.

<a href=”http://YOUR WEBSITE HERE” this is the site to direct to  target=”_blank” this opens it in a new window><img src=”THE LINK TO YOUR IMAGE” this is the image source for the button></a>

Congratulations, you now speak a bit of HTML!

3. Finalise

So you’ve now got the code that people paste into their blog pages to get an Image which links to your website. But its a bit awkward to keep sharing this code cos its LONG and SCARY looking.

But how to make it easy for people to put in? You can include this code within a text box (using <form>) to go under your photo..


<textarea cols=”50″ rows=”6″><div align=”center”>



So this basically says:

1) Start a Text Box

2) Size – it’s 6 rows long  – you can play around with these sizes according to your blog

3) Alignment – the text in the box will be centered.

4) The text box contains this code (the one we just made)

5) Close the text box.

4. Put it all together

So now, you should have three things.

1) An online image

2) Code that links your image to your site

3) A text box that includes this code so people can copy&paste it

All you have to do now is put 2&3 together!

It should look like this

<a href=”LINK TO YOUR BLOG” target=”_blank”><img src=”LINK TO YOUR IMAGE” /></a> 

<div align=”center”>


<textarea cols=“50” rows=”6″><div align=”center”>

<a href=”LINK TO YOUR BLOG” target=”_blank”><img src=”LINK TO YOUR IMAGE“/></a></div>


And it should look like this!

FaceValue Beauty Blog

Did that help you? Now if you want to swap blog buttons, let me know!


Published by ZBW

Zoe is a Forbes '30 under 30' finance pro, style writer, presenter and panellist, working for a fashion startup and trying to live that best life in the most IRL way possible.

9 thoughts on “How To Make A Blog Button

  1. This is such amazing advice 😀 there's never any tutorials like this where it talks you through the whole process! I had a button given to me as part of my layout, but I know this will help so many bloggers :))) xxGemma ♥ | Miss Makeup Magpie

  2. By any chance could you help me please? I am trying to make a new blog button for myself, but for some reason this time no text is showing up in the text box, where people copy the code. I have made blog buttons about 3 times before, so I'm not sure what is wrong :S Anyway I hope you can help and I've followed your blog :)Millie

    1. Hi Millie – have a look at my final HTML example and compare it to yours – is there anything different at all? Even an extra > or / in the wrong place will have an effect on the script. I'm no HTML expert I'm afraid so not sure how much I can help otherwise!!Good luck! x

  3. This looks really helpful o: Looks like there is yet another thing I might want to add to my blog haha!Kate

  4. wowee! I'm liking this post – just about to look through others now

  5. This was a fantastic help as a basis for creating sidebar banners for my page links 🙂 thanks so much for the simple guide!Feel free to check out how your handiwork helped me :)

Comments are closed.