This post had been previously published in 2011, but because of the Worpdress change-over it had issues in formatting and I had moved it to a draft. Since I needed this tutorial myself, I figured you guys might like to check it out also. News section & questions of the week are new. So, please welcome back…The Book Vixen:
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

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.

Parajunkee, Urban Fantasy, Blogger Tips

Question of the Week

If I were to do an excerpt or an interview with one of the characters, would I need permission? – Sasha

Hey Sasha, for excerpts longer then a paragraph, yes you do have to ask permission before posting. This falls under the “fair use” rules and regulations and anything more then just a critique of the work is considered copyright infringement. Authors wouldn’t like it if you had unauthorized chapters on your blog and excerpts can be anything from a few paragraphs to whole chapters. It all depends on length. As far as character interviews, if you are using your own “creative” process to answer as the character would answer, you are in the clear. This would fall within the guidelines of fan-fiction.
Parajunkee, Urban Fantasy, Blogger Tips

Book Blogger News

Hillary Duff be damned!
Hillary Duff is not the only Disney TV Series Star to land a fiction book deal. Why write an auto-biography when you can make the big bucks with a Paranormal Romance!! Bella Thorne, the 15 year old, that is the star of Disney’s Shake it Up has made a deal with Delacorte to publish a YA Paranormal series, title AUTUMN FALLS. About a girl that unexpected falls into MAGIC and comes up with a sparkly vampire. Sorry, that last part was me emoting on the story.  {source}

Let’s Share
Avon Romance launched a “Share Your Book” section of their website, where would-be published authors can share excerpts of their books and get critiques and “love” from readers and even Avon editors. This sounds promising especially if your dream is to be published through Avon. And now Avon just has to look around and see who gets the most hits and then scoop them up like a BOSS!
Write for Prada
I’ve always wanted to write for Prada? Um okay. The “internationally well-known” fashion megalith has decided to set it’s sights on writers. Their goal it would seem, is to sponsor a writing contest to promote “careful development of the artistic ‘languages…'” They are asking for submissions of short stories 10 to 20 pages. They even have specifications of what font to use when submitting your story. I don’t know about you, but they kind of freak me out. But, I guess it would be a good way to get your awesomeness out there.

Happy Thursday. Talk Less. Read More. Blog with Integrity.

Have a question? Fill out the form by clicking here. This will go into a spreadsheet to be looked over at a later date and hopefully answered on this blog. This is completely anonymous, you do not have to leave your real name. Urls will not be included in your question unless it pertains to the question.