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.

[center] [a href="http://smallreview.blogspot.com/2010/12/ya-historical-fiction-challenge.html"][img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoHkpAEWn77unJwUZ3hpuncUAhoLwVVpwFpfNfu8Ryh5InQCDBF7RIuZd4Lq3JIryqpoYo_kMfcKeMEasV4LmmsLJGuYaYUnzk8q7etD-NvRF0pfrA4YR4fJ0c6B4qwr3jU0wCyba3h0/s1600/Historical+Fiction+challenge.png" title="YA Historical Fiction Challenge" width="190" /][/a]

[div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]

[/div]

0/5 books[/center]

I have code here that will make the picture and bar centered on the post. If you do not want it centered, just remove the [center] and [/center] at the beginning and end of the code.

Step 2:

Now you need to plug in your information. The following is the same code as above, but I've color-coded the different parts you'll need to change.
 
[center] [a href="http://smallreview.blogspot.com/2010/12/ya-historical-fiction-challenge.html"][img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoHkpAEWn77unJwUZ3hpuncUAhoLwVVpwFpfNfu8Ryh5InQCDBF7RIuZd4Lq3JIryqpoYo_kMfcKeMEasV4LmmsLJGuYaYUnzk8q7etD-NvRF0pfrA4YR4fJ0c6B4qwr3jU0wCyba3h0/s1600/Historical+Fiction+challenge.png" title="YA Historical Fiction Challenge" width="190" /][/a]
[div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]
[/div]
0/5 books[/center]

The purple part is a link. Here you will copy the url for the page you want the button to link to. I used the url for my YA Historical Fiction Challenge post. 

The green part is the image. Right click on the image wherever you see it (it can be on the host's challenge page) and click on "Copy Image Location." Then paste that into the green section. 

The pink part is the title. Type in the name of the challenge.  

The red part is the percentage. Here you will type in whatever percentage of the challenge you have finished. You'll have to do a little math for this one.

The blue part is the number of books you have read and plan on reading. The first number is how many books you have read. The second number is how many you plan on reading.


If you only want the progress bar and you do not want the linked picture, then use this part of the code only:

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]

[/div]

0/5 books[/center]

And there you have it! 

If anyone has any other questions you can either ask them in the comments or email me. Please don't feel shy at all! 

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know. I'll edit this post with any other answers. 

Learn How to Customize Your Progress Bar 

Tweet