:: Welcome ::
You've stumbled upon the simplest way to display those little bars that show your progress on a project. If you know how to insert an image into your blog sidebar, you can easily use these percent bars.
:: Make Your Percent Bar ::
Very detailed instructions below if you need 'em!
:: What is It? ::
The Percent Bar Maker is a button maker (of sorts). It's useful for crocheters, knitters, crafters, and, well... anyone who wants to display the progress of any type of project. Here is an example.
These little bars make it very easy to update the progress of each of your projects on your blog. The best thing is, you only need one short, simple line of code to display each one!
Don't feel like making your own? I have several premade sets available for download in popular colors (over in the sidebar).
:: How to Use the Percent Bars ::
Ok, first, you'll need to make about 23 of them. Yikes! I know that sounds like a lot, but it goes quickly. And once you've made them, you can use the same buttons over and over again for all of your projects. You could make more than 23, but 0 to 100 in increments of 5 (with 1 and 99 thrown in for projects that are reeeeally close) should be sufficient for most people. The 23 buttons would be: 0, 1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 99, and 100%.
As you make each button, you need to save it (right click, Save Picture As for IE users) to your own computer with a descriptive name. For example, a good name for the 50% button would be 50perc.png. When you're all done making buttons, upload them from your computer to your image host. If you don't have an image host, try Photobucket or ImageShack; they're free and easy.
Once you have your images made and hosted, you can display them on your blog sidebar (or where ever you want) just as you would any other button. As your project progresses, simply update your blog template to show the appropriate percent bar. Easy!
Here is an example of some percent bars in a blog sidebar. Below is the code used to add the percent bars in the example. This is ONLY an example. If you just copy and paste this exact code, your buttons will NOT show up. You must use the image locations specific to the percent bars you uploaded to your image host. (Your image host should have instructions on how to display your images on a web page.)
If you're new to blogging and to HTML, this may still be a little confusing for you. Don't worry, it just takes some time and patience to learn the things you need to know about HTML and about the blog program you have chosen to use. I know it can be frustrating, but a full-blown blog is not born overnight. Take things one at a time and don't overwhelm yourself. Here are some helpful links:
Lissa Explains it All
knitblog.com (see the Help Files and don't miss: Bandwidth Theft)
:: Why are the percent bars 102 x 15 pixels? ::
Well, the standard size of mini buttons or blog stickers is 80 x 15. But in order to display percent properly we need 100 pixels across--one pixel for each percentage point. Then we need two more pixels on each side because the border is one pixel all the way around. Thus, you get 102.
:: History ::
After seeing the Kalsey Button Maker and the Brilliant Button Maker, I kept thinking there must be a way to use Bill Zeller's php script [source code sometimes available here or here] to make buttons that could be used as progress bars. In September 2005, I finally took the time to tackle it, starting from the source code given here on Arcauv Blog, and with the very generous help of Luca Zappa when I had font problems.
:: That's All Folks! ::
Have fun with those projects!