How did I get that progress bar widget on my blog?

I have gotten a few requests for the progress bar widget (or lack thereof) on the top right of my page. I initially did some research finding the best way to add a progress bar to my site, but had some issues. I have about a .001% knowledge of how CSS and PHP and stylesheet yada yada work. I know enough to make my website work, but all the sites I found said it was easy, but I was flailing trying to find a good way to make it work. Apparently a few folks have, so if you’re good at CSS and PHP look @ ajaxian,, schjerning, widgetsblog, dojo, effbot, uwinni, toolbookdeveloper, livepipe, riverusers, or blogherald.

Conveniently, I AM good at Adobe Photoshop. So if anyone out there just HAS Adobe Photoshop, they can open this file and modify it to fit your own progress. It’s pretty slick and I dug the colors from the Apple progress bar window –

So when you open the .PSD file in Adobe Photoshop, be sure you go to the top of the options menu and click “Window” and then “layers” (also be sure “tools” is selected). This will show you the 6 layers this image covers. It should look like or similar to this:


From there it is fairly self explanatory. Click on the toolbar for text, it should look like this:t.jpg .

and then click on the “layer” that you want to change from here: (in this case “Long Blue Bar”which will pull out further as you progress on your progress bar).

and to change the values, just change the highlighted choice in “layers” to what you need to modify, switch to the text tool, and double click on the image where you need to change – like this:

That’s about as simple as I can lay it out – if you need help, I’m happy to help you out, just leave a message to this thread or send me an email at [hank]aht myinvestingblog dottt com.

If you DO decide to use this, all I ask for is a link back to this page stating it’s working properly!  Thanks for your support!

Filed Under: Uncategorized

  • That’s a cool widget but some energetic young programmer should figure out a programmatical way to make the widget so that as your Net Worth increases it’s updated dynamicly.


  • hank

    no kidding – I can barely spell “programming”, so photoshop it is for me now. 😉 If anyone knows of one, I’m happy to be a test subject! 🙂

  • Thanks for the photo. I could not get any blog widgets to work on my site but I was able to change your file. It is set up as a link back to this if anyone decides to click it.

  • newbie

    thank you! this is exactly what I've been looking for 😀