Since I moved my blog to WordPress, the HTML won't show up in this post. You can follow my instructions if you are a newbie to Blogger as I give screenshots of each step of the way, but you'll need to go to Matt Smallish's site for the HTML code. I'm willing to help you figure it out, if you have any questions at all, just click on contact above and send me an email!

I've had this post in draft form for some time, and a comment left on this post by Undercover Vixen has inspired me to finally get it finished and posted. Thanks for visiting my blog and stopping by, UV!

This progress widget bar was created by Matthew Harvey (matt at smallish.com). I found my html coding originally on a knitting blog, and tweaked it to fit my needs. It is also referred to as a debt meter, debt-o-meter, or just a debt progress bar.

These directions will help you install debt progress bars on your Blogger blog. Log in and go to Layout.

Click on Add a Gadget.

Scroll down until you come to HTML/Javascript.

This window will open.

Enter this HTML code. UPDATE: Since I moved my blog over to WordPress, I can no longer get the HTML coding to show up here. Please visit Matt Smallish's site for the html code, and further instructions.

Click Save.

You'll see that the Gadget has appeared at the top of the list on your sidebar. You can drag it down to another location by putting your mouse on it, holding the left button and dragging.

When you view your blog you will see the Gadget has appeared in the sidebar.

That's it!

You'll need to tweak the coding a bit, so here is some more information. Here is a screenshot of the coding – the top part stays the same, the bottom part (in green) is the area where you can change various sections.

When you are adding the new gadget, and you typed in “Debt Repayment Progress”, this makes the Title on your blog sidebar.

Below that header, starting with the line, here is a diagram of what each section of html coding creates on the sidebar. I've broken the coding into five sections.

The first section, the top line is created by this section of coding:

<p>________________________</p>

There are 24 underscores to make up that line.

The second item is the Green Header. This section of coding dictates the font weight, which could be bold, normal, lighter, etc.

<p><span style="font-weight: bold; color: rgb(51, 204, 0);">

Citicard 0% Interest</span> </p>

Next in the string of coding is color, which dictates the color. I used rgb values of 51, 204, 0 which causes the Green Header to look bright neon green. You could also just use “color: green” which would make the Green Header the default websafe color of green. I chose the rgb values specifically for those colors. Remember that you can see a larger image by clicking on the image. This section stays the same unless you want to change the color or font weight.

The third area is pretty self-explanatory, here is the coding:

<p>Current Balance: $2687</p>

Just change the amount to the current balance each time it changes.

The next area I would like to highlight is the fourth area, the Progress Bar. Here is the HTML code:

<script type="text/javascript">drawProgressBar('#98CD01', 200, 33);</script>

First up is ‘#98CD01'. This dictates the color of the progress bar. Next, 200 determines the width of the complete bar. And 33 indicates the percentage of progress. In the image, I show an example of what happens when you change the 200 to 100 – the width of the entire bar is half as big as it was originally.

The fifth area is the beginning amount of your balance, going all the way down to zero. I just typed in as many periods as needed to go from one side to the other. Here is the coding:

<p>$4000.......................................$0</p>

If you have any other questions, don't hesitate to ask!

Happy New Year!

Yours Truly,