Skip to content

How to make progress bars for your blog

March 17, 2009

I’ve had a couple people ask me this recently, and when I first started blogging, I wanted to know too!  How do you make progress bars?  There is a really detailed article (that I didn’t read) written by a knitter that turns up as the top hit on Google for a “blog progress bar” search.

The real secret is, you can just borrow them from any friendly blogger.  And by borrow, I mean copy directly.  You might want to ask first and see if they want credit for it, but chances are, they won’t care.  I’m not sure who I got my progress bar code from, though MapGirl credits Clutter2Cash for her’s, and it might have been through there.

How do you steal the code?  In Firefox, go to View -> View Source, or hit Ctrl-U and you can look at the source code for any page.  Then tweak and customize it.  Using WordPress.com?  Here, I’ll save you a step. I took my code for you (note:  not an expert coder).  Add a text widget, paste this in, then play with the colors.    Let me know if you have trouble with it!

There is also a way to make a little box show up with the amount saved when you hover over it (see Krystal‘s bars for example), but I guess I took that out last time I re-did mine.

<b><font color=”#3366FF”> NAME OF YOUR GOAL </font></b><br>
Goal:  $16k end of year<br>
Start:  $14k<br>
Current:  $15,028<br>
<div class=”goal” style=”width:195px;height:15px;background:#A9D0F5;border:solid 1px #555;”>
<div class=”progress” style=”height:15px;background:#3366FF;color:white;width:51%;”><b>51%</b>
</div>
</div>
<div style=”font-size:10px;float:left;”> START </div><div style=”font-size:10px;float:right;”> END </div>

There, now you can display your progress too!

Advertisements
35 Comments leave one →
  1. March 17, 2009 5:35 pm

    That’s great! I have wanted to know that before. Good post. 🙂

  2. March 17, 2009 8:13 pm

    So smart of you! I’ve had several people ask and I never thought to make it a post, lol. I’ll refer them here from now on!

  3. March 17, 2009 8:21 pm

    @ql – Yeah, that is kind of why i wrote it. Now I don’t either ignore those who ask out of laziness (uh, sorry), or have to let them each know the same thing.

  4. March 18, 2009 6:16 am

    Cool, I’ve been meaning to make them but haven’t. Someone else suggested lifting the code too! You can also use tickers but I think the progress bars are cleaner looking.

  5. March 19, 2009 4:45 pm

    lol I’m pretty sure that’s the code I grabbed from Caitlin. 🙂

  6. March 25, 2009 6:59 pm

    Hah, I feel pretty stupid now. Here I thought it was some special app or plug in and I could have ripped off the html myself! Thanks!

  7. supafrantastic permalink
    March 25, 2009 8:47 pm

    Thank you sooo much! I’ve tried to borrow others’ code before, but was never able to get it to stick to freaking WordPress before. I’m so excited to put progress bars on my blog now! Woohoo!

  8. March 25, 2009 8:54 pm

    So glad I could help out! (and by help out, I mean, tell you to just steal it. Ha)

  9. Kayla permalink
    August 12, 2009 10:26 pm

    Wow! Thanks so much! WordPress is so picky about editing the CSS without paying so I thought I’d never have one!

  10. October 13, 2009 8:18 am

    First time to your site, and this is exactly what I was looking for! Thanks.

  11. February 4, 2010 6:28 pm

    This is my first visit to your site. Thanks for sharing this information. I added my first status bar to my blog. Its not too pretty yet but I have linked and given you credit. Thanks again.

  12. April 1, 2010 8:35 am

    Thank you so much!

  13. March 24, 2011 7:31 am

    You’re awesome! Just Google’d the same thing and I saw your page as a result. I thought, “Hey! StackingPennies, I know her!” Thanks for the code, it works fabulously.

    Austin

  14. July 8, 2011 7:03 pm

    You just made my day! Thanks for this!

  15. September 14, 2011 4:01 am

    Hiya Van Sonka here, great article regarding How to make progress bars for your blog Stacking Pennies. There seem to be a problem with your web web site whenever viewed inside ie, several information didn’t load accurately… IE is still industry leader in addition to a big percentage of individuals will lose your own wonderful posting because of this drawback.

    • September 14, 2011 6:25 am

      I actually think this is a problem with the networthIQ widget I have. The networthiq.com site causing the page to hang. I noticed last night but was hoping it would quickly resolve itself (it has happened before). It isn’t just an IE problem. But it has not resolved itself… I’ll take that wid\get down for now…

  16. October 27, 2011 12:57 pm

    Thanks for this. Exactly what I was looking for.

  17. January 28, 2012 6:36 am

    Thank you! I’ve got a brand new blog and I’ve borrowed your code for it!

  18. February 8, 2012 10:49 am

    This is brilliant! Thank you so much! You made it so easy to modify the fields. I am not a programmer but I could see where I needed to adjust and customize it.

  19. February 24, 2012 1:15 pm

    Does anyone know how to enlarge the font on this tracking bar?

  20. December 17, 2012 8:12 pm

    Thank you! That was so helpful. I’d been searching all over the web to find a simple progress bar, but yours was definitely the best for someone like me who knows only basic HTML. Again, thanks so much!

  21. January 1, 2014 1:07 am

    Thank you for the code help. My Goodreads widget has gone doolally and this widget more than helps.

    Thank you again. 🙂

Trackbacks

  1. Progress Bars « my pretty pennies
  2. Create a Debt Scale or Progress Bar | California Dreaming
  3. Sidebars « Not So Petty Cash
  4. A quick hello… | Paying Myself
  5. While (Myriad != ComputerExpert) {Frustration} « Star Ten Thousand
  6. January goals check-in « 2000 Miles
  7. Patience… « Michael R. Wilson's Fiction
  8. The Mad Reviewer Reading Challenge | The Mad Reviewer
  9. I’ll Show You My Progress Bars if You Show Me Yours « Kimber Vale
  10. The Mad Reviewer Reading and Reviewing Challenge 2014 Sign Up | The Mad Reviewer
  11. Happy New Year | The Wandering Bookworm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: