Buttons, buttons, buttons!

Not these buttons.

You will be forgiven for thinking that I have gone button crazy. I know there has been lots of button talk going on around here lately but I just had to share my new found knowledge.

Last week for my most favourite linky ever I shared just how easy it was to modify and add social media buttons to your Blogger blog. What I should have mentioned though was that there is actually very little difference when doing it for a Wordpress or any other type of blog. But never mind, now you know.

This type of button

While I was busy making lots of pretty new stuff for myself, I also whipped up a blog button for the lovely Kirsty over at My Home Truths. Though really all I did was organise some code for an already existing image. And when I say organise some code I just copied and pasted a few different links into this rather awesome site that did all the work for me.

Anyway as you can imagine Kirsty was just a little pleased with her spiffy new button and code to share with all her link buddies that she asked me if I would ever do a post about making your own blog button.

Well hold the phones lovely, all your dreams are coming true and here is how to make your own blog button according to me. For the second time. When I first discovered this site way back in December 2011 I posted on how clever I was and how clever you could be.

I did think about just directing Kirsty to it, only really there is not much detail and I neglected the whole where to save your image which is kinda important. Plus, nothing like a free post idea is there?

So first things first.

Your image that you will use for you button needs to be saved somewhere online so it can have a URL. This is very similar to what is needed for when we created the social media buttons I like to use somewhere like Photobucket. Actually I don't just like somewhere like Photobucket, I actually use it, but I am sure there are plenty of other similar ones if you would rather, tumblr, flicker etc.

Anyways, if you are using Photobucket you will see that there are a whole range of URL options to choose from.

Yep that's the URL stuff I was talking about.

Once you have your image URL head to here which is the "Grab My Button" code generator site. 

It looks a bit like this

It really is as easy as filling in the blanks. Just copy and paste.

Now I have never really bothered changing the container's border or background colour. If you know what colour you want and have the right combination of letters and numbers for it, enter it in the boxes.

What I do really recommend doing though is setting the width of the code container. I like it at about 125 pixels. Most buttons these days are 150x150 pixels so setting the code container box to 125 keeps it all neat and tidy. Plus it makes it easier to fit into your side bar.

I also like to have my button links open in a new window, but that is just a personal preference and I don't even know why that is. You can decide for yourself whether you tick the yes or no button on that one. Once you have entered all the details click on the preview button and a new little box will pop up with code for you to copy and paste into where ever you want.

The code will look a little like this

<div align="center" style="padding: 5px;"><img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg"  title="My Home Truths" alt="My Home Truths" /></div><textarea style="background:#f0f0f0;border:solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 125px;">&lt;div align="center">&lt;a href="http://myhometruths.com" title="My Home Truths" target="_blank"&gt;&lt;img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg" alt="My Home Truths" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

Which then magically turns to this when entered in a HTML box

<div align="center"> <a href="http://myhometruths.com" title="My Home Truths" target="_blank"><img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg" alt="My Home Truths" style="border:none;" /></a></div>

Then all anyone needs to do is copy and past the code below the button and voila, your button is now on their blog! Awesome huh?

Sharing this handy button information with all those who blog on Tuesday with EssentiallyJess and you should share it on Twitter, Google or Facebook (or all three) There are buttons below.