Off the back of this week’s #bbloggers chat on Twitter I decided to create a few blog buttons for The World According to Gem. I’m sure most people will do what I did and google the easiest way to make a blog button, but for those that don’t I thought I’d make an quick and easy tutorial showing you how to make a blog button.
First you need an image. I chose to use the polka dot design I use as my background.
Upload the image to Ribbet and crop it so it’s a perfect square.
Then resize the image so it’s 125 x 125 pixels. This will ensure your button is a manageable size.
Next it’s time to add your text. Click on Text under the Edit tab and type in the text to be displayed on your blog button. Remember you want the text to be readable and memorable, don’t try to cram too much onto the button.
Once you’re happy with how it looks click the Save & Share tab. Upload the file to wherever you usually host your photos. I’ve been using Photobucket for as long as I can remember but there are other options out there if you don’t already host your photos online. This is where you’ll get the URL to your image from. If you are using Photobucket you want to click on the Direct Link option (highlighted in yellow) on the right-hand side to copy the link. If you’re using a different image host look for the direct link option.
The link should look something like this – http://i1353.photobucket.com/albums/q674/Accordingtogem/blogbutton.jpg
Now you’ve got your link head over to My Cool Realm who have an awesome Grab My Button function that takes away some of the pain of creating a grab-able blog button.
You’ll need to enter your blog title, URL and the image URL you just copied from your image host. If you’re using a WordPress.com hosted blog or Blogger you’ll want to choose Pre as your Container Type. If your blog is self-hosted you’ll want to choose Textarea.
Click on the Preview button. This will show you how your button and grab link will appear. In case you’ve missed the red box DO NOT copy the link from here.
If you’re happy with what you see click Reload and Get Code. This will generate a neat little code.
Copy this code and head back to your blog dashboard. Click on Appearance then Widgets and choose Text widget. Drag this to your side bar and insert your copied code, don’t forget to click Save.
Your finished blog button should look something like this…
Please let me know if this helps or if you have any questions and I’ll try my best to help. And once you’ve made your blog button please do get in touch so we can do a blog button swap.
According To Gem 
