About Me

Sunday, October 18, 2009

How To Make Progress Bars

Some people have been wondering how to make progress bars. They are actually easier to make even though the HTML code is tricky. But here is one version of progress bars. First you need to go to the "Layout" section of the Blogger and then "Add a Gadget." From there you need to add the "HTML/Java Script" gadget. Create a title for your progress bars and then add the following into the content section.

<b><font color="#3366FF">TFSA</font></b><br/>
Current $350
<div style="width:240px;height:15px;background:#A9D0F5;border:solid 1px #555;" class="goal">
    <div style="height:15px;background:#3366FF;color:white;width:23.3%;" class="progress"><b>23.3%</b>

<div style="font-size:10px;float:left;">$0</div><div style="font-size:10px;float:right;">$1,500</div>

From this you can change the colours, the width of the progress bars, and of course the percentages and goals. Where there are numbers combined with letters is where you can change the colours. You can change the colours easily by going to this site and copying the colour code http://html-color-codes.com/ to what you would like. Play with it a little bit, if you mess it up just re-copy and paste it until you get something you like. I hope this works for you! If you have any questions please ask!


  1. Glad you were able to figure it out. They look lovely.

  2. Great explanation! This is probably the #1 asked question! ;)

    I have added you to my blogroll!

  3. I love progess bars! And good job to the sudent loans!