How to SIMPLY add a WIP Progress Bar with Image to Blogger

After spending a lot of time trying to find a simple progress bar with an image HTML/JavaScript code, I gave up and just tried to do something simple...add a progress bar to an image.  And, it worked!

So you do just that...go to DESIGN, then LAYOUT.  On your sidebar, click on ADD A GADGET, then select PICTURE.  You will see this:

Enter the TITLE of your WIP.  Then, select your project's IMAGE from your computer, or from the web.  If you want to insert a LINK for your image (where your viewer will be taken, if they click on the image), add it as well, though it isn't required.  I saved the most difficult (NOT!) part for last!

Your progress bar code will be inserted in the CAPTION box.   Just copy and paste the code below.  The first number in red is the color of the bar fill.  Go HERE to find the code to change the color.  The second number you will want to change is 60.  That is the percentage of your progress.  Just go back and edit this number, as you make progress.  It's just that simple!

<style type="text/css"> div.smallish-progress-wrapper { position: relative; border: 1px solid black; } div.smallish-progress-bar { position: absolute; top: 0; left: 0; height: 100%; } div.smallish-progress-text { text-align: center; position: relative; } </style>  <script type="text/javascript"> function drawProgressBar(color, width, percent) { var pixels = width * (percent / 100); document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">'); document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>'); document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>'); document.write('</div>'); } </script>

<p> </p>

<center>

<script type="text/javascript">drawProgressBar('#669966', 176, 60);</script>

<p></p></center>