Some Site Stuff…

I made a couple of changes behind the scenes over the weekend, and I wanted to address the site stuff, so I thought this would be a good time to do that…

First of all, I use Feedburner for my RSS feed, and they have recently been acquired by Google, so my RSS feed had to be updated.  It really shouldn’t cause any problems, but I did have to re-sync the feed when I moved it, so if you noticed a glitch or two in your feed, that’s why.

I’ve had several requests for the code for my debt charts.  Alas, I cannot claim credit.  In fact, I can’t even claim to know the guy (Matthew Harvey over at smallish.com) that provided the code.  Early on, one of my very first readers was Mrs. Accountability over at the Out of Debt Again blog.  At the time, she had a debt chart similar to the one I have now, and she volunteered the code to create one, so thanks to her, I now have the opportunity to share…

In Blogger, create a new “gadget” of HTML/JavaScript, and put the following code in the window:

<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <style type="text/css">   div.smallish-progress-wrapper   { /* Don't change the following lines. */     position: relative; border: 1px solid black; }   div.smallish-progress-bar   { /* Don't change the following lines. */     position: absolute; top: 0; left: 0; height: 100%; }   div.smallish-progress-text   { /* Don't change the following lines. */     text-align: center; position: relative;     /* Add your customizations after this line. */ } </style> <!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License (http://creativecommons.org/licenses/by-sa/2.5/) --> <script type="text/javascript">   function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100);   document.write('<div style="width: ' + width + 'px" class="smallish-progress-wrapper">');   document.write('<div style="width: ' + pixels + 'px; background-color: ' + color + ';" class="smallish-progress-bar"></div>');   document.write('<div style="width: ' + width + 'px" class="smallish-progress-text">' + percent + '%</div>');   document.write('</div>'); } </script> <span style="font-weight:bold;">Overall Debt</span> <br/>Current Balance: $38,695<script type="text/javascript">drawProgressBar('#223344', 200, 50.4);</script> $77,962 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp $0 <p> <p> <span style="font-weight:bold;">Credit Cards</span> <br/>Current Balance: $1,899<script type="text/javascript">drawProgressBar('#223344', 200, 93.6);</script> $29,767 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp $0 <p> <p> <span style="font-weight:bold;">Student Loans</span> <br/>Current Balance: $13,905<script type="text/javascript">drawProgressBar('#223344', 200, 7.3);</script> $15,120 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp $0 <p> <p> <span style="font-weight:bold;">Ford Ranger</span> <br/>Current Balance: $7,931<script type="text/javascript">drawProgressBar('#223344', 200, 21.3);</script> $10,076 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp $0 <p> <p> <span style="font-weight:bold;">Ford Fusion</span> <br/>Current Balance: $14,960<script type="text/javascript">drawProgressBar('#223344', 200, 35.3);</script> $23,120 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp $0</p></p></p></p></p></p></p></p>

 

Of course, if you have a different number of debts, you can adjust accordingly.

The parts you can change are contained in the script that draws the progress bar… 

<script type="text/javascript">drawProgressBar('#223344', 200, 35.3);</script>

#223344 is the color code, 200 is the pixel width, and 35.3 is the percent to the goal.

If you are counting up, then you just replace the big number with 0, and put your goal at the end.

The formula for calculating percentage is easy…  your overall progress divided by the starting point of the debt.  If you are using it as a savings goal, then it would be the current balance divided by the goal.

I hope that helps anybody trying to create their own progress bars!