{Tutorial Tuesday} Making a Blog Grab Button

I thought I’d share with you today a simple but fun element to add to your blog or website. Blog grab buttons are wonderful advertising tools that allow people to share your blog on their site! Its also a great way for you to support others when you display their button on your site. It creates community and that is always a great thing :)

First, you need to start with an image. This can be something you designed, a picture of you or a product, or whatever you want. Usually, people offer different sizes that range from 125×125 pixels to 250×250 pixels. Its up to you, but I wouldn’t go larger than 250 because some people have sidebars that cannot support anything larger. If you don’t have an image or need to edit one you do have, my favorite free online photo editing program is Pixlr.com’s photo editor. You can crop an image, resize an image, add text to your image, and more. And best of all, its FREE! :)

Once you have your blog button image (or ad, as I call it), you’re going to need to upload it to some photo storing site like PhotoBucket, Picasa, or something like this. I use PhotoBucket…when you’ve uploaded the picture, when you mouse over the image, it will bring up a menu like this:

Click on the box “Direct Link” to copy the link to your image. If you use Picasa, when you click on the image, in the right sidebar, there will be a link that says “Link to Photo.” When you click on this, you will see this information:

Keep all the boxes unchecked…where it says “Link,” this is the direct link to your photo. Most photo storage sites will have something like this. After you’ve uploaded the photo and seen how to copy the direct link in whatever site you use, in Blogger, go to your Page Elements and click “Add a Gadget.” Scroll until you find the HTML gadget and click on it. For the title, add whatever you want, like “Grab My AWESOME Button!” or something :)

Then, in the textbox, you’re going to add the following code. You’re going to replace website url with your website url (including the http:// part), replace your website name (for example, I would add by erinLauray, spaces and all), and where it says image direct link, you’re going to replace that with your copied image direct link.

Then you’re going to click save and that’s it! It should look something like this:

With your image on top and the code they can “grab” underneath. Now you have a purdy little blog button for everyone to share!

Was this helpful? Anything you want to know? Remember to “pin it” if you liked what you found here! :) Thanks for stopping by today, friends! :)♥erin