Progress Bars

Beth in MD asked me how to add progress bars to her blog.

Adding progress bars to your blog’s sidebar really isn’t difficult.

STEP ONE:
You have to either 1) create your progress bar graphics, or 2) use graphics that are already created. I opted for #2 since I didn’t have time to create new ones. Click HERE for instructions on how to create PB graphics.


STEP TWO:
Upload the graphics to an image hosting program. I use Photobucket. It’s free, and easy to use.


STEP THREE:
Upload WIP and Progess Bars to your sidebar in blogger.

At the blogger dashboard, click on Layout for your blog. Then click on Add A Page Element in the area of your sidebar. When the Add A Page Element screen comes up, select HTML/Javascript by clicking on Add To Blog. A new screen will pop up. In the Title box, I put “Works In Progress”. In the content box, add the following:

[ul]
[center][a]Japanese Garden[/a][br/]
[img alt="Image hosted by Photobucket.com" src="http://i81.photobucket.com/albums/j218/mearit/JG3a.jpg"/][br/]
[img alt="Image hosted by Photobucket.com" src="http://i81.photobucket.com/albums/j218/mearit/ProgressBar10.gif"/]
[br/]
[br/]
[center][a]Mime[/a][br/]
[img src="http://i81.photobucket.com/albums/j218/mearit/Mime-WhatItsSupposeToLookLike.jpg"/][br/]
[img alt="Image hosted by Photobucket.com" src="http://i81.photobucket.com/albums/j218/mearit/ProgressBar65.gif"/][/center][/center][/ul]

IMPORTANT: In the code above, replace ALL [ with < -and- ] with >.

In case the above is not self-explanatory, I’ll try to explain. On the 2nd and 9th lines, are the titles of my WIPs. Change them to yours accordingly. On lines 4 and 10, are the source codes given at Photobucket when you upload your WIP pics. Just copy and paste accordingly. Lines 6 and 12 are the source codes for the progress bars you uploaded to Photobucket. Again, copy and paste accordingly.

NOTE: Whenever I want to change the progress bar percentage, I just edit the HTML code. See where the numbers are on Lines 6 and 12? (10 and 65) I just change it to a number I know I have for a percentage bar. It keeps from having to go to Photobucket and doing the copy/paste routine.

Keep in mind that you have to be careful with the sizes of the WIP pics you want to put in your sidebar. If they’re too big, they’ll distort your blog and it won’t be pretty. It took me several tries before I got the right size. I keep my side bar pics about 2x2” (or less) at 72dpi.


STEP FOUR:
Click Save Changes. And you’re done!