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.