New Year Count Down Widget For Blogs

new year count-down widget2012 is near and I am sure everyone of you is awaiting this moment eagerly. I have modified the countdown widget for Christmas a little to set it for new year. This widget can easily be added to both blogspot or wordpress. Simply copy the code and paste it in your templates. The moment new year starts, the widget will prompt an alert message saying: "Happy New year Everybody!" sharp at 12.00 a.m. The clock disappears the moment new year arrives and prompts the alert message. The clock has military standard format with hours, minutes and ticking seconds. This widget is created using a simple script with no flash. For flash clocks kindly check the Flash clocks collection. Lets add it to blogger.


Live Demo

The widget colors and styles can be completely changed using our Editor before adding it in blogger.

Tip: Paste the entire code given in step#4 inside the HTML editor.


Test and redesign it yourself!

 

Add count Down Widget To Blogger

  1. Go To Blogger > Design
  2. Click " Add a gadget"
  3. Choose HTML/Javascript widget
  4. Paste the following code inside it,

<style style="text/css">

.lcdstyle{ /*Example CSS to create LCD countdown look*/
background:#fff;
color:#289728;
font: bold 20px arial;
padding: 15px;

border:5px solid #333333;

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">

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("HAPPY NEW YEAR EVERYBODY!") //Instead, perform a custom alert
}
return displaystring
}

</script>
<table><tbody>
<tr>
<td>
<img style="float:left; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvRq3gofciG-IrBmCotby8nHmMJHtxGrzkaECYkrKRyqjxit5hLSTs29zUXokpwEvhD8tOUOqQJgRDBvxaNNX6LcNmS8fYfQ6G2mIyLAn4ZlMslo-S31EobT2ZHiLgcHsAz39w3CprLc/s400/NEW+YEAR.png" width="125px"/>
<h1 style="color:#289728; padding-top:40px;">Counting Till 2012 »»</h1><br/>
</td></tr>

<tr><td>
<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()>31)? currentyear+1 : currentyear
var christmas=new cdtime("countdowncontainer2", "December 31, "+thischristmasyear+" 0:0:00")
christmas.displaycountdown("days", formatresults2)

</script>

</td></tr>
</tbody></table>

 

Make these customizations: Use our Color Tool hexadecimal codes

  • To change font color of the clock edit color:#289728;
  • To change border color edit border:5px solid #333333;
  • To change the text color edit color:#289728  4.   Save your widget  and drag it just above your blog posts body.
  • The purple texts can be easily edited to any message you wish to write.
new year widget
      5.   Done!
      Visit your blogs to see a beautiful count down clock that ticks every second!

    Happy new year to all our readers and visitors in advance. Hope you make strong resolutions this year. :)

    If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

    19 comments

    PLEASE NOTE:
    We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
    1. I have added it...i want to change the position but i don't know css.
      Between dude, when i changed the font color using html editor; it did not display the clock
      i had to edit colors using rich text.Wy is it so?

      ReplyDelete
    2. Thanks master..

      very cool

      ReplyDelete
    3. cool
      http://softechnogeek.blogspot.com/

      ReplyDelete
    4. Thanks.
      my-soft24.blogspot.com

      ReplyDelete
    5. it shows wrong time, countdown has 3 days it shows 2 days, i am from india

      ReplyDelete
    6. This comment has been removed by the author.

      ReplyDelete
    7. Assalamualikum ahmed bhai, Thanks for this trick, i want to ask you some questions ,1) how to put dotted lines in my post like yours? 2) How to add a banner at the end of my every post , i dont want to add banner every time when i write a post, i have tried a trick and paste the banner code after data.post.body in html, but the problem is banner is showing when i did'nt even click on readmore button on my post, i want to show it at the end of my post ,not before readmore button, please help me with these problems, your help will really appreciated , This is my blog http://qayyumhackingarticles.blogspot.com . Allah Hafiz

      ReplyDelete
    8. Thankyou
      the information on your blog is very useful
      i will keep updated with your blog
      seo training noida

      ReplyDelete
    9. bro this is cool one widget i added
      but i need widget like yours in sidbar email subscription+social widger

      www.technozan.com

      ReplyDelete
    10. Thanks Mohd ,this is a cool widget I am going to put this in all website.WIsh you too a very blessed year .

      ReplyDelete
    11. This comment has been removed by a blog administrator.

      ReplyDelete
    12. HELP PLEASEEEEEEEEEEEEEEEEEE i want to create a timer ok i edited code but i want every one to see same time in all time zone so plz help i wanna EST time quickkkkkkkkkkkkk thanksssssssssssssssss

      ReplyDelete
    13. IObit Malware Fighter Pro 1.7.0.0 Thanks dude, nice Post .good admin Thnaxxx

      ReplyDelete
    14. The information and the detail were just perfect. I think that your perspective is deep, its just well thought out and really fantastic to see someone.
      Web Design Company

      ReplyDelete
    15. Thanks so much, I have just tested the countdown widget on my blog - http://www.stevenbergy.com.ng and its working fine...I just don't know what more to say, You are the Best !!!

      ReplyDelete
    16. well! thanks for nice share! the information on your blog is very useful
      I will keep updated with your blog.

      Minneapolis Web

      ReplyDelete