Wednesday, April 24, 2013

How to create and add progress bars to your blog.

Pin It
 photo 003blankwhite_zps503bee04.jpg

I want to mention right away that this tutorial is for Blogger. I'm not sure what the steps are for Wordpress or Typepad. 

I've been asked a few times about my progress bars, and I wanted to share with you how to add some to your own blog. I want to admit that I'm not an HTML wiz by any means but I like to learn new things. And this tutorial is easy, don't feel scared or intimidated with a little code:) I hope you'll find this tutorial useful.

You can use progress bars to track pretty much anything on your blog - financial goals, income, debt progress, weight loss, exercise goals etc. etc. I use them to update on our savings goals for Christmas, vacation and Baby funds.

I will use one of them as an example today.

But before we start, be sure to back up your blog (any time you work with HTML, you should back up your content in case something goes terribly wrong)!!It's pretty easy! Just go to "Template". In the right top corner, click on "Backup/Restore" and click on "Download full Template". It will save your entire blog on your computer. You know, just in case :)

Now let's go back to progress bars. I'll use this one as an example:

Goal: $700
Start: $0
Current: $180
START                        END

This is what HTML code for it looks like:

<b><font color=”#3366ff”;"> CHRISTMAS FUND </font></b><br />
Goal:  $700<br />
Start:  $0<br />
Current:  $180<br />

<div class="”goal”" style="”width:180px;height:22px;background:#A9D0F5;border:solid" 20px="">
<div class="”progress”" style="”height:22px;background:#3366FF;color:white;width:26%;”"><b>26%</b>
<div style="”font-size:25px;float:left;”"> START </div><div style="”font-size:25px;float:right;”"> END </div>

Now I want to explain to you how to make changes to fit your needs:

GREEN- the things that are highlighted with green are the name of your bar and the numbers that show the actual progress (obviously, if it's not a financial goal, you don't need a $ sign :). I think it's pretty self-explanatory :)

PURPLE is just the width and height. You can play with it and adjust it to your liking.

BLUE stands for the colors of the background (first number) and the actual progress (second number). I use blue on my bars but if you want to change your colors, you can use this hex color chart for reference.

RED shows the percentage. The first number is the length of the progress part of the bar and the second is what shows on it (as I was writing this tutorial, I realized that the second number on my bar was showing 67%. Oops! :)

And this is it! Now you can copy and paste the code from my blog for your personal use (but please don't re-post this tutorial!), and then play with it to fit your needs. After you customized your progress bar, save it as a Word document for easy access any time you need it.

The second part is how to add it to your blog.

First, you need to go to "Layout". Depending on the layout of your blog, you can add pretty much anything on either right or left side (or both). I have my side bar on the right. Go there and click on "Add a gadget". Scroll down until you see HTML/JavaScript. Click on it, then copy and paste your code into content. Push Save. And now you got your progress bar on your blog! You can click on preview to see if you like how it looks.

You can repeat these steps as many times as the amount of bars you need. And you can change the location of these bars on your layout if you right-click and drag them down. Be sure to save the new arrangement too.

And now you are all set! I told you it's not hard.

Phew...that was the longest tutorial I've ever written. I hope you found it useful :) And let me know if you have any questions - I'll be happy to help you :)

Have a good night, everyone!!


  1. Lena, how do you update the progress bars?

    1. I knew I would forget something :) You just change the numbers (in my case, percentage), and it will adjust the bar. The only thing is that you have to do the math yourself, it doesn't automatically calculate the percentage, just does the adjustment :)

    2. OH NO ! more math ???? *smile* Thanks it was wonderful and I have been meaning to ask you as well as how you put separate blog pages under each tab and set up for those too?

    3. I promise, I'll write a tutorial on it too! You are not the first to ask:) It's on my need-to-blog about list :)

  2. Thanks for the info. It looks pretty straight forward. I've been thinking about adding bars to my blog for a while. Not because I'm tracking anything, just because I like graphs. I'm going to add them as soon as I can figure out something to display.

    1. Maybe, you can track how many weeks of the year you have no food waste? :) Just for fun :)

  3. Great tutorial, Lena! :)

    I used to have these bars up on my blog, thinking maybe i'll start a new finance page and add them in again. I think the method is pretty much the same for all blog platforms.

    1. I just wasn't sure about the installation process, that's why I put this disclaimer.

  4. Cool! Thanks for doing this. I dabble in html, but I've never understood tables and anything with "div" in it. Can't wait until I have time to play with this.

  5. Thanks Lena! I am looking forward to playing with this! Maybe I could do a progress bar on my craft room clean up and/or the Spring Fling Boogie:) I need to take a class on html--don't know anything about it!

  6. I think I will be adding these progress bars to my blog soon. But first I have to decide what to track!

  7. Nice Progressbar :)
    Thank you for the tutorial!

    John Tester


Related Posts Plugin for WordPress, Blogger...