Latest Posts -

Progress Bar Tutorial

I use this little widget for tracking progress in readathons, reading challenges and book releases! Its cute, small and HIGHLY customizable! It's also super easy to install!

All you need to do is put a little bit of code in the spot (sidebar widget, post body etc) where you want to bar to show up! If you are adding it directly inside a blogpost be sure to change to HTML first!

Let's dissect the code:

<div style="background: #ffffff; border: 10px solid #ececec; height: 15px; width: 284px;">
<div style="background: #ff6600; font-size: 8px; height: 15px; line-height: 8px; width: 31%;">

The first "div" sequence refers to the border of the bar. I have mine very thick (10 px) and a cream color (#ececec). The "background: #ffffff" (white) refers to the inside background of the box. I have width set to 284px because that is a nice size for my sidebar.

The second "div" sequence refers to the inside meter bar. I have mine set to orange (#ff6600)! The end of this sequence says "width:31%" , this refers to your actual progress, ie 5 out of 10 books = 50% done.

The code:

I hope this helps! :D Let me know if you have any questions!

With love,

Twitter  |  Goodreads  |  Facebook  |  Google+  |  Pinterest 

Posted on Monday, January 7, 2013

Share this Post :

Post a Comment

Copyright © 2011. A Love For Lit - All Rights Reserved