Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

August 9, 2012

Make an HTML Grab Button for Your Blog

blog grab buttons, the right way

Update: June 18, 2014 Try The Grab Button Builder to build a grab button without writing any code! The button builder uses the same up-to-date code demonstrated in this tutorial, and works for Blogger, Wordpress.com, Wordpress.org, and Typepad.

Today I'm going to show you how to make an HTML grab button widget for your blog — the right way. This will work on Blogger, Wordpress, and any other blog platform that allows you to add custom HTML gadget/widgets to your sidebar or footer.

This is a thoroughly modern blog button that uses current, valid HTML. No tables, no <center> tags, nothing deprecated. This button will work well into the HTML5 future. Accept no old-fashioned substitutes!

Here's an example of what your grab button will look like, though you should use your own logo ;)

example grab button

You can also see a working demo of this button on my test and demo site, in the left sidebar.

Difficulty: Absolute Beginner
This is a simple tutorial for bloggers at any skill level, even bloggers with no HTML experience at all.

Requirements

To start this tutorial, you need:

  1. A blog.
  2. A button image. An image size under 200x200px is best. Smaller buttons are more likely to be grabbed.

That's it!

Step One: Upload Your Button Image

If you use Blogger, upload your button image to the Picasa Web Album for your blog. If you're on Wordpress, upload your button image to your media library. You can also host the image through an image hosting service like Photobucket.

Note: If you're using Picasa, after you upload your image you'll need to to right click on your image and select "copy image location" or "copy image URL" to get the correct URL for your image.

Step Two: Get the Button Code

Here's the button code:

If you're on Blogger, copy and paste that into a new HTML/JavaScript gadget. If you're on Wordpress, copy and paste it into a Text widget.

That code includes a demo image so you can can test it out on your blog to see how a grab button would look. But, to make it your own, you'll need to do a little editing.

Step Three: Edit the Button Code

The button has two parts: the header image, and the text box with the "grab" code. The two sections are marked with HTML comments to help you tell them apart.

I'm going to take you through the grab button code and show you where to make changes.

Let's work on the header first:

Grab Button Header
  • In line 2, change the width from 150px to your button image's width.
  • In line 3, change the img src URL from the example URL to the direct URL of your image in Picasa, your Wordpress library, or your image hosting account.
  • Also in line 3, change "YOUR BLOG NAME" in the alt text to your actual blog name.
  • Also in line 3, change the width and height to match the dimensions of your button image.

That's it for the image header! Now let's get the button code box ready for your readers.

Button Code Box
  • In line 8, you can change the width and color of the border on the code box, if you like.
  • In line 9, change the width to match the width of your button image.
  • In line 10, you can change the height of the code box if you'd like. Increasing it makes the box taller, decreasing it makes the box shorter.
  • In line 12, change "YOUR-BLOG-NAME-button" to include your actual blog name. If your blog name is more than one word, be sure to replace spaces with dashes like I did in the example.
  • Also in line 12, change the width to match your button's width.
  • In line 13, change the example URL after a href= to your blog's URL.
  • In line 14, change the img src URL from the example URL to your blog button image's URL.
  • Also in line 14, change the alt text to your blog's name.
  • Also in line 14, change the width and height to match the dimensions of your button image.

Step Four: Test the Grab Button

Save your gadget or widget, and check out the grab button on your blog. Looks pretty good, right?

Now you need to test out the "grabbable" code to make sure your readers will get a working button. To do that, just copy the code from your grab button box into a new gadget or widget on your blog. Click the image. It should just refresh your page (if you're on your home page) or take you to your home page (if you're testing from another page).

If something looks weird, or your image link doesn't work, go back through the steps and make sure you didn't miss anything.

Chalkboard background in title card CC-BY Karen Dalziel.

A note about comments: this tutorial was updated on April 12, 2013. Questions & answers in the comment thread from before that date refer to the old version of the code. If you have trouble with the tutorial, please feel free to ask a new question, even if it was already asked before.

Posted by at
Labels: