Back in the day (2003), I bought a huge book on HTML code and read about 29 pages of it to improve my blogging skills. I’ve recently been helping out several of my fellow bloggers via e-mail answering some simple HTML questions. I noticed on Twitter today that lots of bloggers were inquiring about badges after Linley’s success installing a very cute one (that I can’t wait to put on my revised blog roll very soon!).
At first, I wasn’t going to create this tutorial because I thought I wouldn’t have time, but it kept popping into my head all day that I should really just take a few minutes and type it up. Plus, after I responded to a few different e-mails with the same info, I figured it would be more efficient to explain it this way, right? Duh.
Turns out, I had to learn even more HTML to get these codes to come out as text for you all to see, so that was super exciting.
Anyway, here it goes.
Note: Where I use CAPITAL LETTERS in this tutorial, that’s the text you should replace with your web addresses.
Creating Your Own Badge
1. Create an image that you’d like to use for your badge. I’d recommend making an image that is larger than your average sidebar — that way people can resize it up or down without it getting pixelated or fuzzy. Then you can change the width in the HTML code when you post it on your blog.
2. Upload it to your favorite place to keep your photos – Flickr, etc.
3. Grab the HTML code for your badge. If you’re in Flickr, you’ll want to choose “Grab the HTML/BBC Code” from the “Share This” drop-down menu. Only copy the tag that starts with “img src=” as shown below in step 4. Outside of Flickr, you find the image’s location by right clicking on the photo wherever you’ve uploaded it and selecting “View Image Info.” See where it says “Location”? Highlight that text and copy it.
4. Add aText/HTML widget to your sidebar, and create the following image source HTML tag for your image. If you need the image to be a certain width in pixels, you can write that into the code. (For example, this code would size the image to 150px wide.)
If you copied HTML from Flickr, you may have additional text in there (like height) — you can delete all that to keep your code simple. Just keep the image source and the width. (If you leave the height, the image may become distorted.)
5. Hit Enter, and type something like, “Copy and paste this text to add this badge to your blog!”
6. Below that, put in the following HTML:
The HTML above will create a 150px wide badge for whoever copies and pastes it. I think that’s a reasonable width for most sidebars — it won’t be too big and confuse whoever is using it if they don’t know HTML. If they do know HTML, they can always resize it.
7. You can can customize the height and width of your text area box in pixels, just like with images. Like this:
Or you can customize the height and width of your text area box by inserting numbers for rows and columns in the tag for text area. You can fiddle with the numbers until you get the size you want. For example, the text area box below is 2 rows by 50 columns. But the HTML in it is for a text area box 2 rows by 20 columns.
That’s it! Go test it out and make sure it works. And then leave me a comment, so I can go check it out!
Adding Someone Else’s Badge to Your Page
1. Copy the HTML provided from their page.
2. Create a new Text/HTML widget (or add to an existing one) on your sidebar.
3. Paste the copied HTML code.
4. To change the width of their badge to fit your sidebar, you can either change the width provided or add one right after the link to their image location (inside the img src tag). For example, if you want their badge to be 150px wide, do this:
Good luck! Let me know if you have questions or if you found this tutorial helpful!
Want to see my badge? (It belongs to my other blog.)
Copy and paste the text below
to grab a badge for your blog!
This crazy trip has got me feelin’: 
smart
And I’m singin’ along to: Close to You – The Cure
