Saturday, February 20, 2010

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.


  1. That's really cool. Thanks for the code.

  2. I wondered where those bars came from! Thanks I'm going to try it

  3. I've been wondering about those! Thankyou! :)

  4. I figured out how to put the bars on my site after seeing them here, but I also change the parts of the code that link to a different site, linking it to my own posts instead, as well as change the words that show up when you mouse over from "NanoWrimo writing toys games & gadgets" to the challenge name. BUT I hadn't figured out the shortcut for updating the bar, so thankyou for that!

  5. I use these too, and I also get the same questions. Good idea posting how to do it.


  7. Ok I'm totally tech challenged, I will have to ask a IT friend to show me then I can get it. I still haven't figured out the last help issue you gave me :-0

    I'll stick to trying to post on a regular right now. lol

  8. Thank you so much for posting this! I just started a couple challenges and stumbled upon this. And now I have a my very own status bars. Thanks again!

  9. Wow, that is incredibly helpful! Thanks so much!

  10. Thanks for demystifying the creation of those little bars! I've bookmarked your post for future reference in case I decide to make some of my own. :)

  11. Thank you for this! I saw this on your blog and wanted to know how. I googled it and you popped up. Added them on my sidebar. (queen bee)