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:
- Select Layout
- Select Add Gadget where you want your meter to appear
- Paste the progress meter code and save
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:
<!-- List Colors Gold-#FF9933, Red-#E77471, Green-#99C68E -->
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.
- <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.
- Change the meters name, then find the coding inside the (parenthesis)
- 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.
- See the final step below.
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: http://www.w3schools.com/html/html_colornames.aspFinal 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.
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?