Adding Progress Bars to Blogger

For those of you wanting to add progress bars to your blogger page here is how to do it.

Go to your Blogger account.

Click on Layout -> Edit HTML.

Scroll down the HTML code of your template until you see something like…

/* Comments Format
--------------------------------------------------*/

Paste the following script just above this line.

/* ~~~~~~~~~~~~Progress Bars~~~~~~~~~~~~~~~~~~~
----------------------------------------------- */
.prog-border {
  height: 16px;
  width: 214px;
  background: #fff;
  border: 1px solid silver;
  margin: 0
  padding: 0;
}

.prog-bar {
  height: 6px;
  margin: 2px;
  padding: 0;
  background: #33775f;
}

.prog-bar_blu {
  height: 14px;
  margin: 1px;
  padding: 1;
  background: #A4AEC4;
}

.prog-bar_grn {
  height: 14px;
  margin: 1px;
  padding: 1;
  background: #A5D63E
}

.prog-bar_ora {
  height: 14px;
  margin: 1px;
  padding: 0;
  background: #FCBD42
}

.prog-text {
   height: 10px;
   margin: 0px;
   padding: 0;
   white-space: nowrap;
   text-align: left;
   text-indent: 4px;
   font-size: 10px;
   font: 75% Arial,Helvetica,Verdana,Sans-serif;
   color: #000000;
}

 

Save the template.

Click on Page Elements.

Add a Gadget.

Select HTML/JavaScript.

Open the gadget and paste the following code in the content box.

<pre><code>
<div align="center">Sci-Fi Action</div>
<div class="prog-border">
  <div style="width:90%;" class="prog-bar_grn">
    <div class="prog-text">Editing</div>
  </div>
</div>

<p> <p>

<div align="center">Comedy</div>
<div class="prog-border">
  <div style="width:10%;" class="prog-bar_ora">
    <div class="prog-text">Breaking Story</div>
  </div>
</div></p></p>
</code></pre>

 

This will give you two progress bars. Obviously you can remove or add however many you want by duplicated the script.

To change the progress increase the “width:80%;” to whatever you need. Only go up to 99% as any more makes the progress bar look odd at the end.

To change colors just change the class=”prog-bar_grn” to one of the following…

class=“prog-bar” for standard.
class=“prog-bar_blu ” for blue.
class=“prog-bar_grn” for green.
class=“prog-bar_ora” for orange.

If you feel adventurous you can go back to editing the HTML and add new progress bars. Find the script progress bar script you added and put in a new progress bar with a new name;

.prog-bar_grat {
  height: 14px;
  margin: 1px;
  padding: 0;
  background: #F8FAF8;

 

That is all.

-Jim