Subscribe to my RSS Parajunkee on Twitter Like on Facebook! Goodreads YouTube Tumblr
Paypal
Google Email Me! google Amazon profile
Paranormal Romance, Urban Fantasy, books, movie, giveaways and more! This blog has moved. View latest greatest info at parajunkee.com

1.06.2011

Book Blogging 101 - Setting Up Progress Bars

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.

The Book Vixen
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:


<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.


Ask your BB101 Questions here...

35 comments:

Chapter Chicks said...

This is amazing. I have always wanted to know how to put these together.

Thank you so much for taking the time to write this all out for us not so html savvy folks. I'm sure it took you AGES and we really appreciate it. Yay to the Book Vixen!

ParaJunkee said...

Thanks for doing this Book Vixen! I didn't even know how to do it - now I'm going to have progress bars all over the place... really. Check out my review from yesterday!!

Akoss said...

I will never thank you enough for all these coding lessons, free lessons by the way. I hope my blog will turn out great by the end of this year.

Anonymous said...

Another thing to add to the HTML cheat sheet I have. A few times I've been able to guess how to do something but this is new to me. Thanks!


Stephanie G
Paranormal Haven

Stephanie Lorée said...

Thank you. I have been trying to find a good guide on this, and your post is by far the most comprehensive and helpful.

Jennifer Lane said...

Thank you for this detailed information, Book Vixen!

Anonymous said...

I'm glad it's helpful!

Missie, The Unread Reader said...

Awesome tutorial. Very helpful.

If anyone wants to practice this, my blog is available. I signed up for a lot of challenges and now need progress bars. :P

Kathie @ my kozy korner said...

So cool! thanks for posting this.

Tea and Tomes said...

Very helpful. I found a lot of info on progress bars when I Googled the info, but most of them just gave a basic "copy-and-paste this code and update it when needed" without mentioning for the newbies (such as myself...) exactly how to do that updating. Thanks for the tips!

Kathie @ my kozy korner said...

hmmm, for some reason the bar isn't showing up correctly on mine. The progress bar shows up in color, but the rest doesn't. I wonder if it's because my post & sidebar backgrounds are white.

Anonymous said...

Thank you Book Vixen....I was wondering how to do these!!!...:D

Anonymous said...

Kathie - The progress bar background is white so if your blog has a white background, you should see just a black border only until you fill in the width. Are you seeing the black border around the progress bar? You can also change the background color in your progress from white to something else other than white. Find the color you want using the RBG Color Wheel site and plug in the code in the part that I have bolded:

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

(Note: I had to remove some of the "div" coding tags b/c blogger wouldn't allow them in the comment)


The 255, 255, 255 code is the RGB code for WHITE.


Hope this helps.

Melissa (Books and Things) said...

I think I will do this if I ever get organized enough to enter a challenge. I will keep me on track. Great post!

Liz Tea said...

Thank you Book Vixen - this is awesome! I'm adding these to my challenges right now. ;D

Logan E. Turner said...

I love progress bars! Thank you Book Vixen for sharing this tutorial with us!

LJ said...

This was SO helpful! Thanks!!!!

Chrystal said...

Great post! I have used some progress bars myself, but always got confused editing them. I will have to bookmark this post to keep for future reference. :)

Beverly said...

Thanks!

Aleetha said...

YAY, finally I found how to make progress bar
Thanks for sharing

S (Book Purring) said...

Thank you very much for this tutorial, I just did mine :D

Jennifer said...

I have been struggling all week to fix my progress bars, thank you so much for doing this!

I do have a problem with the progress bar outline getting cut off on the outside right. Is there a way that I can shrink it so I can see the whole box?

Jennifer (An Abundance of Books)

Anonymous said...

Jennifer - I'm not sure I understand what it is that your asking. I checked out your blog (cute layout BTW!) and the progress bars on your Challenges pages look like they're showing up correctly. Feel free to email me (email addy in my Blogger profile) with more details.

Felicia the Geeky Blogger said...

This was super helpful thanks tons!

Nicole Sheldon said...

I'm so excited about this tutorial. As soon as I'm not wanting to collapse from my lovely strep throat infection, I'm going to have at it. I'd been drooling all over the progress bars on Rabid Reads blogs and was going crazy trying to figure it out. Thanks so much for another awesome post!

Unknown said...

Thanks for the tip. I'll be back to try this out for my blog. :-)

AlleluiaLu said...

Thank you so much. I hope you enjoy my post about it: http://bookendcrossing.blogspot.com/2011/01/ive-learned-to-make-progress-bars.html

Have a great day!

Anonymous said...

LOVED THIS! Thank you!!

Nicole Sheldon said...

Woot! Thanks again Junkee, I wanted mine for book progress and it was very easy to alter it. Great tutorial. I think I'll be doing them for my challenges now too. *blush*

Jennifer | Mrs Q Book Addict said...

Thank you, Thank you!! I made my progress bars this evening. My only issue was the "1/20" text was not working, I added 1/20 and it works fine now.

Natalie (Id So Rather Be Reading) said...

I love Blogging 101! Great post Brianna, you are the progress bars queen of the day! Thanks Parajunkee for hosting these great tutorials!

nymfaux said...

I think I LOVE you

ColleenFL said...

Great post! That was very helpful.

Susan (Reading World) said...

Thanks so much for this. You made it easy!

Angela's Anxious Life said...

I asked this question in a different post and this answers my question! I will give this a try. Thanks so much for posting!

Angie

Post a Comment

Let me have it...