Sunday, 18 November 2012

How To Make A Blog Button

So after a few days, Ive finally been able to make my own blog button. For complete novices like me a blog button is basically a picture with a code attached, someone else copies this code into their blogs and it should produce a picture thats clickable back to your blog. Happy days! Its a great way to share blogs. ( I will say my pictures in this post are slightly too big and go over into my sidebar but I really wanted you to be able to see what I was doing)

So to start off you need a picture you want your blog button to be, you can use pretty much anything but just make sure its relevent to your blog, mine is my face, its the same picture on my about me button, and on my facebook page.

Now you want to upload your photo somewhere to edit it I used to use picnik all the time but google got rid of it, but now I use Ribbet, which is pretty much exactly the same. Its easy to use and best of all free. There are a few others you can use, as long as you can crop a perfect square then resize it and maybe add text then you are pretty much ready to go!
I uploaded it into
 Just click the upload button once your picture is uploaded you want to go onto the edit tab.
Then click crop and make your square, it doesnt matter how big you make it at this point as long as the picture is a perfect square.
 You can see I selected my size, make sure you click apply then you are ready for the next step!
 Then you want to click on the resize button, as most sidebars where ylour blog button will most likely appear are 200pixels wide you want it smaller then this. Most blog buttons are 125px by 125px so make sure you type this in. It will make your picture shrink to the right size. Now you are ready to add text! Staying on the edit tab, click text and you can add whatever you like. Ive added my blog title as you just want something to identify your blog quickly.

 Select a font size and then colour then continue onto saving your picture. Its pretty straight forward at this point so far. The next step is to upload this picture into some kind of photo hosting website, because Im on blogger, I already have a Picasa web album, I use this to upload my pictures too. You can use any as long as afterwards you will be able to get the webpage URL (this is like an address for where your picture is kept)

Onto the next step.
Once you have uploaded your picture to your picture hosting website, you then want to get the URL. I use Mozilla for my web explorer so your options might be slightly different if you are using anything else. But basically right click the image and find something that says 'copy image location' or it may say 'copy image url' as long as you are not clicking the 'copy image' you should be fine.

This is the URL of my image,

As long as it looks like the begining of a website, and ends in .jpg this should work perfectly. You want to keep hold of this url, so maybe post into word or notebook or anything like that.

Next you will want to head over to My Cool Realm.

Add in your blog title, blog webpage (URL), and finally the picture URL from earlier on. On the option of container type, you will use pre for wordpress or textarea for blogger. So select the option you need, then any colours ect, then click preview. If you are happy you want to click on get code.


Your preview will close and you will see this code appear, select it all and then copy it. Head over to your blog. As Im on blogger I only know how to add this into your blogger blog, but Im pretty sure for wordpress you just copy it into a text bost. On blogger go to layout click add gadget (in you side bar) select HTML box and the paste it in. Once saved you should have your shiney new blog button.

You can see my blog button on my side bar at the top of my blog.

When people want to grab your button they just copy the code under the picture and they should be able to post the html code into blogs and it should create a clickable picture.

I hope I have explained this well, and you find it useful if you struggle let me know and I will see if I can help, but keep in mind Im no computer expert!!

p.s If you happen to find this blog useful, please link back to me!

These are two brilliant blog posts that helped me figure this all out, check these out too for further info.