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.
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. Click HERE for pre-created graphics. I'm sure there are other sites, and if anyone would want to share with me, that'd be great!
Upload the graphics to an image hosting program. I use Photobucket. It’s free, and easy to use.
Upload WIP and Progess Bars to your sidebar in blogger.
[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"/]
[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.
Click Save Changes. And you’re done!