How to: Add WIP trackers to your blog
There are different percentage tracking bars out there but IMHO this one is by far the easiest one to set up and use. It was designed by Matthew Harvey at unlikelywords.com/html-morsels. Although the code was taken down from the site a few months ago, I'm sure it will be ok if I share it with you.
Please remember to link back to Matthew's page. REMEMBER: Before making any changes to your blog template you should make a copy of it and save it in Notepad. This will serve as a back up in the event of an emergency.
1) Open your blogger template.
2) Scroll down to these tags </style> </head> <body> in your template.
3) Next, select and copy the Javascript below from the tag < script> to < /script>.
<script language="javascript">
// drawPercentBar()
// Written by Matthew Harvey (matt AT unlikelywords DOT com)
// (http://www.unlikelywords.com/html-morsels/)
// Distributed under the Creative Commons
// "Attribution-NonCommercial-ShareAlike 2.0" License
// (http://creativecommons.org/licenses/by-nc-sa/2.0/)
function drawPercentBar(width, percent, color, background)
{
var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid black; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>");
}
</script>
4) Paste it between the <style> tag and the </head> tag on your template. You'll find these tags about 1/3 of the way down your template.
5) Next, scroll down to the sidebar, where you want the tracker bars to be seen.
6) Copy the following code/tags:
<h2 class="sidebar-title">WIP</h2>
<ul>
<p>INSERT-PROJECT-NAME-HERE</p>
<script language="javascript">drawPercentBar(100, 50, 'yellow', 'white'); </script>
<p>INSERT-PROJECT-NAME-HERE</p>
<script language="javascript">drawPercentBar(100, 50, 'yellow', 'white'); </script>
</ul>
and paste into your sidebar where you want the percentage bar to be displayed.
7) If you want to add more percentage bars, simply copy the code from <p> to </script> and paste it where you want additional bars to appear.
8) Now to format the code for the code - you can change any of these variables:
The number '100' above represents the width of the bar;
The number '50' represents the percentage completed;
The colour 'YELLOW' is the colour displayed, representing percentage completed;
The colour 'WHITE' is the background colour in the bar.
When you want to change the percentage of the project completed, simply open your template, and change the number e.g. if your project is 75% completed then change the number 50 (50%) to 75. You can also change the width of the bar and the colours to match your blog.
8) Save and republish your blog.
Let me know if you have any problems.
Good luck! Bernie
No comments:
Post a Comment