How to make a grab box

Want to make a grab box for your blog/website? It’s super easy, and I’ve made it even easier with some simple coding!

So, what’s a grab box?
It’s a box that offers visitors to copy/paste a code that puts your button on their blog or website, used for buying ad space on another website.
Here’s an example from my old blog:

WL150x150 WL150x150When a visitor copy/pastes the code in the box all that shows up is your pretty button. So here’s what you need to make one: a photo editing program. (If you don’t have Photoshop don’t worry! You can find free ones online like Picmonkey.com) and a free photo-hosting website like Photobucket.com or TinyPic.com. That’s it. Here’s how to make one!

1. First, you’ll have to make a button. In Picmonkey you can adjust the pixel size of your photo. The standard sizes for blog buttons are 125×125, 150×150, 200×100 and pretty much any size you have your blog set up to fit. Make sure your button’s width doesn’t exceed the width of your sidebar or it wont fit properly.

2. After you’ve edited your button to your liking, save it to your computer and log in to Photobucket or TinyPic. Upload your photo. Now you’re ready for the grab box code.

3. In Blogger, open an HTML gadget in your sidebar and paste the code in the box. You can also do this by clicking “NEW POST” and use the text body for your code. Make sure it’s in HTML format and not Compose or else the code wont take properly. You’re not going to publish this post, you’re just using it for its HTML. So click “save” at the bottom and not “Publish” when you’re done.

4. Copy/paste the following code into your HTML gadget box (or post if you’re using that)..

<div align=”center”>
<a href=”YourURLgoesHere” target=”_blank”><img alt=”YOURNAME” src=”PhotobuckeyDirectLinkGoesHere” /></a> </div>
<div align=”center”>
<form>
<textarea cols=”20″ rows=”6″>&lt;center&gt;&lt;a href=”YourURLgoesHERE” target=”_blank”&gt;&lt;img alt=”YOURNAME” src=”PhotobucketDirectLinkGoesHere”/&gt;&lt;/a&gt;&lt;/center&gt;</textarea></form>
</div>

5. Fill in the colored fields with what it says, making sure to keep in the quotations. There will be two of each for a total of six replacements:
“YOUR URL GOES HERE” this is where you put the URL you want the button to link to. It should be your blog, your shop, etc.
“YOURNAME” This is where you would put your blog name or the size of the button. It’s handy for keeping the sizes straight. This is more for reference as this doesn’t link anywhere.
“PHOTOBUCKET DIRECT LINK GOES HERE” Now go back to your Photobucket uploads. On the photo you’re using there should be four ways to copy it. You’re using the second one called “Direct Link”. Copy/Paste that one and put it in the code above where it says to.

Now if you used a sidebar gadget, click “save” and you should see a grab box displayed. If you used a “New Post” click “compose” to verify the grab box looks right. If it does, click HTML again and copy the whole code to where you want the grab box. If you ONLY want the button without the grab code, then just copy the code in the box and put it wherever you want the button to show up.

There you have it!
Let me know if anything wasn’t clear or if you need more help!

This entry was posted in DIY.

Leave a Reply