We are just 2 days away from New Year 2016 and every one is warmed up and charged to welcome the new year in their lives and make this event memorable. As a blogger, its always essential to stay up-to-date with events going around and show your skills to your blog readers. As its a new year event so today I am going to share a new year countdown widget for your blogger blog. After sharing a great Christmas Effect and New Year Fireworks Effect, now its time for a countdown widget. There are two different styled countdown widgets which I will share in this post, so choose wisely. Both are awesome styles, one is simple clock which displays remaining days, hours, minutes and ticking seconds, the other styled clock also displays the same with stars falling down effect. The moment when the new year starts, this widget will display a message saying "Its New Years Eve! "Happy New Year 2015". So lets begin this tutorial:
Style 1:
Style one is simple clock which will display remaining days, hours, minutes and seconds, with live ticking seconds effect, which is awesome feature in this widget. When countdown will be completed and new year will start, this widget will display a message saying "Its New Years Eve! Happy New Year 2016", obviously you can change this message with your unique message according to your needs. So lets see the demo first:
Live Demo
As you can see in the demo, its a good new year countdown widget for your blogger blog. In order to add this awesome widget just follow the steps:
Step 1: Login to your Blogger Account >> Select a Blog
Step 2: Go to Layout >> Add a Gadget and Select HTML/JavaScript gadget.
Step 3: Copy the code below and add in the box:
- <link href="http://fonts.googleapis.com/css?family=Metamorphous" rel="stylesheet" type="text/css" />
- <style type="text/css">
- a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
- #TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: Metamorphous, cursive;font-size: 28px;text-align: center;line-height: normal; }
- .bgt-clock-sep { -moz-animation: sep-blinks 1.1s linear 0s infinite; -webkit-animation: sep-blinks 1.1s linear 0s infinite; animation: sep-blinks 1.1s linear 0s infinite;}
- @-moz-keyframes sep-blinks
- {
- 0% {opacity:1}
- 50% {opacity:0}
- 100% {opacity:1}
- }
- @-webkit-keyframes sep-blinks
- {
- 0% {opacity:1}
- 50% {opacity:0}
- 100% {opacity:1}
- }
- @keyframes sep-blinks
- {
- 0% {opacity:1}
- 50% {opacity:0}
- 100% {opacity:1}
- }
- #bgt-clock-days{color:#00cc00;font-weight:900;}#bgt-clock-hr,#bgt-clock-mins,#bgt-clock-secs{font-family:courier new}#bgt-clock-hr{background:#00cc00;font-weight:700}#bgt-clock-secs{background:#ccc;color:#2aa4cf;}#bgt-clock-mins{background:#2aa4cf;}
- </style>
- <a target="_blank" class="bgt-clock-link" href=http://trickzbucket.blogspot.com>
- <div id="TimerDiv">
- Countdown Till 2016<br /><span id="bgt-clock-days"></span> Days<br /><span id="bgt-clock-hr"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-mins"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-secs"></span></div>
- </a>
- <script type="text/JavaScript">
- function startTimer() {
- var newyr=new Date("January 1, 2015 00:00:00");
- var newyeartime=newyr.getTime();
- var todaytm=new Date();
- var todaytime=todaytm.getTime();
- var timeleft=newyeartime-todaytime;
- var leftdays = timeleft/86400000;
- var lefthr=23-todaytm.getHours();
- var leftmin=59-todaytm.getMinutes();
- var leftsec=59-todaytm.getSeconds();
- if (Math.floor(leftdays) <= -1) {
- document.getElementById(TimerDiv).innerHTML="Its New Years Eve!<br/>Happy New Year 2016";
- }
- else {
- document.getElementById(bgt-clock-days).innerHTML= Math.floor(leftdays);
- document.getElementById(bgt-clock-hr).innerHTML= lefthr;
- document.getElementById(bgt-clock-mins).innerHTML= leftmin;
- document.getElementById(bgt-clock-secs).innerHTML= leftsec;
- }
- t=setTimeout(startTimer(),999);
- }
- startTimer();
- </script>
