How to Make a Badge for your Blog

I did a lot of research on this several months ago, but never got around to sharing what I discovered. So, I will take this opportunity to reveal the fruits of my labours. I wrote this article, so you can copy the code from my site and then just input the information for your particular site. Once your values are input, you should be good to go.

As you may notice, the code below is in two sections. The first section contains the code for the clickable image that is displayed on your site. The second part of the code is for the text-box and the code your readers will use to display your badge.

Okay, once you have an image you want to use, let's get started...


This first part of the code, will link your image to your site...

<a href="YOUR WEB SITE ADDRESS HERE" target="_blank" 
title="YOUR BLOG TITLE HERE"><img alt="widget for 
YOUR BLOG TITLE HERE" 
src="ADDRESS FOR YOUR PHOTO GOES HERE" width:125px;height:125px; />
</a>

This is the code to make the box appear under your image. This allows other people to copy your coding and paste it on their site. When they do, your badge will appear on their site...

<readonly><textarea id="code-source"
onclick="this.focus();this.select()" rows="3" cols="15" 
name="mybutton"><a href="YOUR WEB SITE ADDRESS HERE"><img 
border="0" width:125px;height125px; 
src="ADDRESS FOR YOUR PHOTO GOES HERE" 
/></a></textarea></readonly>

• Where you see: Width and Height, just enter the actual measurements of your image. This is not required, but it helps the page load a little faster


• The Rows attribute will allow you to control the height of your box


• The Cols (for columns) attribute will allow you to adjust the width of your box


• The Onclick portion is a bit of code that will allow your visitors to just click your code and it will all be automatically highlighted for them; There will be no need for them to hit the "select all" button

Here's what the coding will look like with actual values. Feel free to copy/paste this code and just replace the URL addresses in bold, with your own...

<a href="http://mrmomsunite.blogspot.com" target="_blank" 
title="Everyday Living"><img alt="widget for Everyday Living" 
src="http://lh3.ggpht.com/_lUXXEQ0TG_0/" width:125px;height:125px; />
</a>
<readonly><textarea id="code-source"
onclick="this.focus();this.select()" rows="3" cols="15" 
name="mybutton"><a href="http://mrmomsunite.blogspot.com"><img 
border="0" width:125px;height125px; 
src="http://lh3.ggpht.com/_lUXXEQ0TG_0/></a></textarea></readonly>

Once finished, you should end up with a badge looking like this...

Minus the handsome cat, of course.
Please let me know if you have any questions and I will do my best to help you.