How to Make a Grab Box

<div align="center"><a href="http://parsimoniouspash.blogspot.com" title="Parsimonious Pash"><img src="http://i1066.photobucket.com/albums/u418/lauralynnstudio/Kits%2010-29/ashley_button.gif" alt="Parsimonious Pash" style="border:none;" /></a></div>

I know I hear bloggers ask all the time "How do I make a blog button?".  I have read tons of posts online about making blog buttons and you can make them in a bunch of different ways.  In this post I will tell you about the HTML code that you need for a blog button.  This is only one portion of making a blog button.

*This is not how to make the IMAGE for a Blog Button.*

What you will need to do:


1. Create a 125x125 image


2. Upload it online.


3. Create the code for your button.


4. Create a Grab Box for your blog.

1. Create a 125x125 image

You can refer to my other post about how to create a 125x125 image for your blog or you can use one that you already have created for your blog.

2. Upload it online.

You can upload your image online either to your blog or another website.  If you have blogger I would suggest uploading it to Picasa Web Album because using that is so nice and easy if you decide to post that image onto any posts on your blog.  There are many other options out there like Photobucket, Imageshack, or Flickr.  

Once you have uploaded it onto the website you will want to get the image URL.  I will use the URL for my blog button that I uploaded to Picasa as an example.

MY URL:

https://picasaweb.google.com/lh/photo/kguPPqXtXHvRCaBip7MxGbhOla-RyEt6ByiCSQbE7zo?feat=directlink

3. Create the Code for your Button

First, you will want to create your basic code that will be used for putting your button on someone's blog or webpage.  This will look like this:

<a href="YourSiteURL"><img src="YourButtonImageURL" /></a>

The first portion of this code: <a href="YourSiteURL"> is for your website.  The URL that you put in here is where clicking on the image will take you.  In most times you want to choose your homepage however you could choose any page on your blog.

The second portion of this code: <img src="YourButtonImageURL" /> is for your image.  You will be putting in the URL that we found in the step above this one.  This will be for the image that you want as your blog button.

4. Create a Grab Box for your blog

Now, this part is the tricky part.  You will just want to copy and paste this HTML code and edit on your own because it is a little complicated.  Anything that is bolded you will want to fill out with your information.  This code will be put on your blog in an HTML widget.

<div align="center" style="padding: 5px;"><img src="YourButtonImageURL"  title="Your Blog Name" alt="Your Blog Name" /></div><pre style="background:#fcfcfc;border:solid 1px #cccccc; color: #777777; font-size:90%; height:45px; margin:auto; text-align: left; padding: 10px; display: block; overflow: auto; white-space: pre-wrap;  width: 90%;">&lt;div align="center">&lt;a href="YourSiteURL" title="Your Blog Name"&gt;&lt;img src="YourButtonImageURL" alt="Your Blog Name" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></pre>

 **The red text in the code is for a WHITE background.**