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,

Where Did I Get My Debt Progress Bars? is a post from: http://www.outofdebtagain.com. If you are reading it from any other website address than one beginning with http://www.outofdebtagain.com, the content has been stolen.

Related posts:

1. My New Love – WordPress 2.7
2. Ch-Ch-Ch-Changes, Thanks and Kudos
3. Adding a FavIcon to Your Site