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>
The “FFCCEE” is the pink background.You can find other colors by viewing html color codes here. Let the progress begin! :)