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:



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


Blog Widget by LinkWithin

Fund My Blog & Shop With My Sponsors

Thanks For Reading! Come Back Soon!