Monday, May 9, 2011

How to make a progress bar

<a href="URL TO READING CHALLENGE POST">NAME OF READING CHALLENGE</a> 
<div style="width: 185px; 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(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Copy and paste the above, then modify the highlighted parts.


<a href="URL TO READING CHALLENGE POST">NAME OF READING CHALLENGE</a> 
<div style="width: 185px; 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(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Your book title
Percent of you book complete   if you are aiming for 80K and you have written 20k you divide 20,000 by 80,000 and that is your percent. Round up or down to nearest percent.
Color of your progress bar.
Change to word count  ex. 20,398/80,000 Complete

Add this as an HTML to your side bar

2 comments:

  1. Thanks for this. I've always kinda wondered about the how-to on this and didn't exactly know how to look it up.

    Thankies!

    ReplyDelete
  2. Thanks for all your help Christine. You rock!

    ReplyDelete