--> Happy New Year - jQuery Popup For Sites! | Experience Lab - Online business creation and development guide for bloggers and startups

Happy New Year - jQuery Popup For Sites!

Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and ha...

happy new year jquery popup for sites

Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and happy new year, we are releasing today a dynamic popup for new year so that you may not remain dependant on a fixed background theme and instead change the date and time by editing the text.

This Popup plugin contains 4 Unique Features!

  1. Falling snowflakes,

  2. It has a digital countdown timer,

  3. It has 3 different animations,

  4. Supports HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can choose to show the popup once or several times.

It is perfectly compatible with all major browsers. A perfect way to greet your website visitors.  You can add it easily to your blogspot or wordpress blogs or on HTML webpage you may have. It is extremely easy to customize. View the demos below and then proceed to the installation guide.

Note: I have willingly set the counter to 2017 so that the demo may live longer :)

How to install this popup?

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 Winter Holidays tutorial linked below. 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: transparent !important;

position: relative;

top: 28%;

font-size: 25px;

left: 28%;

text-shadow: 1px 2px 4px rgb(51, 51, 51);

color: rgb(255, 254, 198) !important;

border: 2px solid orange;}

        .reveal-modal h2 { 
   position: relative;

top: 25%;

font-family: oswald,arial;

font-size: 1.7em;

text-shadow: 2px 4px 10px #000;

color: orange;

text-align: center;}

    .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%;


        margin-left: -300px;

        width: 550px;

        height: 305px;

        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJowiBBiM6su-xsTwT7l0pAemXE7nzi8BWkjPY2QHwmeXoqqiVTMZ6FcrumkgI_Rj8zmqjzhhM8j6G45tc8G42osr83MEOMIxgH3rbM3dempyNdEfXGA5Y6pGj7iXdOYw9x3k_1r5P1g/s1600/happy-new-year-png.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: orange;


        .reveal-modal .close-reveal-modal:hover {



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.


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>


Need Help?

Kindly let me know if you needed any help. I whole heartedly expect that you will like this pleasant gift for new year. Happy new year 2016 buddies but before I go here goes my new year resolution:

"Spending more time with my newly born baby "Ifza" and ofcourse blogosphere."

Love you all buddies! What are your new year resolution? =)



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: Happy New Year - jQuery Popup For Sites!
Happy New Year - jQuery Popup For Sites!
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy