How to Make a Button

What is a button? 

Buttons are those cute little pictures you see as visual symbols for blogs, challenges, events, and all sorts of things. 

You'll often see them on sidebars (check out my button on the right sidebar!) If you look at my Features/Challenges Index, you'll see a list of buttons representing all the challenges I am participating in this year. 

Basically, buttons are good because they provide a visual cue to readers to associate with you, your blog, or your blog post. What's also great about buttons is they link back to your blog!

What You Will Learn

I'll introduce you to some programs you can use to make a picture to use for your button. Then I'll explain the code you'll need to make your picture into a linkable button. Finally, I'll walk you through adding a "Grab My Button" feature to your sidebar.

Let's Do This!

Step 1: Making the Picture

The first thing you're going to need to do is create the image you want to use for your button. You can make your button any size, but 150x150 pixels (like mine) or 200x200 pixels is fairly standard.

For this you're going to need some basic facility with a program like Photoshop. If you're not sure how to do something, I've found Youtube to be a great resource. Just type in something like "Photoshop how to x" and you should be able to find a tutorial video.

If you don't have Photoshop and don't want to spend the money on buying the program, I recommend downloading GIMP. It's a program similar to Photoshop, but it's free! It isn't able to do everything Photoshop can, but for the purposes of making a button, it'll do you what you need. You can also use Picnik for quick editing and creation. I haven't used this program, but it is also free. Picnik seems like it is more limited than Photoshop or GIMP, but look like it has what you'd need to make a button.

Edited to add: Nina from Brush Up On Your Reading reminded me that you of course can always yous MS Paint! The program is very limited in comparison to something like Photoshop or GIMP, but it has a lot of what you'd need to make a cute button. Just look at Nina's blog and her adorable ARGH pictures for proof!

Edited to add: Missie from The Unread Reader suggested a program I hadn't heard of before: Editor by Pixlr.com Best thing about it? It's FREE! Just browsing through it now it looks like a great site that has more than enough features to get you well on your way to making beautiful buttons. Another benefit is you don't have to download it, so you can use it on any computer with an internet connection. Big thanks to Missie for suggesting this site!


Once you've made your picture, find a place to host it (tinypic, photobucket, flickr, etc) and upload your picture. 

Step 2: Writing the Code

Copy this code and paste it somewhere you can work on it (a blog post, a Word document, etc):

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

Now, look at the red part:

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

This is the page you want people to arrive at if they click your button. If you're making a button for your blog, then you want this link to be your blog's url. If you're making a button for a challenge, then you want to use the url of the page you posted your challenge instructions or sign up page. Replace my url with the url you want to use.

Next, focus on this red part:

<a border="0" href="http://smallreview.blogspot.com/" target="_blank"><img src="http://i51.tinypic.com/34gwkm9.jpg" /></a>

This is the link to the picture you are using. Remember when you uploaded the picture at the end of step one? This is the url you will use. Copy and paste your url here.

Now you have a functioning button! Copy and paste your code into your blog posts or sidebars!



Step 3: Grab My Button!


Want people to be able to "Grab" your button? After what you've just done, this part is easy. Just follow these easy steps to put a "Grab My Button" section in your sidebar:


First, go to your menu and select "Design" and then "Page Elements"

Then, select "Add a Gadget"

You'll be shown a bunch of options. First select "Picture" and upload from your computer ("browse") or paste a link to the picture you made.

Then select "HTML/JavaScript" and paste this code:

<form><textarea rows="6" cols="18"><a href="http://smallreview.blogspot.com" target="_blank"><img alt="Small Review" src="http://i51.tinypic.com/34gwkm9.jpg"/></a></textarea></form>

The blue part is where you will paste your blog's url. The purple part is where you will paste the url of the picture.

Save your changes and you're done! 

Still have more questions? Missie from the fantastic The Unread Reader made a great button post:
How To: Buttons/Badges 

Click here to make a request for a future Tips & Tricks post.

The form is anonymous, so please don't feel shy at all! 

These tips and tricks posts are a bi-monthly feature, so it may take a little time to answer your question, but I WILL answer it!

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know.

Click here to read previous Tips & Tricks Posts 

Tweet