Making a Progress Bar
Did you join a reading challenge this year? One great way to visually keep track of how you are doing on your challenge is to create a progress bar. You can see mine on the left-hand sidebar.
- Create an HTML Gadget: If you are using Blogger, it's as simple as going to Design-Add a Gadget-HTML.
- Insert the following code:
<center><a href="http://theladybugreads.blogspot.com/2010/12/2011-e-book-reading-challenge.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtev8AlweogQ7lgtokPH6JrPoFoJmJdkHItpI_vJNwtx-kaix7SooeOkQrOtgkYlEIB-VhF09SsdXt3fMuX2tt0YLhqxGwjkHRXNI93DaJT0uYnchBD-wM1GVRbWQ18QuntecwRLx_uM/s1600/EBookReadingChallenge-small.jpg" /></a></center><br />
<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: 8%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;">
</div></div>1 / 12 books. 8% done!<br />
<br />
Now, here's how the code breaks down:
<center><a href="http://theladybugreads.blogspot.com/2010/12/2011-e-book-reading-challenge.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtev8AlweogQ7lgtokPH6JrPoFoJmJdkHItpI_vJNwtx-kaix7SooeOkQrOtgkYlEIB-VhF09SsdXt3fMuX2tt0YLhqxGwjkHRXNI93DaJT0uYnchBD-wM1GVRbWQ18QuntecwRLx_uM/s1600/EBookReadingChallenge-small.jpg" /></a></center><br />
<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: 8%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;">
</div></div>1 / 12 books. 8% done!<br />
<br />
<div style="width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(254, 243, 210); border: 1px solid rgb(0, 0, 0);"><div style="width: 8%; height: 15px; background: none repeat scroll 0% 0% rgb(106, 71, 42); font-size: 8px; line-height: 8px;">
</div></div>1 / 12 books. 8% done!<br />
<br />
Link to the challenge sign-up or information page
Link to the challenge button image
Changes the colored portion of the progress bar
Text below the progress bar
Once you are done, it should look like this:
1 / 12 books. 8% done!
If you want to add more progress bars for different challenges, then just continue copying, pasting, and editing the code.
And if you want to get really fancy, you can combine with the instructions on making a scrolling button bar, and make a scrolling progress bar!
