Want to make a “grab my button” box? (Also called a blog button, blog badge, or a few other things…) Let’s get started!
Okay, first you’re going to need to make the image. Be creative and don’t feel like you *have* to make it a square. I like to experiment with fun shapes, colors and fonts to make a unique grab image. You can even use photos if you’d like. The only rules of thumb I would follow are these:
- Try to make sure your image is no more than 200 pixels wide. That way you’ll have a better chance of it fitting on a majority of sites. If you’d like, you can create multiple sizes so people can use the one that best fits their sidebar.
- Make sure your blog title is clearly legible, since this will be a relatively small image.
- I usually recommend putting a border on your image, since you don’t know what color people’s sidebars are.
- Steer away from transparent backgrounds, since again, you don’t know what color the sidebar will be where your image will go.
Here’s some examples of grab box images to help spark your creativity:
Once you’ve created your image, you’re going to need to upload it to some kind of hosting site. I usually recommend Photobucket. You can create a free account here. Okay, so you’ll upload your image and you’ll need to grab the “direct link” code. If you’re in Photobucket, you’ll do this by going to your Library, finding your image and hovering over it. You’ll see a little gear icon in the upper right hand corner. Click that and select the “Get Links” option. Copy the Direct Link. It should look something like this: http://i795.photobucket.com/albums/yy237/tianalei/NewWhiteButton.png
You’re going to need that code later. Save it to a plain text editor like Notepad or TextEdit <–IMPORTANT: Don’t use Microsoft Word since that will alter your code. You need a plain text editor.
Okay – Also in a plain text editor, you’re going to use the following code:
*You will need to alter this code.*
- You’ll see 1 place that say YOURBLOGURLHERE. You need to replace this text with the URL to your blog. Make sure you include the http://www otherwise it’s not a complete link. Also MAKE SURE YOU DON’T ACCIDENTALLY DELETE THE QUOTES!! If you do, you’ll break the code.
- You’ll see 3 places that say YOURBLOGNAMEHERE. You need to replace this text with the name of your blog.
- You’ll see 2 places that say YOURIMAGELINKHERE. This is where you’ll put the link that you copied earlier from Photobucket. Remember, include the http://www part of the link and don’t accidentally delete anything else.
- You will need to alter all the widths and heights to match the size of your button. The second time “height” is mentioned doesn’t refer to your button image, but to the text that people will see underneath.
Now, in your plain text editor, you should have your altered code. Go into your blog, in the Layout section and add an HTML/Java Script gadget. Paste this code in there and title it whatever you want.
Hit save and drag the widget wherever you want it. Save it in your Layout mode and then go see your blog to see the final results! Of course, if you’re not feeling too HTML savvy, or if you want help in creating your image, you can always hire me to do it for you. Let me know if you have any questions 🙂