Don't Miss

New Year Countdown Widget v2 for Blogger

By Zohaib Liaqat - 5 Comments
Yesterday we shared an article on How to Add a New Year Countdown Widget to your Blog. The countdown widget design we shared yesterday was a simple and clean design. After some customizations, we turned that simple design to a colorful design. If your blog is about Images, Wallpapers, or Music then this design will definitely fit into your blog. As it's new year time, so I don't think that there's any other better way to show that you're keeping your website up-to-date than adding a new year countdown widget to your blog. So, today we're going to share New Year Countdown Widget v2 for Blogger.

Add a New Year Countdown Widget to your Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget 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://www.blogolect.com/2014/12/new-year-countdown-widget-v2-for-blogger.html'>
<div id="TimerDiv">
Countdown Till 2015<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="It's New Years Eve!<br/>Happy New Year 2015";
    }
    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>

Click Save button and you're done!

We hope this article may have helped you in adding a New Year Countdown Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags:

5 comments to ''New Year Countdown Widget v2 for Blogger"

ADD COMMENT
  1. Glad to visit this blog.I feel very happy visiting here, because I'm getting lots of information from here which is very useful for me in gaining knowledge about many topics of this site.Those information become very valid for preparing papers for my work in best essay writing service.Thank you for sharing.I do got many tips regarding many things like boosting traffic for my site etc.

    ReplyDelete
  2. It is just in crises that payday credits prove to be useful. Payday credits likewise safeguard you out of circumstances of ricocheted checks and late installment punishments by influencing the fitting money to progress accessible. Payday Loans

    ReplyDelete
  3. Learn more on Christmas images and updates and feel free to get the christmas images free ideas.
    Learn more on new year updates and feel free to happy new year 2019 download.
    Learn more on new year gifs images and updates and feel free to get the new year gifs collections.
    Learn more on new year images and updates and feel free to get the new year wallpaper free download.
    Learn more on happy new year images and updates and feel free to get the new year image for free.
    Learn more on new year wishes and updates and feel free to get the happy new year wishes free.
    Learn more on Oscar predictions and updates and feel free to get the 91 oscar nominees list.

    ReplyDelete
  4. Using the writing pro service during my student years has become an excellent alternative for me. I can easily go to work and not worry about my homework.

    ReplyDelete