Instructions for most blog platforms are immediately below. Special instructions for "New Blogger" are at the far bottom of the page.
If you have questions, email me at: matt AT smallish.com.
Copy all of the following (in the gray box) and paste it between
in your template:
You can, of course customize the appearance of the progress bar. The three arguments to the drawProgressBar function are the color of the bar, the width of the entire bar, and the percentage to fill.
For instance, 200 pixels too wide? Here's a narrower one, only 100 pixels wide:
Cute! Red not your style? Change the first parameter, which should be a valid HTML RGB color. Don't forget the
Do not carry out any of the above instructions. Go to the "template" tab on your dashboard screen. Choose "add a page element." Choose "HTML/Java Script" from the options presented and click "add to blog."
In the next window, type "Works in Progress" (or whatever you want to call this section) in the "title" bar. In the large box underneath, first paste the entire large block of code given at the top of this page. Hit return a couple times, and under that, paste the snippet of code (from "How to use it," above) as many times as you'd like to create as many bars as you like. You can change the parameters as described in "how to use it" above.
And of course, you don't have to only show 50%. Any number between 0 and 100 will work as the third argument.
You can put descriptive text above (or below) each progress bar just by typing the text in relation to the code. So it might looks something like this:
You can also use basic HTML tags on the descriptive text to make links and other formatting changes. You might put them in an unordered list, for instance!
That should do it!
Please do not remove my name and email address from the code above when you include it in your blog template. Thanks!