Create a widget, spread the joy

I received a request to explain how to do the Widgets that readers can grab and place on their own sites. Such as

<a href="http://thebrookshirefam.blogspot.com/2008/11/youre-invited.html"><br /><br /><img src="http://i533.photobucket.com/albums/ee340/MelindaB210/Recipe_button_Page_9-1.jpg" /><br /><br /></a><br /><br />

and




<a href="http://thebrookshirefam.blogspot.com"><br /><br /><img src="http://i533.photobucket.com/albums/ee340/MelindaB210/burb_banner_Page_8-1-1.jpg" /><br /><br /></a><br /><br />

It took me forever to figure out how to do this. I searched sites upon sites upon sites and finally was able to compile enough information on how to do this. In the end, it couldn't have been any easier.

Step 1: Take a photo or graphic (mine were created using Scrapblog) that you would like to use for you widget and store it in an online photo bank such as Photobucket.

Step 2: Make sure that your photo/image has been reduced in size - in Photobucket, they have preset sizes and I believe I set mine to the small - but you can play around with it until it suits you and your needs.

Step 3: Once your image is the way you like it and has been saved, Photobucket will provide you with a number of different codes such as "Share URL", "Direct Link", "HTML Code", and "IMG Code". The latter (the "IMG Code") is the one you will want to know for creating your Widget.

Step 4: If you are posting this in your sidebar you will want to "Add a Gadget", then choose the "HTML/Java Script" button. If you are posting this within a post, you will want to "Edit Html" and embed the code there.

Step 5: The code you need is as follows but there are a couple of things you need to notice: number one (the most obvious), is replace the "not-a-real-namespace/yourblogURL" places (there are 2)with your actual blog URL and replace the "not-a-real-namespace/yourPhotobucketIMGCode" places (again, there are 2) with the code from Photobucket we talked about earlier.

Now, the second thing you need to notice is that on the IMG Code from Photobucket they have included a [IMG] before the code and a [/IMG] after the code. You will want to omit those when embedding your code.

And that should be it. I am by no means a techie type of person or a computer genius. This took a good bit of research and I only hope I have presented it to you in a clear and concise manner. If you decide to use the following code, leave me a comment and let me know if it worked.

<a href="yourblogURL"><img src="yourPhotobucketIMGCode" /></a><form action="name=" method="post"><textarea rows="3" cols="12" name="textarea"><a href="yourblogURL"><img src="yourPhotobucketIMGCode" /></a>