How to make progress bars for your blog
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!
Trackbacks
- Progress Bars « my pretty pennies
- Create a Debt Scale or Progress Bar | California Dreaming
- Sidebars « Not So Petty Cash
- A quick hello… | Paying Myself
- While (Myriad != ComputerExpert) {Frustration} « Star Ten Thousand
- January goals check-in « 2000 Miles
- Patience… « Michael R. Wilson's Fiction
- The Mad Reviewer Reading Challenge | The Mad Reviewer
- I’ll Show You My Progress Bars if You Show Me Yours « Kimber Vale
That’s great! I have wanted to know that before. Good post.
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!
@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.
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.
lol I’m pretty sure that’s the code I grabbed from Caitlin.
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!
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!
So glad I could help out! (and by help out, I mean, tell you to just steal it. Ha)
Wow! Thanks so much! WordPress is so picky about editing the CSS without paying so I thought I’d never have one!
First time to your site, and this is exactly what I was looking for! Thanks.
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.
Thank you so much!
Ah yes! Thank you so much for this!
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
Great, glad to help out!
You just made my day! Thanks for this!
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.
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…
Thanks for this. Exactly what I was looking for.
Thank you! I’ve got a brand new blog and I’ve borrowed your code for it!
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.
Does anyone know how to enlarge the font on this tracking bar?
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!