Wednesday, February 22, 2012

How to Add a Blog Button with a Grab Box - Tutorial

Ever wanted to know how to get a cute button for your blog or to share with others to place in their sidebar?!

Mine needed an upgrade due to my new blog header (designed by my sister in law) and a little problem with Photobucket creating an error with my original picture.


It's a great way to promote your blog and increase blog traffic
Lots of blogs are more than happy to include your button on their sidebar if they enjoy what you're writing. So why not add one to your sidebar and invite your readers to add it to their blog!

I've tried following tutorials from a few places before and have found them difficult to follow as well as some that contain HTML errors that I've had to fiddle with.

So... I decided to add a tutorial myself - showing you how you can add a Blog Button and Grab Box to your sidebar!

STEP 1. 
First of all you need an image... I created mine in Picnik (which is soon to close down) but Photobucket, Photoshop and Picassa all allow you to create great images, perfect for blog buttons. Remember blog buttons are usually perfect squares so you will want to be able to crop or resize your image to a square, probably between 125x125 pixels and 200x200 pixels (generally blog buttons are 125x125) You want it to fit into most sidebars.

Here is the image my sister in law designed for our Busy Bag Swap, saved in Photobucket as a 160 x 160 pixel square image.

Once the image is saved, Photobucket (where I do mine) will provide you with the direct link to your image. You will need this later. Write it down, save it on a Word document, or keep the internet window open.

You now need to create a new 'gadget' as it's called in Blogger. On blogger go to Layout and select Add a gadget and select the HTML/Javascript option.
You want the gadget to be in your sidebar so make sure you select to insert the gadget here (if you didn't you can drag it over to where you want it now too!)
Type something like, "Grab My Button" in the title box (or leave it blank if your button explains itself)

Now we need to create the code for your button and grab box. I've done this bit for you! Yay!

Copy the following code and paste it in your gadget's text box:

[center][a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"][img alt="BLOG TITLE" src="DIRECT LINK TO IMAGE"/][/a][center]


[center][textarea id="code-source" rows="3" name="code-source"][center][a href="http://YOUR WEB ADDRESS/"][img border="0" src="DIRECT LINK TO IMAGE"/][/a][/center][/textarea][/center]

You will need to change all of the [ brackets with < and all of the ] brackets with >.
Once you've replaced the [ ] with < > you will need to change all of the generic information with your blog/button information. (They're like this so that you can see the code and not my image here!)

The sections you need to change are in CAPS LOCK... and hopefully I've titled them appropriately so you know what to add in there! Ask me if you're not sure!

Save the gadget and make sure it is positioned where you'd like it to be. 
Preview your blog.
Save your changes and click View Blog. Click on the image/link and make test to make sure it takes you to your blog homepage or the page you selected.

It's also a good idea to copy the text from the 'grab box' and try to add the image to your own blog or sidebar to test that it all works. To do this copy the text in the 'grab box' and paste it in a new HTML/Javascript gadget or directly into a blog post! 

I hope this helps you to increase your blog traffic and invite your readers to share their love for your blog on their own page!

While you're here - why don't you grab MY brand new button and pop it on your blog! Sorry if yours got the error, Photobucket was prompting me to update I'm sure! ;)


Let me know how you go with this... give me a link to your site in the comments section as I'd love to see your new blog button and grab box and pop it on my blog!! 

Good luck!

post signature