How to: Tracking Bars

I have been asked by a few different folks lately on how to create the tracking bars I have on the right side of my blog.  I'm very pleased to be able to explain how to set these up, as this was one of the first things I wanted to do when I started my first blog.

My blog is hosted using the blogger platform.  It's free, by google.  If you don't have a blog already - your first step is to create one.  It's a fairly easy process, and blogger guides you through it.

Once you've got your blog set up, you can edit it using the page elements section of your account, or by edititng the HTML.  HTML is the language that creates everything you see on the world wide web.  If you are not very familiar with HTML, I would suggest starting by editing the page elements - it will be much easier.

If using the blogger flatform, you'll want to add a 'gadget'.  When you click to add a gadget, a pop up box will appear that lists the most popular types - choose the HTML/Javascript gadget.  When you do, this will open up a pop up box that is blank.  In this box you will eneter in your tracking bar code.

This is the code that I use:

Goal: $1,000<br/> Current Saved: $951.13<br/> <div #555;” style="”width:195px;height:17px;background:#8f8049;border:solid" class="”goal”" 1px> <div style="”height:14px;background:#660000;color:white;width:95.11%;”" class="”progress”"><b>95.11%</b> </div> </div> <div style="”font-size:10px;float:left;”"> START </div><div style="”font-size:10px;float:right;”"> END </div>

There are a lot of ways you can customize the tracking bars to suit you and your blog's needs.  You can change the colours, size, your goals etc.

The numbers that start with a # sign indicate the colours.  If you want to change the colours, I suggest googling HTML colour codes.  Through trial and error - you'll find out the perfect combination for your , blog.  The numbers that are followed by a px (pixels) are what makes the tracking bar it's particular size.  Again through trial and error, you'll find what fit's best.

The first percentage that you see tells the tracking bar how much of it should be filled in with the colour you've chosen.  The second percentage is the number that shows up within the bar.  I keep these numbers the same for obvious reasons.

Well - there you have it, I hope that helps. 

If you have any questions - leave me comments and I'll do my best to help.  If your a reader with advise, please leave a link and I can add it to this post.


  1. thanks Jessie,

    Took me awhile to figure out how to make the tracking bars work with wordpress but I think I have it figured out.



  2. So much easier than my Google API bar. LOL. Thanks for sharing.

  3. That is helpful. Maybe a post on how to put spreadsheets into your blog? That's one I still can't seem to figure out

  4. Thanks for taking the time to post this! I've been meaning to add these to my blog and now I know how!

  5. Hi Jessie,

    I would like to learn how to make the tracking bars but I don't want to have a blog.
    I am researching it but no sucess yet.
    Any ideas?
    Thank you.

  6. @ CR - I'm afraid I don't know of any other way other then creating a web page. That said, you wouldn't have to write anything or 'blog' you could just maintain your tracking bars.

  7. Hi Jessie,

    Thank you and happy new year!!!


Hi! Thank you for stopping by and leaving a message.

Links ♥