Progress Bars

Woo hoo! I am so excited that I made a progress bar that works. It only took me about 2 hours and a dozen or so different internet resources. I took a little info here and there and copied code from a couple of different sites and I got progress bars!

For the rest of you out that want to add progress bars to your blog, this is how I did it (I am by no means a techy or a computer geek but hopefully I can make this clear for you). These instructions are for the new Blogger, I have no idea if they will work with other blog servers.

Important Note: Every [ and ] noted below must be replaced with <> respectfully in order for your code to work. I find it easiest to cut and paste the code into Microsoft Word and perform the find and replace action under the Edit tab.

1. Log into your blogger acount.

2. Go to Layout.

3. Click on the Edit HTML tab.

4. IMPORTANT: Click on the Download Full Template before you go any further. This will save your excisting template to your hard drive in case your changes don't work.

5. Cut this:
[link href='css/style.css' rel='stylesheet' type='text/css'][style type='text/css']

.prog-border {
height: 15px;
width: 205px;
background: #fff;
border: 1px solid silver;
margin: 0;
padding: 0;}

.prog-bar {
height: 11px;
margin: 2px;
padding: 0;
background: #C9DDEC;}
[/style]
[/link]

6. Scroll down until you get the first entry of
[head]
(This only about 8 lines into the HTML text)

7. Paste what you cut in #5 above below [head] and above [b:include data='blog' name='all-head-content'/]

8. Click SAVE TEMPLATE

9. Now click on PAGE ELEMENTS under the LAYOUT tab

10. Select add new ADD A NEW PAGE ELEMENT from the side bar.

11. Select HTML/JavaScript.

12. Paste the following into the content box:
[ul]
[li]Name of your project here:: percent complete here%[/li][div class="prog-border"] [div style="width: 85%;" class="prog-bar"] [/div][/div]
[/ul]

13. For each project you want to post just repeat from [il] to [/div]. Besure you have [ul] at the very beginning of your HTML and [/ul] at the very end. These do not need to be repeated for eahc project.

14. You change the color of border and your bar by going to Visibone's Color Lab and changing the code background in #5 above.

I hope this works for you and makes it easier that what I had to do. My references are: Man Bites Hollywood, Knitticisms, Blogger Help