Tuesday, July 17, 2007

Like To Show Events Count Down Counter On Your Blog?

Yes, I know, sometimes you just can't wait until your desired events arrive. And by constantly check up on your calender and watch won't help much. So by having an events count down counter on your blog/site will greatly reduce that anxiety/homophobia...J/K! Anyway, if you like, here is how to set up a JavaScript event count down counter:
(*Note: I have noticed that this script won't work properly inside the new blogger posts. If you really like to put count down counter inside the new blogger post, you can, but it has to use multiple counters approach. You can see my example of count down counter "inside the new blogger post" for Olympic 2008!")


If what you are looking for is to have multiple events count down on your blog or site then go:Multiple JavaScript Events Count Down Counter On Same Page for Blogs/Sites

1. copy and paste the following JavaScript code to where you like to display it, preferably inside your HTML placeholder(div, span...)

<script language="JavaScript">
TargetDate = "12/31/2020 5:00 AM";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

2.Once copy and paste the above code to your page, you can now tweak its function based on your preference.

3.You should change the TargetDate value to the time of event.

4.You can tweak the look and feel by change the coloring values for BackColor and ForeColor.

5.DisplayFormat allows you to format the countdown display. Try not to change anything between the double quotes.

6.FinishMessage is the value that you like to show when event count down accomplish.

For complete detail and tweaks, head over to hashemian.com:JavaScript Countdown/Count-up Timer/Clock/Ticker for Web Pages, thanks Hashemian for the tool!

Feel free to ask and comment if you have problem working with this JavaScript.

Bookmark and Share


care said...

hi there. I want to add multiple countdowns to my page, but they all end up saying the same thing (and yes, I changed the date and all)--do you know how I can fix this?


morgan said...

Is there a way to change to code to put tow counter on the same page?

Right now it's not possible and I don't really know how to change the code.


David Chen said...

Hey morgan, if you like 2 counters, I can make them for you, just go to Multiple JavaScript Events Count Down Counter On Same Page for Blogs/Sites and answer the customization requirements . I will set them up so you can copy 1 line of code to use. Just let me know the exact of your needs on this, later!

Anonymous said...

I can't make the counters show up on my AIM profile? Can i even do this on AIM? If not, please let me know, since I would love a counter to count down before school starts, and to my birthday too.


David Chen said...

Hi Kayti,
As indicated, I only tested this count down counter on the blog that support JavaScript, so I really can't tell for AIM profile, since I don't use it. Does your AIM profile allows any JavaScript at all?
If it does, then it definitely will run on it, all you have to do is cope the code and place it on the editor of your AIM profile, follow the instruction above and you should be ready for your birthday count down before school starts! Find out if AIM profile support JavaScript first, good luck!

Jeanne & Sarah said...

Thanks for posting that!!

Knatchbulley Hughzscene said...

hey thr :)
so glad i found ur blog.. i'd bn searching fr a countdown widget for so long!!

thnx a lott :)

stay confounded

Natalie and Jeff said...

Thank you so much for this information! I didn't think I'd be able to pull it off, but it worked! You're great!