How to Make a Blog Button

Want to know how to make your own button? To make the image above (which is the blog button located on the right hand side of my blog Fun Family Tips) I used Picnik (it’s free unless you want the advanced stuff—which I did not use to make this) – it was EASY and took the scariness factor out of it!

These are instructions for 125 X 125 pixels (just adjust the size if you want to make it larger or smaller).

Upload your photo, then click the “Edit” tab, then the”Resize” button. Resize the background image that you are using to 125X125 – in my button, the background is the green part. The flower is a “sticker” that I added later.

Notice how my button has a fade around the edges? You can add that by clicking the “Create” tab, then “Effects.” That’ll take you to a screen where you can select the fade or color effects that you want on your background.

You can adjust the settings to your liking here.

If you want to add a simple image to your button, you can click on the “Stickers” link within “Create.”

When you’re ready to add text (you can do this whenever–the steps above can really go in any order you like to get an image that pleases you), click on the “Text” link, select your font and type your word choice in. You can also choose your text colors here.

Once you are satisfied with it, click the “Save and Share” tab and save it to your computer.

When you’re ready to add it to your blog’, here is the code that you will need (this will create both a clickable image of your button as well as a text box where others can grab the HTML which creates the same clickable button) :

<p style=”text-align: center;”>
<a href=”insert your blog URL here, including the http://www part and do not bold” target=”_blank”><img src=”insert link to your image here–include the whole thing, even the http://www part and do not bold“></a>
</div>:

<div align=”center”>
<form><textarea rows=”6? cols=”19? readonly=”readonly”><a href=”insert your blog URL here, including the http://www part and do not bold” target=”_blank”><img src=”insert link to your image here–include the whole thing, even the http://www part and do not bold“></a></textarea></form>
</div></p>