Wednesday, November 19, 2008

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


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.


Mc Allen said...

Hey thanjs for the help. you did a really great job and made it not seem quite so overwhelming!!! ;) LA

Melinda said...

Your very welcome. I only hope it works...

Thanks for stopping by!

Dawn said...

I really appreciate you taking the time to share that with us!!

It seems easy now that you explained it. :)

Melinda said...

Normally this would not be something I would post about just because I am sure some smarty-pants computer person will read this and critique it and rip it to shreds : ) However, since someone requested it...well, let's just say I have a hard time saying "no".

Stacey said...

Melinda you are an absolute doll!! Thank you ooodles and ooodles!! I'm off to make my logo and try it out. Yippeee!!! You rock girly!

Stacey said...

It worked! You're awesome!! Thank you so much!!

Melinda said...

Yay! I am so glad it worked! You are very welcome, Stacey.

This Crazy Thing Called Motherhood said...

Thanks for the walk through on this!

I had no idea how to use the cool widget you made for the cookie swap, so I just saved it as a picture to display within my blog and hoped everyone would click on the hyperlink to your blog instead!

Heidi said...

Oh yay! I made one today, except for photobucket hating me, it was SUPER easy thanks to your instructions! You're an All-Star!

Charity Childs-Gevero said...

yay! yay! yay!

Stacey sent me your link and I ran on over, and I did it! I did it! I did it!

You can now take me home with you! Yippee!

Thanks so so much!

kittens n kisses,

~ A Moxie Mom said...

This has been SOOO helpful! Thank you for posting this!

~ A Moxie Mom said...

It took a few days to find the time to sit down and do it, but I did it! I did it! (This is me dancing a celebration jig).

Jessica said...

Thanks for posting this link Melinda!!! It kind of worked but not all the way for me. I got my image and the box, but the box was empty. I've got to fiddle around with this a bit more, but I REALLY appreciate your help!!!


Charity Joy Bell Childs said...

I just wanna thank you for this, really, because until now, every time I change my badge, I refer myself back to this post of yours! The most helpful, ever! thank you!

p.s. I've change my badge for the third time now. :)