Thursday, March 10, 2011

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="http://1.bp.blogspot.com/-cL5DAtU1z5I/TV7aOTuSaxI/AAAAAAAAAJE/DwGvYCNjAAs/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="http://1.bp.blogspot.com/-cL5DAtU1z5I/TV7aOTuSaxI/AAAAAAAAAJE/DwGvYCNjAAs/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!

6 comments:

  1. Marina,
    Thanks for visiting and commenting my blog, I like SAl because I always make new friends. Concerning the pattern, after browsing through my Burda magazines I eventualy chose a pattern from the last Mars issue : Blazer 134 shown page 33. It has all the details of the classic tailored jacket and that's what I am looking for as I tend to wear my clothes for years. I chose Burda because their patterns are always very well drafted.
    Have a nice and let's keep in touch.

    ReplyDelete
  2. Hi, just wanted to say the vintage pattern I won on your giveaway arrived quickly and it´s gorgeous. I´m so happy with it!! A million thanks for it.
    I love your blog, and although I don´t have the time to comment often, I´m loyal to your posts.
    María

    ReplyDelete
  3. I might just use your instructions for a giveaway badge soon! Thank you so much for the patterns, they really made my day (yesterday that is:D) and I have plans for both:) I also wrote abt that in my last blog post of course!

    ReplyDelete
  4. Thanks Magda, Maria,

    I am happy you like the patterns and if you use them one day I woudl be happy to see your garments. I will be hosting pattern giveaways regularly - I have too many of them and need to organize them better, So keep checking :-)

    ReplyDelete
  5. Hi Maricou,

    Thanks for visiting, I am happy I can now read on one of my favourite subjects in French - this is just the best way to practice regular reading, besides some online news sites in French.

    Looking forward to read more on you SAL progress. I think I will go with Claire Shaeffer Custom Couture pattern,

    ReplyDelete

LinkWithin

Related Posts Plugin for WordPress, Blogger...