:: 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!

Result

Project Progress
Numbers can be from 0 to 100.

Fill Color
Enter the hexadecimal color code of your choice or click the palette icon to use the color picker.

click here to choose your fill color

(Note: These bars are 102 x 15 pixels and they are in png format.)

Save it and upload it to your own image host.
Don't have an image host? Try Photobucket or ImageShack.


:: 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
HTML Goodies
W3Schools
HTML Clinic
AAA HTML
knitblog.com (see the Help Files and don't miss: Bandwidth Theft)
Blogger Help
TypePad Help


:: 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 ::

Craft bloggers are always on The Quest for percent bars. Lots of folks have used the Dynamic Flash Percent Bar offered by Anna Knits on her Free Blog Stuff page, but her site is no longer on the web. A javascript-based percentage bar can be found on Unlikely Words. A tutorial for table based progress bars is available on Soapbox. Others, like me, have made their own bars in Photoshop or another graphics program.

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!


spacer

:: Premade Sets ::

Click on the color of your choice to download the zip file containing 23 premade bars. After download, unzip with a compression utility such as WinZip. If you're using Windows XP, you can right click the zipped folder and choose Extract All from the menu to unzip.

blue set
purple set
teal set
green set
pink set
orange
gray


:: Buttons ::
Percent Bar Maker 80 x 15 pixels
Percent Bar Maker 80 x 15 pixels
Percent Bar Maker 102 x 15 pixels

:: Brought to You By ::
Yarn Tomatoemail

:: Credits ::
Bill Zeller
Luca Zappa