How to Create Reading Challenge Progress Bars

One of the questions I get asked a lot is How did you get the progress bars for your reading challenges? Well, I’m here today to show you how to do just that. I’m going to walk you through the process, step-by-step. You do not have to be a HTML expert (I, for one, am not) but you’ll need to be able to decipher some of the code, which I am going to help you do in this tutorial.

Decide - Image or no Image?

There are two ways you can do this: (1) you can include an image (usually the reading challenge button) or (2) you can just use the name of the reading challenge instead of using an image. Why would you choose one way over another? Well, if you’re only participating in just a few reading challenges, then I would include an image. I’m a visual person myself so I like to see pictures. However, if you are like me and have gone a little crazy with reading challenges and have signed up for *cough*13*cough* of them, then you won’t want to bog down your sidebar with lots of images. In that case, I would recommend you either create a page for your reading challenges (if you want to use the images) or list them in your sidebar without the images.

Start with One of These Codes

Copy this code if you want to use an image:

<a href="URL TO READING CHALLENGE POST"><img title="NAME OF READING CHALLENGE" src="IMAGE URL" width="190" /></a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Copy this code if you do NOT want to use an image:

<a href="URL TO READING CHALLENGE POST">NAME OF READING CHALLENGE</a> 
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Pasted the code somewhere where you can work with it - in Word, Notepad or in a Blogger Widget. Anywhere. You’ll be making some changes to the code before you’ll be able to use it.

Customizing the Code

Before I break down the code, let me explain a few things. Some reading challenge hosts will include a button that you can grab – meaning they have provided the code for the image and link (to the sign up page on their blog) for you to copy and paste into your own blog post. I always use this for my reading challenge post but I do not use it for my sidebars. Why? Well, because in my sidebar, I want to link to MY post, not the sign up post.

Let’s break down the code for the image and link part first. (We’ll focus on the code for the actual progress bar a little later in this post):

<a href="URL TO READING CHALLENGE POST"><img title="NAME OF READING CHALLENGE" src="IMAGE URL" width="190" /></a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

• “URL TO READING CHALLENGE POST” – this is going to be the link to your reading challenge post – the post where you are going to list the books you’ve read for the reading challenge. Don’t forget the http:// and don’t forget the quotation marks at the beginning and end of the link. My URL looks like this: “http://www.thebookvixen.com/2010/11/reading-challenge-men-in-uniform.html”
• “NAME OF READING CHALLENGE” – this is simply going to be the name of the reading challenge. Don’t forget the quotation marks. Mine look like this: “2011 Men in Uniform Reading Challenge”
• “IMAGE URL” – this is the link to the image. If the reading challenge host didn’t provide the link to the reading challenge button in their sign up post, you will have to upload the picture somewhere like Photobucket, Picasa, Flickr or some other photo uploading site. Once you upload the image, grab the code. Don’t forget the http:// and don’t forget the quotation marks at the beginning and end of the link. I uploaded my image to Picasa and my IMAGE URL looks like this: “http://lh3.ggpht.com/_TayA8XRqTEM/TPZdRMW0pJI/AAAAAAAACSc/5xOpsH1YgTs/s800/MenInUniform.jpg”

Here is what the code for my reading challenge looks like in its complete form:

<a href="http://www.thebookvixen.com/2010/11/reading-challenge-men-in-uniform.html"><img title="2011 Men in Uniform Reading Challenge" src="http://lh3.ggpht.com/_TayA8XRqTEM/TPZdRMW0pJI/AAAAAAAACSc/5xOpsH1YgTs/s800/MenInUniform.jpg" width=”190”/></a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Changing the Color of the Progress Bar

You can’t tell right now because your progress bar is set to zero but once you update it you will see the coloring. Mine is set to green and since you copied the code in this tutorial, yours will be green too. So let me explain how to change that.

You will need to use RGB color codes to create the color you want. You can use this RGB Color Wheel to find a color you like and get the RGB color codes you need. When using this site, you will need the numbers for R, G and B. Ignore everything else (ignore the H, S, V and the # numbers).

If you know the HTML color code for the color you wish to use, you can convert that to the RGB color code using this easy converter site.

Once you decide what color you want the “progress” part of your bar to be, change the color code you see here:

<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

137, 197, 96 is the RGB color code for the green that I use. Enter the RGB color code for the color you want in that spot. Note: there is a SPACE between the COMMA and the next number.

For example, if I want it to be red, I would use color code 255, 0, 0 and it will look like this:

2/12 books

If I want it to be blue, I would use color code 0, 0, 255 and it will look like this:

2/12 books

How to Update your Progress Bar

Once you start reading some books for your reading challenge, you’re going to want to update your progress bar. There are two things you need to change in order to update your progress bar: (1) the width of the progress bar that shows how much of the reading challenge you have completed and (2) the number of books you’ve read so far. Here is how the code will look before you make your changes:

<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books

Let’s say for example that you’ve read 2 out of 12 books for the reading challenge. For the width, change the 0% to 17% (2 divided by 12 is 17 – rounded up). If you look at the code closely, you’ll notice that there are TWO width’s. Be sure you change the width that has the percentage sign, not the one that has “px” after the number. Then change the number of books from 0/12 to 2/12. Here is how the code should look after you have made your changes:

<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 17%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
2/12 books

How to Center Your Progress Bar

If you’re sidebars are already centered, then you don’t need to read this section.

Centering is a little tricky. If you try to just stick the center tags at the beginning and at the end of the code, it will also center the coloring in your progress bar and it will look like this:

2/12 books

You don’t want the coloring in the progress bar centered. So in addition to the center tags, you will need to add text-align: left; as show here:

<center><a href="http://www.thebookvixen.com/2010/11/reading-challenge-ya-of-80s-and-90s.html"><img title="2011 Men in Uniform Reading Challenge" src="http://lh3.ggpht.com/_TayA8XRqTEM/TPZdRMW0pJI/AAAAAAAACSc/5xOpsH1YgTs/s800/MenInUniform.jpg" ></a>
<div style=" text-align: left; width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books</center>

2/12 books

So there you have it. That’s how to get a progress bar for your reading challenge. I hope it wasn’t too confusing. If you have any questions please leave them in the comments.

*This tutorial was originally posted on Parajunkee’s View as a guest post for her Book Blogging101 feature.