How to: Make a Blog Badge and a “Grab this badge”

You know all of those fancy bloggers who have their very own sidebar badge that you can grab and share on your site? Wanna do that, too? Of course you do. Here’s how.

How to make a Blog Badge or Blog Button

Step 1. Create your blog badge or blog button image in Photoshop Elements or Picmonkey depending on your level of graphic artsy-ness.

Evolved Mommy blog badge

Step 2. Upload your image to Flickr, Photobucket or WordPress. You will need a web location for the photo from which to work.

Step 3. Write some code ladies.

<div align=”center”><a href=”WEB ADDRESS YOU WANT THE BUTTON TO GO TO”><img src=”LOCATION OF YOUR IMAGE” /></a></div><br>

Which looks like this:

<div align=”center”><a href=”“><img src=”” /></a></div><br>

Step 4. Add this code to a text widget box (if you don’t know what this means just shoot me an email and I’ll walk you through it).

how to write html code to create a blog badge or blog button
Inserting code into a widget “Text” box

How to: Add the “grab a badge” function

With just a little more code you can let your viewers grab your badge and add it to their own blog or website.

Step 1. Take the code from above and add the “grab this badge” code.

CODE FROM ABOVE +<div align=”center”><form><textarea rows=”3″ cols=”19″ readonly=”readonly”><a href=”WEB ADDRESS YOU WANT THE BUTTON TO GO TO” target=”_blank”><img src=”LOCATION OF YOUR IMAGE”></textarea></form></div>

Which looks like:

<div align=”center”><a href=”“><img src=”” /></a></div><br>
<div align=”center”><form><textarea rows=”3″ cols=”19″ readonly=”readonly”><a href=”” target=”_blank”><img src=””></textarea></form></div>


blog badge grab example
The EvolvedMommy badge is gigantic for illustration purposes. Small buttons are 125px x125px. Bigger buttons can be as wide as 250px and as long as 600px, but that would be ridiculous. Do what you feel comfortable with.

Have you done this for your blog? Where these instructions easy to understand and follow?

Leave a Reply

Your email address will not be published. Required fields are marked *