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

New Year Popup with counterHappy 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!

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.

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! ;)

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 »

13 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Happy New Year too Mustafa, MBT and Team, InshAllah the year 2014 will be the Successful year for All of US and My Aim is to make it the Hardest working Year of my life to make my Future bright and beautiful. Thanks for your services.
    Regards: Hassan Ahmed
    mytechnoways.com

    ReplyDelete
    Replies
    1. I wish you so very luck with that resolution. May you live to see that day. that is indeeed one of the best self promises. Ameen dear Hassam :)

      Delete
    2. Thank You so much Brother :-)

      Delete
  2. not tested popup yet but it looks cool and reflect your hardwork too..
    Same to You and may ALLAH bless you more..
    My resolutions for new year.. not much big one.. just to acquire MBT :p
    Just kidding bro.. but for sure you get a taste of my intends... currently working on few online projects and will release one of them in a day or two and undoubtedly InshaALLAH we will get for what we deserve. Many thanks.

    ReplyDelete
    Replies
    1. May Allah bless you too even more and help you acquire a site even bigger then MBT! Don't limit your ambitions :)

      I am so happy that you are so determined with your future goals and I promise you a great success if you live to that so enthusiastically.

      Bets of luck Syed! :)

      Delete
  3. Coming back after some months on your blog Mustafa. Good to see you are moving with the same pace :)
    Fahad :)

    ReplyDelete
    Replies
    1. An honor indeed fahad and I am so hopeful that this year will also turn out to be a great year in your life with so many creative ideas. Best of luck buddy :)

      Delete
  4. Happy new year. Pls how can I get in contact with you? I've sent you a message already but I don't know if you got it.

    ReplyDelete
    Replies
    1. Dear due to burden of too many tasks I can rarely check all messages. Can you kindly post your new query in new posts? But please make sure to mention that I permitted you to ask me off-topic question on that post.

      I will surely reply dear :)

      Delete
  5. happy new year bro , Please reply to my mails !!!!!!!!!

    ReplyDelete
    Replies
    1. I will today by sure dear! But whats your new year goal in mind? :)

      Delete
  6. Very nice post bro about Jquery popup, but i just want to ask you that i want to add a popup like this but i want to add some Latest news and banners how can i do that? please help me Mustafa bro... May you live long and be happy :)

    ReplyDelete