How to Add Progress Bars to Your Blog

• Tweet

 

 

Several people have asked me how to create progress bars for their blogs. You can use a progress bar to track income (like mine above), debt payoff, weight loss, or anything else you want to monitor.

There are several plugins for WordPress that will create progress bar widgets for your sidebar, but I don’t like them because they usually put something like PROGRESS BAR BY WHATEVERPLUGIN.COM underneath. So I decided to make my own.

Let me warn you ahead of time - there is a tiny amount of code required. But you’re basically copying and pasting the code, then altering three numbers. It’s not hard, I promise.

Where to Put the Code

If you use Blogger, you’ll want to add a Text/HTML gadget wherever you want the progress bar to show up. If you use WordPress, you’ll drag a Text widget into your sidebar. On either platform, you should be able to copy and paste the code below and see a progress bar when you look at your site. Unfortunately, free WordPress sites hosted on wordpress.com cannot use a script in a text widget, so you must use Blogger or self-hosted WordPress to use the code. (Just another reason to switch to self-hosted WordPress!)

The Code

Just copy and paste the text below (make sure you get all of it!) to create your progress bar. Then we’ll talk about how to customize it.

<style type="text/css"> div.smallish-progress-wrapper { position: relative; border: 1px solid black; } div.smallish-progress-bar { position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { text-align: center; position: relative; } </style> <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>'); document.write('</div>'); } </script> <center> <script type="text/javascript">drawProgressBar('#138917', 176, 38.3);</script> <br /><p>$0..................................$1500<br /></p></center>

Customizing

There are only 2 lines you need to change to use this progress bar code, and they’re at the bottom.

See the three numbers in the part below?

<script type="text/javascript">drawProgressBar('#138917', 176, 21.6);</script>

The first number is the color of your bar once it starts filling in. It’s using a hex code, which is a six-digit code (always with a # in front of it) that represents a certain color. If you want to find the code for a particular color, you can use this hex color chart. For example, if you wanted your bar to fill in with black, you’d change #138917 to #000000.

The second number is the width of the bar. You shouldn’t have to change this, unless you just need it to be a different width for some reason. A bigger number makes it wider; a smaller number makes it more narrow.

The third number is the percentage that needs to be filled in. This is what you’ll change manually on a regular basis to update your progress bar. For example, for my bar showing my income, every time I make more money, I have to change that third number. My goal is $1500, so if I’m up to a total of $400 for the month, I use a calculator (because I suck at math) to find 400/1500 = 26.6%. So I put in 26.6 for that last number (you don’t use the percent sign).

Now for the second line.

Obviously you’ll want to change this part depending on what you’re tracking:

$0…………………………….$1500

If you’re earning something (points, pounds, dollars, etc.), you’ll want to leave the zero on the left and just change the end number to reflect your goal.

If you’re counting down to something (like paying off a credit card), you’ll want to put the zero on the right and the starting number on the left.

What if I Need More Than One Progress Bar?

You can paste this code into as many gadgets/widgets as you need. So you might have one widget called “Miles I Ran in October” and another called “Total Miles for 2012,” for example. Each one will need to be customized as shown above, and you’ll have to go in and change the percentage manually when your numbers change.

Questions?

That’s pretty much it! If you have questions about using the progress bar code or need help getting it to work, let me know and I’ll do my best to help.