Creating a blog badge with a code for readers

I've seen many sewing blogs recently, hosting either a sew-along, or a give-away, or a series of posts on a specific topic. Usually the bloggers would create a badge, and participants readily grab those to display those on their blog. But how about making it easy for your readers to copy the image and the code in just three steps:

1. copy the code
2. paste it into a new HTML/Javascript widget (on Blogger)
3. Save the widget and Publish the blog

See, for example, the gadgetmania badge on the right. It's so easy, really.

This is the code you need to insert in your HTML/Javascript Widget (on Blogger), and I have colour-coded different parts to explain how to customize the content:

>>>>> CODE STARTS HERE<<<<<


<a href="http://frabjous-fashion.blogspot.com/2011/02/sewing-gadget-mania-no1-ladys-knife.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBbrF6kO75L_Z6Yiyd7FnJMk3GfH1S_qTmb7FKdZ88WTqGERZypSVdqdm_wk5xKqDeQt_sQBI4lu0D_BsokqoqMq8DzOc3r_9kPXPrpndoI1Vu_kWAU6pm1FD68AsY59vSUlEdig3__kc/s1600/gadgetmania2.jpg"/></a>

<p>Do you love sewing gadgets? Join the community - grab the code below to display the badge on your blog</p>

<p>Click on the badge to find out how you can win the Little Black Dress book</p>

<textarea name="textarea" cols="30" rows="4" wrap="VIRTUAL">
<a href="http://frabjous-fashion.blogspot.com/2011/02/sewing-gadget-mania-no1-ladys-knife.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBbrF6kO75L_Z6Yiyd7FnJMk3GfH1S_qTmb7FKdZ88WTqGERZypSVdqdm_wk5xKqDeQt_sQBI4lu0D_BsokqoqMq8DzOc3r_9kPXPrpndoI1Vu_kWAU6pm1FD68AsY59vSUlEdig3__kc/s1600/gadgetmania2.jpg"/></a>
</textarea>

>>>>> CODE ENDS HERE<<<<<

The PURPLE text is the URL of the page where you want your readers to land when they click the badge. Copy and paste your URL instead.

The BLUE text is the URL of the image/badge - if it's located on your blog, all you need to do is CTRL-CLICK on Mac, and choose COPY LINK. Then paste it instead of the blue-coloured URL in my example.

The GREEN text is the custom text you want to appear between your badge and the text box with the code for readers. Just edit it, or remove it completely. Be careful not delete any of the tags, or anything that is typed in black.

If you don't want to display the code, than delete the part from <textarea to </textarea>

That's it!