"Happy New Year" jQuery Popup with CountDown Timer & Cookies!

Happy New Year 2014 our beloved readers! How can I forget wishing my family a splendid new year? :D Today marks the sixth consecutive year of serving you all since 2008! That is indeed a long journey for a school going boy to a university graduate and the credit goes to this cute little family that I have online. We wish you all a new year full of abundant new zeal and joy, a year full of honest commitments and a year full of pleasant surprises. May you all have the best in life and I sincerely wish you all the Holy blessings that I wish for myself. You guys are the best! In order to dress up your blogs with beautiful near year greetings, we crafted a new year version of the Christmas jQuery popup we published last week. And guest what? It has the same unique 4 features that not even a premium popup would have! You got us. It is a highly advanced light weight jQuery popup that comes with a default count down or countup timer, comes with 3 animations, Falling snow flakes and most importantly it is fully controlled via HTML5 LocalStorage cookies. So lets buzz up our blogspot blogs with something worth trying out!

Live DEMO!

Add it to Blogger

All steps are exactly similar to the ones we already shared on our christmas popups tutorial except for the styling which I will discuss here. Kindly therefore follow all steps shared in the Christmas tutorial by following this link. Follow all steps there and skip step#5.

Christmas Popups with 2 amazing skins!

Add the following CSS code instead of the code shared in step#5 of previous tutorial:

   

/* -------------------------------------------------- 
New Year Popup by MBT
-------------------------------------------------- */

 

#mbt-counter {
        padding: 10px;
        font-family: oswald, verdana;
        background-color: rgba(0, 0, 0, 0)!important;
        color: #FFF!important;
        position: absolute;
        left: 59%;
        top: 12%;
        font-size: 15px;
}

        .reveal-modal h2 {
        position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}

   
    .reveal-modal-bg {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        }
   
    .reveal-modal {
        visibility: hidden;
        left: 50%;
        top:170px;
        margin-left: -300px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN4tkLn_xvgwcZbS6GdNNnIR9TSdrayrlmlU9O8lUd6sdsCJV3yJtkjDalHucJbkhGvjmuWX6Rmjngbb5XTzPN0SGozSXXlhiVkI6m4kqeTvGMxd9j_fpt9tpmxTKE26lkgIniTu4n5Z1V/s1600/happy-new-year.png) no-repeat -17px 0px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        color: #FFF;
        }
       
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium         { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge         { width: 800px; margin-left: -440px;}
   
    .reveal-modal .close-reveal-modal {
        font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
        }
       
        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }

That's all!

Hide Winter Snow Fall

If you don't want to show the falling snow then kindly remove this code:

$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});

This code is given in step#4 of previous tutorial.

The HTML

For step#6 use the following HTML code

<div id="myModal" class="reveal-modal" >
        <h2>Count Down Begins!</h2>
        <script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
        <a class="close-reveal-modal">&#215;</a>
        </div>

Need Help?

Kindly let me know if you needed any help. I had limited time so could only design just one skin, I therefore whole heartedly expect that you will like it. Happy new year buddies but before I go here goes my new year resolution:

Spending more time with Family that includes both you guys and home. Love you all buddies! :)

What are your new year resolutions dudes? Say it all! ;)

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 12/31/2013