Progress Bars for Your Challenges

I've been asked a number of times about the progress bars for my challenges. They're not widgets (which means you have to update them by hand as you finish your books), but they're also not really complicated. If you want a status bar, just copy the following code and paste it into the HTML of your blog post (you can also paste it into the HTML widget on Blogger, too, if you want it in your sidebar like I have):

<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(155, 155, 155); font-size: 8px; line-height: 8px;"></div></div>

Your bar will look like this:

The width of the progress bar is set at 190 pixels and the height is 15 pixels, but you can change that to whatever you like (you might want to do this if you're putting it in a narrow sidebar so that it doesn't get cut off).

You'll probably also want to change the colours so that it matches your blog. In the code, where it says "rgb", it indicates a colour. The first one is the background of the bar (set as white in this case); the second colour (set as black) is the border colour; the third colour (it will be grey here) is the actual bar.

To change the "progress" of your bar, just set the "width" value (the one in %... not pixels) to whatever percentage you like. Here, I've set it to 33%:

Enjoy your brand new progress bars! Happy reading!