Friday, December 31, 2010

How to Make a Progress Bar

How the heck do you make a progress bar?!

(And what in the world is a progress bar??)

I've received a number of questions on how to make a progress bar, so I thought I'd put together this post for anyone who is wondering and would like to add one to their own challenges. In order for everything to be visible here, I've replaced all of these things:

< >

with these brackets:

[ ]

So when you are using the code, make sure you replace all of the brackets with the little triangle thingies (as you can see from my sophisticated jargon, I am well versed in all things...thingy).

What You Will Learn

I'll show you how to make a progress bar and also how to add a picture with a link. Basically, this is what you'll be able to make when you're finished:

0/10 books

The picture is a link and leads to my post for the YA Historical Fiction Challenge. If you click on the picture, it brings you to that post. This isn't particularly helpful if you're already on the post, but if you put your challenge button in your sidebar or on a Challenges Page (like I have located on the top link bar) then it can be useful.

The second part you see is the progress bar. As you read books for you challenge, you can adjust this bar so it reflects how many books you've read so far. This bar represents the percentage of books you have finished, not the total amount.

The numbers below the bar (0/10) shows how many books you have read (that would be the 0) and how many books you plan on reading (that is the 10). So, if you have read 5 books, then the progress bar would be filled 50% and the numbers underneath the bar would read 5/10. It would look like this:

5/10 books

Let's Do This!

Step 1:

This is the code you will need. Just copy it and paste it into you post (remember to use the tab "Edit HTML"). Remember to change the brackets to those triangle things.

33 comments:

i love you for posting this! very very useful and helpful indeed. i already made my own but i'll gladly bookmark this page and save the codes for future use! thank you very much for sharing the thingies (i'm well-versed too you know lol) c",)

And thank you also for dropping by my blog. It's comforting to know I'm not the only one who's not too pleased with Pride and Prejudiced and Zombies. At least I know I'm not just too uptight about an Austen novel being messed around like that.

Sorry I had to delete above post because typing on my iPad makes too many typos. What I was trying to say is this post is fantastic. You have a real gift for making a complicated process easy to follow and understand. You rock!!! I'd love to see more posts like this in the future.