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”.




1. HOSTING YOUR IMAGE


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:


http://4.bp.blogspot.com/-8i96fi7gNk0/UWrzp8lgAcI/AAAAAAAAChk/Nv9LMiWXDAg/s1600/photo+(6).JPG



2. LINK WITH HTML CODE


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=”http://www.facevaluebeautyblog.co.uk” target=”_blank”><img src=”http://i1320.photobucket.com/albums/u532/FaceValueBeautyBlog/619b0a33-500e-4f0c-a10b-e476ead93833_zps5676c950.jpg“/></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..


<form>

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

PUT YOUR CODE FROM PART 2 IN HERE

</div></textarea></form>

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”>

<form>

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

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

</textarea></form>



And it should look like this!


FaceValue Beauty Blog




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


xXXXx


Zoe Bayliss Wong

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 Comments

  1. Gem | Miss Makeup Magpie ♥
    May 4, 2013 / 9:44 pm

    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

    • Zoe Dubs
      May 6, 2013 / 9:16 pm

      Ahh thanks Gem! Glad it's readable and makes sense to someone! 🙂

  2. Millie :)
    May 9, 2013 / 7:37 pm

    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 xhidbeauty.blogspot.co.uk

    • Zoe Dubs
      May 10, 2013 / 7:32 am

      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. Kasha Zee
    May 31, 2013 / 8:34 pm

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

  4. Anita Pun
    June 3, 2013 / 9:12 pm

    wowee! I'm liking this post – just about to look through others now :Dallthingsanita.blogspot.com

  5. Kirsty Phillipson-Lowe
    August 27, 2013 / 8:59 am

    I think its worked, thank you x

  6. Leanne Phoenixbeautyy
    September 11, 2013 / 4:04 pm

    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 :)www.phoenixbeautyy.blogspot.co.uk

    • Zoe Dubs
      September 16, 2013 / 3:09 pm

      Yay! Glad it helped 🙂