July 19, 2011

Tutorial: Make a Blog Button



OK, disclaimer: I am not a programmer, I'm not even computer savvy.
But I am a person who would rather do things them self than pay someone to do it for them.

I'll give you the step by step on how I made my blog button, but I don't know what I'm doing  only know how to do it by working with Picnik and PhotoBucket, as that's what I used. The good news, Picnik  & PhotoBucket are FREE and you don't even have to sign up for a free account if you don't want to.

[1] Choose and image and upload it to Picnik {you could also use a blank canvas to start from scratch}. I used different modern, graphic designs as a base.

[2] Using the editing program you can add words, change colors, pick frames for your image etc.
Once that is done to your liking- CROP your photo into a square and RESIZE the image to 125x125.

[3] HOST it to a online photo hosting site like PhotoBucket or Flikr.
This is a MUST as you need your image to have a URL.
[4] To attach the button to you blog you need a CODE. 
There are two parts to the code- one part to attach it to your blog and another to say where the picture is located online.
{Part 1} You want to replace your blog URL where it says, "Your Web Page URL"
You do need the quotation marks and make sure you keep the ">" at the end.
 {Part 2}  Next you'll need to insert your image web address where it says "Img URL". 

Making sure to keep the quotation marks in place. On PhotoBucket there are several types of code listed by your image, you want to copy the "IMG Code".

[5] Next all you have to do is put the two parts of code together, making sure to end with this code.


[6] You can now input the entire code into your blog side bar.

To do this, go to the "design" page, then click on "add a gadget".  Then click on the gadget "HTML/JavaScript". Here you can input your entire code.

You can also use the button in your post, just insert the whole link into the html portion of your post.

Now- You should be all set!

But I NEED your help!
My sample buttons are throughout this post and I NEED help deciding which one fits my blog. {or maybe something new all together?} I would love you to lend your opinion to help me make this decision!

If you want copyable code section for your button just head over to part 2 of this tutorial!
Thanks for reading!