Today for BB101 I would like to welcome The Book Vixen...she has kindly offered to teach everyone how to do the progress bars. Give a warm welcome to one of my favorite fellow book bloggers...and if you don't follower her already, her blog is quite a treat, you should go over and check it out.
Spawned from the Big Sis, Little Blog program, Book Blogging 101 was born. Do you have a question? Leave it in the google docs form and I'll try and answer them in the order they are received.
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
Paste 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
This is how it will look:
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:
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.
Ask your BB101 Questions here...
