How To Put a Progress Bar of Your Reading Challenge on Your Blog

Originally posted by The Book Vixen (I just love this blog)

If you have blogspot, this should work just fine, but if you have any other blog I have no idea. Sorry, I'm not that smart when it comes to blog stuff LoL

So, lets start this already. Go to design>page element>add gadget>HTML/JavaScript  and past the code below changing the blue words for what they mean.

Ex.: NAME OF THE READING CHALLENGE = Ghostly Reading Challenge 2012

Get it? Is easy, breezy, right?

Here is the code:

If you want to put an image in it:

<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/24 books

If you DON'T want to put 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/24 books

To update your progress just change the nº of books.

Ex.: 0/24 (0 = how many have you read) (24 = your goal)

This is the really fast version of it, but if you want to know more about the progress bar, you can check it out The Book Vixen.

She is awesome and the blog is super duper cute.

XoXo