Monday, April 15, 2013

Building Your Blog: Progress Meters

Progress meters are bars that show your progress on a given project. They allow your blog visitors to see what you're working on and how close you are to finishing them. I use mine for writing, maybe you'll use yours for gardening. More importantly, if you faithfully update progress meters, they can help you keep on task.

The learning curve is fairly easy, but reward your efforts significantly.

Finding A Progress Meter
Several progress meters are available on the internet. If you do a Google search, you'll be swimming in them. But which one is right for your blog? This boils down to a simple style issue and you're going to have to look at a few to find the one that matches your theme.

When you set up your blog, you picked a template that came with several automatic style choices. When choosing your progress meters, find one that blends with your blog. For instance: if your blog has a fantasy/forest type theme, you're not going to pick a sci-fi looking meter.

When I chose the meters for my blog, I found a simple meter because my theme is crafted around petroglyphs. In other words, simple drawings and stone. I chose a meter that had been created for a sewing group because it was very simple and plain. Sure I could have picked a high tech looking meter, but remember my theme: petroglyphs. Simple. Primitive. Nothing flashy.

Try some of these links and find one you like:

Adding The Code
Stop! Don't panic yet.

Some of you might think you're about to enter 'Programmer Land,' but this part is actually very simple.  To begin, inside Blogger:
  1. Select Layout
  2. Select Add Gadget where you want your meter to appear
  3. Select the HTML/JavaScript Gadget
  4. Paste the progress meter code and save
Most of the progress meters you'll find will have similar instructions for adding the code to your blog.

To try the meter I use, add the red and green code below to play around, or find the code for another meter you prefer. The red/green code below is for the meters I use, and I'll teach you how to customize them.
You'll have to set up the parameters of your meter regardless of whether you try mine or someone else's, and the other meter web sites should have information how to customize theirs.

For now, lets look at the code I use so I can explain how I do it:
<!-- Progess bar widget, by Matthew Harvey (matt at --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License ( --> <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 --> <!-- Licensed under a Creative Commons Attribution-Share Alike 2.5 License ( --> <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>


<!-- List Colors Gold-#FF9933, Red-#E77471, Green-#99C68E -->

<li> Blood of Mars - Rough Draft <script type="text/javascript">drawProgressBar('#FF9933', 100, 100);</script> </li>

<li> Monthly Word Count Goal <script type="text/javascript">drawProgressBar('#99C68E', 100, 25);</script> </li>

<li> Weekly Word Count Goal <script type="text/javascript">drawProgressBar('#99C68E', 100, 100);</script> </li>

I admit it looks a little intimidating unless you've seen html code before, but I'm going to try to clear up some of it. Please bear in mind that my html coding is 10+ years old, and web design has developed a bit (infinite bit) since then.

Reading and Adapting HTML Tags
Let me explain first, that html is created using 'tags' and that html tags always have an opening and closing tag. The only thing that differentiates closing tags from opening tags, is the slash in the closing tag. For instance, these are the opening and closing tags for the web page on the whole: <body> </body>

Again, don't panic because Blogger takes care of all of this for you when you set up your layout. I'm just explaining it so you can see that when you know what the tags are, the rest is easy.

I divided the code of my progress meters into red and green text so I can explain how I use it.
  • The red code you DON'T TOUCH. It gets copied and pasted into your blogger widget and contains the original programmer's information.
  • The green code gets copied and pasted, BUT you'll change the parameters to be your individual project meters.
Lets go over the green code, so you can see how you'll customize it for your own needs. First off, all the green code is, is a list. Simple right? You'll see these 'tags' at the top and bottom.
  • <ul> </ul> These tags denote an unordered list, meaning the list has no specific order, but the top list item will appear on top, and so on.
  • Then, inside the unordered list, you have tags that denote each list item. The opening and closing list item tag look like this:  <li> </li>
  • Each list item is an individual progress bar. You can copy and paste these list items as needed if you want more progress meters. Delete the list items, for meters you don't want.
 Now lets look at one meter, or list item:
<li> Monthly Word Count Goal <script type="text/javascript">drawProgressBar('#99C68E', 100, 25);</script> </li>
Inside the list item, first is the progress meters name--Monthly Word Count Goal, followed by the code that creates the bar. To customize an individual bar:
  1. Change the meters name, then find the coding inside the (parenthesis)
  2. Change the meter's color. The color is denoted by the web color number such as, #99C68E, which is a shade of green. ONLY change the color-- #XXXXXX -- nothing else.
  3. See the final step below.
More On Color
If you'll notice, I have the following line of code just inside the unordered list tag.
<!-- List Colors Gold-#FF9933, Red-#E77471, Green-#99C68E -->
This line is hidden and does not display on the web page. I use it to keep the color numbers I use for my bars. Gold = general purpose, Red = behind goal, Green = goal achieved/on target. If you plan to use different colors, change these numbers to the colors you will be using.
To see the various color options, please visit this site:
Final Step
Finally, the last customizable feature is the percentage complete. Inside the list item tag, the last two numbers in the parenthesis specify your percentage. The first, '100,' sets the 'finished' setting at 100%. The second number is the percentage you have completed. If you've only completed about 25%, you put 25 here.

Sound Off
Do you use progress meters? Where did you find yours and what made you use it over all the others? Have you found a meter that's better than the rest?


  1. How funny--I was just thinking about getting one of these today! I love when I see the progress of different goals on blogs. And you do a fabulous job showing how simple this can be, Anthony. It's a good thing smart people like you exist to help us non-technological peeps!


  2. THis is great information. My problem is that I don't know how long a book is going to be until it's done.

  3. Oh great. Now I have no excuses. Thanks a lot.


Popular Posts