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.
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.
When you view your blog you will see the Gadget has appeared in the sidebar.
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.
The first section, the top line is created by this section of coding:
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.
<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:
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.
If you have any other questions, don’t hesitate to ask!
Happy New Year!