December 28, 2011

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="http://3.bp.blogspot.com/-id6x2AOCGc4/TvoJfxRT-oI/AAAAAAAAFso/HKKnQ5bcnGY/s400/NEW%2BYEAR.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 »

    22 comments : Post Yours! Read Comment Policy ▼
    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. cool
      http://softechnogeek.blogspot.com/

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

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

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

      ReplyDelete
    6. 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
    7. Thankyou
      the information on your blog is very useful
      i will keep updated with your blog
      seo training noida

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

      www.technozan.com

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

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

      ReplyDelete
    11. Mustafa Bhai Thats Awesome Love it But Please Change The Date hahahah and Also year Nice efforts bhai!

      Blogger Tricks

      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. 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
    14. Well this kind of information is really worth searching for this. It’s good to have these kinds of articles around to keep the information flow steady. Helping those who really can make things right in the future, good work!
      Download free games

      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. How can I install that into my website? I am checking and it still shows errors in MN website

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

      Minneapolis Web

      ReplyDelete

     
    • MBT Icons and buttons

      Icons and Buttons

      Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

    • choosing webhost for a blog

      Why HostGator?

      Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

    • SEO Settings for blogger

      ALL IN ONE SEO PACK 2012

      Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

    • Blogger widgets and plugins

      Visit MBT's Blogger LAB

      Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

    • become a six figure blogger!

      Become a SIX FIGURE BLOGGER

      Learn what it takes to become a successful entrepreneur and build a living online!