Grab My Button Widget Tutorial: One Click Installation

“Grab My Button” is a good tool for promotion! Readers grab your custom image to show support and you get additional traffic. In the tutorial: Grab My Button, Promote My Blog , we learned to create a scroll box to hold the html code for your blog image and link. In this tutorial, we will take the widget a step further and add a small icon/button that will let blogspot users import your widget with just one click!

First, you need the code for your button. Here’s code structure:

<center><img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="" />
<textarea cols="20" rows="3"><a href="http://BloggingWithSuccess.net"><img src="http://farm4.static.flickr.com/3358/3279966696_6f63996198.jpg" alt="BWS tips button" width="125" height="125" /></a></textarea></center>

Just replace the image source and link url to make it your own. Be sure to put your value into the ‘Alt =’ instead of ‘bws tips button’ and the correct width/height if yours is different!

Now, you have the code. Next step is to convert the code so that Blogger layout does not mess it up by thinking it’s html for the Blogger Editor. Go to Blogger Code Converter and paste your button code. Copy output to a text file  or wordprocessor to use later.

Now, copy following code and paste it to a text file (or anything that lets you edit text):

<form method="POST" action="http://www.blogger.com/add-widget"><input type="hidden" name="widget.title" value="-widget-title-"/><input type="hidden" name="widget.content" value="-converted-code-"/><input type="hidden" name="widget.template" value="<data:content/>" /><input type="hidden" name="infoUrl" value="-your-blog-url-"/><input type="hidden" name="logoUrl" value="-if-you-have-logo-its-url"/><input type="submit" name="go" value="Grab Now"/></form> 

You will need to make following changes:

• Replace -widget-title- with the title you want to give to the widget. e.g. Recommended Reading etc. It can be left blank.
• Replace  -converted-code- with the code you got after conversion from Blogger Code Converter. It is required.
• Replace -your-blog-url- with your homepage or any other page that tells what widget is about. It can be left blank.
• Replace -logo-url- with any image address less than 100×100 you want to display on “Import Widget” page. It can be left blank.

Now if it’s not there already,  place your button image & scroll box on your blog. Then add the form code below it, in the same gadget/widget.

The above code displays a button with text “Grab Now” on it. To display the blogger button icon we use,  first, find following code (it’s the second-to-last line):

<input type="submit" name="go" value="Grab Now"/>

This code displays a button with text Grab Now. To use image, replace it with following code:

<input type="image" src="http://www.blogger.com/img/add/add2blogger_sm_b.gif" alt="Add to Blogger"/>

You can see the live example in our sidebar. (consider yourself invited to test the widget and add our button to your sidebar!   )