How To Make A Simple Blog Button

Tuesday, June 19, 2012

So after I put out the call for a sponsor swap, I had some people who were interested, but unsure how to create a blog button.  So I decided it might be a good to do a tutorial on what I think is the simplest way to make a blog button.

My current button (in the right sidebar, down in the middle a ways) was created in mostly GIMP, which is a free version of Photoshop, but with a little bit of MS Paint as well.  I honestly don't know a lot about GIMP (I used it mostly for the text, because it always ends up looking pretty pixelated in Paint), and I know pretty much nothing about Photoshop, but what I do understand is online photo editing.  So here is the easiest way I know of to make a blog button: using PicMonkey.

PicMonkey, if you don't know, is pretty similar to Picnik (which is now only available through Google+).  I don't find it quite as user friendly as I did Picnik, but it's still pretty simple to use.

For the purposes of this post, we're going to start with a completely blank button.  If you have a photograph you want to use, you would start with that instead.

To make a quick blank button, go into MS Paint.

Make a 125px x 125px (standard button size) square.  Save the blank square.

Open up PicMonkey, and upload your blank square as the picture.

To add a little interest to the button, you can go to the Textures button (the bottom one in the left side menu) and add a free weave texture.  (Note: any time you see an action with a crown on it, it's a premium feature, and is not accessible without getting a paid membership).

To change the color, go to the Effects button (the flask, second from top) and choose Tint. Pick the color you like best.

To add a bit of contrast, you can add a shape (square, rectangle, this demonstration, I used an oval).  Go to the Overlays button (third from the bottom...the heart/star/speech bubble button).  Pick the one you like best.

You can then add text by going to the Text button (the P).  Type in your text, pick a font, and click 'add'.  A box will pop up with color and size options.  If you don't like how the font looks, you can change it.

When you're happy with the way it looks, save and you're done!

Congrats, you made a simple button!

Obviously, you can tweak it to meet your needs...fancier, simpler, whatever.

If you want to add the button to your blog with a grab box so other people can use your button, you'll need to upload it to Photobucket or another image hosting site.  Add an HTML gadget to your blog, and enter in this code (in this code, YOUR BUTTON URL refers to the URL provided by Photobucket after you upload your button):

<center><img src="YOUR BUTTON URL HERE"/><br/>

<div align="center"><form><textarea rows="3" cols="19" readonly="readonly"><a href="YOUR WEBSITE URL HERE" target="_blank"><img src="YOUR BUTTON URL HERE" /></a></textarea></form></div></center>

Pretty easy :)

You Might Also Like


  1. Awesome!! That makes it simple :-)I need a new one... I've made several but just am not happy yet! lol

    1. I know how you feel! For awhile, it felt like I was changing the look of the blog more than I was posting. I just get bored and want to change.



I appreciate you taking the time to comment. I read and respond to each and every one. Thank you so much!