Tags

, , ,

Share it

Some authors want to add progress bars to their blog. However, most authors are not web designers or developers. So they don’t know how to do this. Well, there is a secret in the html development world. The secret is that “Everything is easy once you know how to do it.” Yes, it is actually pretty easy to add a progress bar. I just added a progress bar to my blog.

Creating a Progress Bar on your Blog

Step 1. Create an HTML Widget for your side bar.

To complete this step, you need to understand two terms:

  • Sidebar: On a web page you have the wide main part of the page and a thin part of the page on either side of the main part that usually has a menu, links, buttons, ads, etcc. That thin part is the sidebar.
  • Widget or Gadget: A blog tool that allows you to create a menu, link, button, etc on you web page. Widget is the term WordPress uses. Gadget is the term Blogger uses.

To add your Widget in WordPress:

  1. Login to WordPress.
  2. Go to your WordPress Dashboard.
  3. From the left menu, click Appearance | Widgets
  4. Find the “Text” widget.
  5. Drag it to a sidebar.

To add your Gadget in Blogger:

  1. Log in to Blogger.
  2. Click the dropdown menu for you blog and choose Layout.
  3. Click Add Gadget (probably on the sidebar.
  4. Find the “HTML/Javascript” widget.
  5. Drag it to a sidebar.

You now have an empty widget on your sidebar and you are ready to add a progress bar.

Step 2. Paste in the following html code

1st draft of Book 2
<div id="progressbar" style="background-color:black;border-radius:6px;padding:3px;">
 <div style="background-color:#dd6013;width:30%;height:10px;border-radius:4px;"></div>
</div>

It will look like this:

1st draft of Book 2

You are currently looking at a WordPress example.
For a blogger example, see this site: https://jabrambarneck.blogspot.com

Step 3. Change the percentage

Look at the html code. Do you see the “width: 40%” in the example? That 40% is your percentage. Change it to whatever percentage you want.

Step 4. Change the colors.

Hopefully, I don’t have to explain this, but the the out div’s “background-color: black” style is what chooses the progress bar’s background. The inner div’s “background-color: orange” is what makes the progress bar orange. You can change these colors. Just don’t make them the same color, that defeats the purpose.

Now you can update the percentage at the first of each month and your readers can track your progress with you.

Adding multiple Progress Bars

Now you can paste two or more of these one after another in your sidebar widget to get two or more progress bars. Each one has its own percentage.

1st draft of Book 2
<div id="progressbar" style="background-color:black;border-radius:6px;padding:3px;">
 <div style="background-color:#dd6013;width:40%;height:10px;border-radius:4px;"></div>
</div>
Short Story
<div id="progressbar" style="background-color:black;border-radius:6px;padding:3px;">
 <div style="background-color:#dd6013;width:65%;height:10px;border-radius:4px;"></div>
</div>

It will look like this:

1st draft of Book 2

Short Story

One more div

You may find you need one more div to wrap the title and the progress bar. I need one more div in my posts and so I used one more div for this post your are reading. However, for my widget, I didn’t need to do this.

<div>1st draft of Book 2
 <div id="progressbar" style="background-color:black;border-radius:6px;padding:3px;">
   <div style="background-color:#dd6013;width:40%;height:10px;border-radius:4px;"></div>
 </div>
</div>
<div>Short Story
 <div id="progressbar" style="background-color:black;border-radius:6px;padding:3px;">
   <div style="background-color:#dd6013;width:65%;height:10px;border-radius:4px;"></div>
 </div>
</div>

Changing the Width

By default the outer width is 100% which means it will be as wide as possible. In a sidebar, the outer width probably never needs to be changed. But if you add this to a blog post, it might get a little wide.

You can add a width to the outer div’s style as shown.

1st draft of Book 2
 <div id="progressbar" style="width:200px;background-color:black;border-radius:6px;padding:3px;">
   <div style="background-color:#dd6013;width:40%;height:10px;border-radius:4px;"></div>
 </div>
Short Story
 <div id="progressbar" style="width:200px;background-color:black;border-radius:6px;padding:3px;">
   <div style="background-color:#dd6013;width:65%;height:10px;border-radius:4px;"></div>
 </div>

It will look like this:

1st draft of Book 2

Short Story

Have Access to Edit CSS

If you can edit your CSS, you can make your HTML code cleaner by putting much of the settings in CSS.

Here is a single web page example

<!-- Step 1 - Create the HTML File -->
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.progressbar {
 background-color: #000000;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 width: 200px;
 padding: 2.5px;
 margin:1px;
 vertical-align:10%;
}

.progressbar > div {
 background-color: #dd6013;
 height: 100%;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 color: #ffffff;
 text-align: center;
}
</style>
<body>
<div class="progressbar">
 <div style="width: 75%;">75%</div>
</div>
<div class="progressbar">
 <div style="width:40%;">40%</div>
</div>
<div class="progressbar">
 <div style="width:30%;">30%</div>
</div>
</body>
</html>