Blogging Tips: Creating a “Grab My Button”

me • biz, tech, & social media • lifestyle • hobbies-me time

by Mariah Humphries on June 8th, 2011 | 3 Comments »

Blogging Tips—We have all seen them, those cute little square ads on blogs that link you to another fabulous blog or website. Having a blog button is an easy way to enhance your blog and by having one, you are putting yourself out there for the online universe to soak up. They are an easy way to promote your brand through your online network without even trying.

Although the blog button is a nifty little thing, it scares a lot of bloggers out there. Only the big blogs or the people who understand the dreaded code can have one, right? Wrong.

Creating Your Blog Button

Size: The most common size is 125×125 (pixels). It is best to stay with this size so it will not cause issues on other sites. You want your blog button to be cohesive with your site so be sure to use your images, logo, or color scheme.

After your image has been created, upload it to Photobucket or another online photo album. You can simply use your WordPress media as well.

Placing Buttons on Your Site

I am probably breaking every designer rule out there, but I am all about helping out, so here is the code you need to add the button to your site.

1. In WordPress, go to the Widgets and add a Text Widget. Insert the entire code. You can even do this in Word or Pages so you can get it all before you place it in your site.

2. Copy the entire Link Code from your uploaded image {Photobucket is great because it gives you all your link codes right there} and place it in the blue link area

3. Fill in your blog title and your site address in the orange section

4. When you are done, test it and it should be like this…

When your followers use the code provided in the box, it will be like this on their site...

Pretty cool, eh? No, go! Create and expand your brand.

Understanding Blog Button Code

Some of you may want to understand a bit more about what the code means so here is a breakdown of the code. When you understand the purpose for the code, it is not as scary to work with.

The first section of code is the visual portion of your button

The < opens the code language so your code will work.

img alt=: This is the image alternate text you can add. It is not necessary to use this but it all helps the cause of SEO.

width="125": This may be obvious but this is the width of the image you are using. At times you may be using an image that is 150x150 or 165x165 and you want it to fit into your sidebar. This is where you place the width of that image.

src="your direct"/>: The term src stands for source, so when you see this code above it refers to your image location (source) so sites can locate it.

The /> closes your code out

This is the box with the code portion below your image.

<textarea>: Let’s you know this is just code text rather than an image being displayed

<a href="http://www.your address.com": The a is an anchor. The href specifies the link's destination. When someone clicks on the image, they will be directed to www.your address.com

target="_blank">: When the button is clicked it will open up in a new tab. If you want someone to just go directly to a link and leave your site, then just take out the target=blank”, but leave the > so that portion of code can close out.

<img border="0": specifies the width of the border around the image

alt="your title";: The only reason this is not img alt like code in the previous section is the img is already referenced in the img border=”0” above

title="your title": Your title you want placed here.

height="125"width="125": Just to specify the dimensions of the button.

</textarea>: When you see / it represents the closing of the code.

Do you have a "Grab My Button" button and code on your site? Why do you think these buttons are important?

Photo courtesy of Flickr.

Mariah Humphries is a wife, mother to three handfuls, graphic designer, blogger, photographer, and addicted to all things Starbucks. She blogs at Humphries Nation where you can find her talking about faith, kids, and the randomness of life. When she is not watching a kids game or reading her Nook, she gets lost in social networking. She is also the one woman show over at Jula Studio as a print and WordPress designer.