Christmas
Countdown Blogger Widget
by: Keith
Christmas is just around the corner so why not feed our
anticipation by installing a Christmas countdown clock on top of our blog?
If you wanted to create a free blog then this countdown widget is awesome and cool if you wanted to feel like the holiday is coming for a happy
Christmas by generating a pop-up once the countdown ends. It is extremely easy
to install and customize. One more nice thing about it is that it contains no
ads because it utilizes a free script provided by Dynamic Drive
and storing it on Blogger. Anyway, enough with the chatter and let's start,
shall we?
The Look
Our countdown clock will look similar to the screenshot
below (it basically takes the background color of your page so it will
perfectly blend in):
The Code
|
<style
style="text/css">
.lcdstyle{ /*Example CSS to create
LCD countdown look*/
background-color:fff;
color:#FF3333;
font:
bold 20px arial;
padding:
15px;
border:5px
solid #0080ff;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:
5px 5px 5px #CCCCCC;
}
.lcdstyle sup{ /*Example CSS to create
LCD countdown look*/
font-size:
120%
}
</style>
<script
type="text/javascript">
/***********************************************
* Dynamic
Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This
notice MUST stay intact for legal use
* Visit
http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function cdtime(container,
targetdate){
if
(!document.getElementById || !document.getElementById(container)) return
this.container=document.getElementById(container)
this.currentTime=new
Date()
this.targetdate=new
Date(targetdate)
this.timesup=false
this.updateTime()
}
cdtime.prototype.updateTime=function(){
var
thisobj=this
this.currentTime.setSeconds(this.currentTime.getSeconds()+1)
setTimeout(function(){thisobj.updateTime()},
1000) //update time every second
}
cdtime.prototype.displaycountdown=function(baseunit,
functionref){
this.baseunit=baseunit
this.formatresults=functionref
this.showresults()
}
cdtime.prototype.showresults=function(){
var
thisobj=this
var
timediff=(this.targetdate-this.currentTime)/1000 //difference btw target date
and current date, in seconds
if
(timediff<0){ //if time is up
this.timesup=true
this.container.innerHTML=this.formatresults()
return
}
var oneMinute=60 //minute unit in
seconds
var oneHour=60*60 //hour unit in
seconds
var oneDay=60*60*24 //day unit in
seconds
var dayfield=Math.floor(timediff/oneDay)
var
hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
var
minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
var
secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
if
(this.baseunit=="hours"){ //if base unit is
hours, set "hourfield" to be topmost level
hourfield=dayfield*24+hourfield
dayfield="n/a"
}
else if
(this.baseunit=="minutes"){ //if base unit is
minutes, set "minutefield" to be topmost level
minutefield=dayfield*24*60+hourfield*60+minutefield
dayfield=hourfield="n/a"
}
else if
(this.baseunit=="seconds"){ //if base unit is
seconds, set "secondfield" to be topmost level
var
secondfield=timediff
dayfield=hourfield=minutefield="n/a"
}
this.container.innerHTML=this.formatresults(dayfield,
hourfield, minutefield, secondfield)
setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
}
/////CUSTOM FORMAT OUTPUT
FUNCTIONS BELOW//////////////////////////////
//Create your own custom format
function to pass into cdtime.displaycountdown()
//Use arguments[0] to access
"Days" left
//Use arguments[1] to access
"Hours" left
//Use arguments[2] to access
"Minutes" left
//Use arguments[3] to access "Seconds"
left
//The values of these arguments
may change depending on the "baseunit" parameter of
cdtime.displaycountdown()
//For example, if
"baseunit" is set to "hours", arguments[0] becomes
meaningless and contains "n/a"
//For example, if
"baseunit" is set to "minutes", arguments[0] and
arguments[1] become meaningless etc
function formatresults(){
if
(this.timesup==false){//if target date/time not yet met
var
displaystring=arguments[0]+" days "+arguments[1]+" hours
"+arguments[2]+" minutes "+arguments[3]+" seconds left
until December 25, 2011 18:25:00"
}
else{ //else if target date/time
met
var displaystring=""
}
return displaystring
}
function formatresults2(){
if (this.timesup==false){ //if
target date/time not yet met
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span>
"
}
else{ //else if target date/time
met
var displaystring=""
//Don't display any text
alert("Christmas
is here!") //Instead,
perform a custom alert
}
return displaystring
}
</script>
<h1
style="color:#0080ff; margin:0;">Happy Holidays!</h1>
<div
id="countdowncontainer"></div>
<br
/>
<div
id="countdowncontainer2"></div>
<script
type="text/javascript">
var
futuredate=new cdtime("countdowncontainer", "March 23, 2009
18:25:00")
futuredate.displaycountdown("days",
formatresults)
var
currentyear=new Date().getFullYear()
//dynamically
get this Christmas' year value. If Christmas already passed, then
year=current year+1
var
thischristmasyear=(new Date().getMonth()>=11 && new
Date().getDate()>25)? currentyear+1 : currentyear
var
christmas=new cdtime("countdowncontainer2",
"December 25, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days",
formatresults2)
</script>
|
Hit on “Save” and click “View Blog” to see the result.
Make these changes to its colors and font if you wish:
·
To change the color of happy holidays, edit color:#0080ff
·
To change the rounded blue border color and size,
edit border:5px solid #0080ff
·
To change the Count Down text color, edit color:#FF3333
Want to countdown until New Year? Simply change "December 25" to
"December 31", and "Christmas
is here!" to "Happy New Year!" Basically that’s another thing that’s great
about this widget, you can practically set it to count down to any event you
may have on any day of the year, which makes it quite useful all year round.
Again, thanks to Dynamic Drive
for this awesome widget.
No comments:
Post a Comment