How to make progress bars for your blog
I’ve had a couple people ask me this recently, and when I first started blogging, I wanted to know too! How do you make progress bars? There is a really detailed article (that I didn’t read) written by a knitter that turns up as the top hit on Google for a “blog progress bar” search.
The real secret is, you can just borrow them from any friendly blogger. And by borrow, I mean copy directly. You might want to ask first and see if they want credit for it, but chances are, they won’t care. I’m not sure who I got my progress bar code from, though MapGirl credits Clutter2Cash for her’s, and it might have been through there.
How do you steal the code? In Firefox, go to View -> View Source, or hit Ctrl-U and you can look at the source code for any page. Then tweak and customize it. Using WordPress.com? Here, I’ll save you a step. I took my code for you (note: not an expert coder). Add a text widget, paste this in, then play with the colors. Let me know if you have trouble with it!
There is also a way to make a little box show up with the amount saved when you hover over it (see Krystal‘s bars for example), but I guess I took that out last time I re-did mine.
<b><font color=”#3366FF”> NAME OF YOUR GOAL </font></b><br>
Goal: $16k end of year<br>
<div class=”goal” style=”width:195px;height:15px;background:#A9D0F5;border:solid 1px #555;”>
<div class=”progress” style=”height:15px;background:#3366FF;color:white;width:51%;”><b>51%</b>
<div style=”font-size:10px;float:left;”> START </div><div style=”font-size:10px;float:right;”> END </div>
There, now you can display your progress too!