Progress Bars

I’ve been asked by Bank Gal (and a few others) about how to add the progress bars to the side of your blog. When I was a new blogger this was one of my first questions after looking at many delightful blogs I admire and wanting some progress bars of my own. In order to avoid reinventing the wheel, I’m going to refer you to Stacking Pennies who details it a little more carefully. Click here to read her instructions.

The basic gist of it is:
1. Customize your code.*
2. Add a text-link widget to your site. This is the WordPress name, I’m not sure if there is a text widget for Blogger users.
3. Copy and paste your html code. Save. Voila! You’re done.

*My code for the “Debt Left” bar to the side is below: :

<div>Goal Date: June 2010
<div style=”width:140px;height:16px;background:#EEE;border:solid 1px #555;”>
<div style=”padding-left:5px;height:16px;background:#FFCCEE;color:white;width:61%;”>$8500<br />
<a href=”#” title=”$8500″>61%</a></div>
</div>
<div style=”width:140px;text-align:right;”></div>
<div style=”width:140px;text-align:right;”>$13,800</div>
<br />
</div>

The “FFCCEE” is the pink background.You can find other colors by viewing html color codes here. Let the progress begin! :)

Updated: In addition to Stacking Pennies’ post, check out these two others that SS4BC told me about:

1. Clever Dude
2. Knitter’s Progress Bars

Leave a Comment

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

This blog is kept spam free by WP-SpamFree.