How to Add a "Grab my Button" Box to your Blog

There are about one million tutorials out there on how to create a grab button for your blog. Some of them have extensive amounts of code, while others just plain don’t work no matter how hard you try. Here’s the short hand version:

Create your Image in a Design/Photo Editing Software 

You can’t have someone grab a button, if you haven’t generated a button now can you? Most design packages (at least, my design packages) come with grab buttons by default. But, if you start a meme or weekly feature and don’t want to pay a designer to create one for you, you’ll need to know how to make one yourself. Most bloggers prefer a 125×125 or 150×150 image. If you’re creating the button for someone else, make sure you ask them what size they prefer before hand. Once you create your image, you’ll need to upload it to a Photo Sharing Account. A lot of people use Photobucket, but if you are on WordPress you can actually host the images on your own website, without worrying about the risk of the Photobucket server going down. (To host images on your own blog, simply upload it to your media file. Once uploaded, you will see the image code in your file. This is the code you will need for your button. Make sure to copy it!)

Generate the Code 

Don’t freak out on me, but I’m going to ask you to write your own code here (or, you can cheat and copy mine if you don’t want to learn to do it). First, you’ll open up the widget section of your blog. WordPress is setup so that you can use html code in the text widget. There are no fancy shortcuts in the text widget, so you’ll have to add your own coding (again, or copy from somewhere else). But, if you want to shorthand it there is an HTML/Javascript Plugin that you can download in the Plugins Section. I used it when I first started my blog on WordPress, but now that I do my own coding, I use the text editor.

When you get your widget box pulled up, you’ll want to show readers the image that they will be grabbing. So the first bit of code you’ll want to insert is the source code for your button:

<img src=”BUTTONCODEURLHERE”>

It is vital that you use this code as is. The colon’s must remain where they are or the image won’t work. I also like to add two breaking tags to separate the bottom of the button from the top of the grab box, but that’s just a matter of preference (you can do this by simply adding <br> to the end of the preceding code. This code just places the image into the sidebar, so now you want to make the grab box so that other people can grab that fabulous button

<form><textarea><a href=”YOURBLOGURL”><img src=”IMAGEURL”></a></form></textarea>

This snippet of code creates the code box so others can grab the button, and links the button back to your website homepage. From a bloggers perspective let me add that the code to automatically center the buttons people grab is a bit of a pain. When I was first learning code, it frustrated me to no end to snag a button and have it centered when everything else in my sidebar was aligned neatly. I don’t recommend adding the auto-center code to grab buttons for this reason. A lot of bloggers like to have things lined up and justified neatly. There is a code that they can add on their own if they want the image centered (which I will discuss in another tutorial).

Let’s Review

Now you’ve created a button and placed your code. The final code in your sidebar should look like this:

<img src=”IMAGEURL”><br><br>
<form><textarea><a href=”YOURBLOGURL”><img src=”YOURIMAGEURL”></a></form></textarea>

Questions? Comments? Feel free to leave them below!