How to create and add progress bars to your blog.

Pin It

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:

 CHRISTMAS FUND
Goal: $700
Start: $0
Current: $180

26%

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>
</div>
<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!!