A lot of readers come to author websites — especially to those authors writing a series they like — to get a snap shot of writing progress.
Seriously, I think those trying to get a status update probably make up 90% of George R. R. Martin’s site traffic.
ThirdScribe author sites have a progress meter widget built in, and many use it. However, not everyone is on ThirdScribe and, sometimes even those who are may want to make something a little more special out of the writing progress meter.
This post teaches you how to make a nice one that you can place anywhere in your site.
Ready? Let’s get started.
First: Use the Text Editor
This tutorial requires you to enter some HTML and CSS code. Not a lot, and we have snippets, but to do so you’ll need to enter it into the text editor of wherever you want to put the progress meter. If you are in a WordPress page or post, that means you need to toggle the “Text” editor option, like so:
Second: Copy Past this Code
This code snippet will place the actual progress meter. Just copy/paste it directly from here to wherever you want it to show. To adjust the meter, you change the percentage value (set here at width: 25%). This particular snippet shows the progress for two books. Only want one? Delete the extra. Want more? Then copy a few more. Totally up to you.
Third: Style the Meter
The code snippet above to place the meter will just load a placeholder for a meter, so it won’t look like much. It won’t even look like a meter. As a matter of fact, it will just look like this:
Not that impressive, huh?
Well, we want impressive, so we’re going to add a bunch of styling via CSS to make it look awesome. That CSS is included in this code snippet:
This code will style the meter and provides for three colors — the default color (green), orange, and red. Again, if you want to change those colors, or add colors, just alter that section of code. Remember to change both the name of the color (orange) and the HTML color code for the color (#f1a165).
Where do you paste this CSS styling? That depends. If you have access to your site theme’s style sheet, that is a great place to put it. If not, a plugin like Simple Custom CSS is a great option. You can also insert it directly inline to that page or post if you know exactly where you want to put it.
Fourth: Step Back in Awe!
Once the CSS has been added to your site, this is what the meters will look like:
Book Title (Default Color 25%)
Second Book Title (Orange 50%)
Second Book Title (Red 75%)
You can now place this code anywhere you want a progress meter to show — page, post, or widget.
Armed with this, don’t be like George R. R. Martin — let your readers know how your progress is going.