Blogging Help: Adding Progress Bars to Sidebar

I've gotten a couple of emails in the past few weeks asking how to get the progress bars that I use to track the reading challenges I'm participating in. While I've replied to everyone (I think), I thought I would post the answer here as well in case anyone else was interested.

6 / 14 books. 43% done!

I start out with the NaNoWriMo Word Meter found on Language is a Virus. I fill out the form, substituting information as follows:

Current NaNoWriMo Word Count = Number of books read towards challenge

Total NaNoWriMo Word Goal  = Total number of books needed to complete challenge

NaNoWriMo Progress Bar Color = HTML code for the pink that matches my layout.

Click Calculate and copy and paste the code into a HTML/Javascript sidebar widget. Change "words" to "books" and your finished.

You will need to repeat this process each time you complete a book or you can update the code yourself.

...width:43%;height:15px;background:#CC0049;font-size:8px;line-height:8px;"><br></div></div></a>6 / 14 books. 43% done!...

To manually change the code, you only need to be concerned with the portion above.

Change 6 / 14 to 7 / 14.

Divide the 7 by 14 to find 0.5.

Change 43% done to 50% done.

Change width:43% to width:50% and you're done.

I find that manually changing the code is easier, especially when each book completed is used for multiple challenges. Using a calculator and changing a couple of numbers is faster for me than inputting data, copying and pasting multiple times per book. But if you fear messing with HTML code, using the site each time will get you the same result.