** Update ** Facebook was being a little snarky, but we had Words, and things seem to be ok now. The step-by-step widget guide should now be available under the “Free Stuff” tab. Sorry about that you guys!
Hi everyone! I’m posting later than usual today because, well, because I’m having way too much fun updating my little corner of the internet! (Yes, this is what being a WordPress nerd looks like).
Before you read the rest of today’s post, go check out my new and improved Words on a Bookshelf page, ok? Take your time, I’ll wait.
Welcome back! You might have noticed that I’ve replaced the standard Goodreads Reading Challenge widget with one of my own. You know how, when you buy a new couch, you suddenly look around your living room and realize that you need new chairs too? And pillows? And wall colours?!? Well, my friends, that’s what’s happening with me and this blog. There’s nothing wrong with the Goodreads widget, it’s just that, now that I have my new couch, erm, new blog theme, I realized I need new pillows, erm, a new Reading Challenge widget, too.
Today, I’m going to show you how to create your very own personalized tracker widget for your blog or website. (Special thanks to Emily’s Reading Room for helping me to get started!)
Here’s a reminder of what mine looks like:
4 / 12 books. 33% done!
I’m using mine to track my progress in my “12 in ’12″ Reading Challenge, but you can customize your widget to keep track of whatever you’d like: movies you’ve watched, recipes you’ve tried, holiday shopping you’ve completed … the possibilities are endless!
What I’m going to do is give you a template of the HTML code that I used, and the web-savvy among you can use that to create your own widgets.
If you’d like a step by step breakdown of exactly how and where it needs to be customized, no problem, I’ve got that too! Just hop on over to the Words Become Superfluous Facebook page and click on the “Free Stuff” tab.
If you haven’t done so already, you’ll have to “Like” Words Become Superfluous before you can access the fan-only content. But don’t worry, you’ll only need to do that once. Once you’ve Liked the page, you’ll have access to all of the exclusive, fan-only content that I post in the future!
Now that that’s all settled, are you ready to get widget-y with it? (Yup. I went there). Here we go!
<center><a href=”http:// URL of the page housing your challenge or goal details. Make sure you include the .com at the end! “><img src=”http:// URL of the image file you are using (this does not include the progress bar). Make sure you include the image file extension, such as .jpg at the end! ” /></a></center><br />
<div style=”width: 190px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);”><div style=”width: 33%; height: 15px; background: none repeat scroll 0% 0% rgb(three digit rgb code of the colour you want in your progress bar); font-size: 8px; line-height: 8px; font-color: rbg(3, 101, 100);”>
</div></div>number of items completed / total number of items name of thing you’re tracking. percentage you’ve done!<br />
Good luck! I can’t wait to see how yours turn out – let me know how things go in the Comments! And please provide links if you come up with any creations of your own I’d love to show them off here later on! You deserve some shoutouts for your widgit-y-ness!