Christmas Popups with Falling snow & Countdown Timer by MBT

To keep our tradition alive, we are releasing our premium set of jQuery Popups as Holiday gift to all MBT readers. This Popup plugin is specially designed and developed with Five Unique Features! It is completely customizable, has a countdown timer that can be set to any date and time, has 3 different animations, 2 attractive Christmas Background themes and most importantly it is the first popup plugin of its kind introduced for blogger blogs that comes with HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can decide whether to show the popup only once to your visitors or on every new visit. It is perfectly compatible with all major browsers. Interesting part of it is that the scripts are stored on our servers so no headache on your part thus making the installation extremely easy. You can add it easily to your blogspot or wordpress blogs or on any webpage you may have. Lets view a Live demo first on Blogger and then on two simple webpages.

Blogger: LIVE DEMO - fadeAndPop
Simple Webpage: DEMO 1 - fade DEMO 2 - none

Note: The above demos show each animation style. In order to check whether cookies are stored or not, simply refresh the page and you will find that the popup doesn't appear again. We are using session cookies here. The popup will display again only if the user closes the browser and revisits your blog or if the visitor visits your blog in a new browser tab. If you want to prevent the popup from appearing again after the browser is closed, then you can use localstorage instead of session storage. All details have already been discussed on HTML5 cookies series.

Add it to Blogger

Go to blogger > Template
Backup your template
Click "Edit HTML"
Paste the following code just above

You can customize almost anything in the above count from flake count till animation style but I will only discuss what is relevant in order to keep things simple:

Set time and date by editing : 12/25/2013 12:00 AM I have set it to default Christmas time. The demo shows time for Christmas in 2014. Just to keep the popup alive! :)
You can set the CountDown timer text display by editing: %%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs . Make sure not to change the variables starting dn ending with %%. You can choose to display just hours/minutes/seconds or Days/hours/minutes. Edit it as you prefer.
Once the countdown timer reaches the target date, it will instead display some message. You can choose to write anything by replacing It is finally here!
You can select a different animation style out of the available three by replacingfadeAndPop with fade or none. The animation names are case-sensitive. Make sure you type it as stated above.
You can choose to control the snowballs size, speed, count and shape by editing:deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250By setting round to false, you can display square shape snow balls. I would recommend to keep it as it is for natural snowfall effect. flakecount refers to the number of snowballs falling at a time.
If you wish to display the popup only once to a visitor and never again in his lifetime then replace sessionStorage with localStorage. This variable appears twice so replace it twice.

5. Next search for ]]>

and just above it paste the following styles:

If you wish to display a popup as shown in DEMO1 then use this CSS code:

/* --------------------------------------------------
Christmas Popup DEMO1
-------------------------------------------------- */

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

.reveal-modal h1 {
        position: absolute;
        left: 45%;
        font-size: 3em;
        color: #FFEA00;
        font-family: oswald;
        top: 30%;
        text-shadow: 2px 4px 12px #000;

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

    .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/AVvXsEiL8tMDsOktXnfDyNCDmQROISeK2s_4-TM5xBYCnqSLVAW5uGihj0M92d74wveljSEWszZIa4JV9WBHNo7nymSHr1tZSNM9lf5pMMjjML2mXT456AGG8HK7wLzo0EAY8d4P0fEjzHtvYNk/s1600/christmas.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: .5;
        position: absolute;
        top: 25px;
        right: 25px;
        color: #bebebe;
        text-shadow: 0 -1px 1px rbga(0,0,0,.6);
        font-weight: bold;
        cursor: pointer;
        }

        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }

Or If you wish to display a popup as shown in DEMO1 then use this CSS code:

/* --------------------------------------------------
Christmas Popup DEMO2
-------------------------------------------------- */

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

    .reveal-modal h1 {
        position: absolute;
        left: 5%;
        font-size: 3em;
        color: #FFEA00;
        font-family: oswald;
        top: 15%;
        text-shadow: 2px 4px 12px #000;

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

    .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/AVvXsEgXj_rNC7hhqS-RHIsZ0die5NpJ-u7i4MOHplTGJ51vJMthrKl3JccIuJmUG1xkO05ydtW48i6DtVjREstMuUlOF6qayBRUHWQaK2wE2GEMUCDx_jneQ_pxpMk2V8NCf8w84KdBRst3720/s1600/christmas1.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: .5;
        position: absolute;
        top: 25px;
        right: 25px;
        color: #bebebe;
        text-shadow: 0 -1px 1px rbga(0,0,0,.6);
        font-weight: bold;
        cursor: pointer;
        }

        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }

6. Finally paste the following HTML code just below

Count Down Begins!


Happy holidays!


    ×

You can replaced the bolded text with any message you like.

7. Save your template and you are all done!

Visit your blog to see a beautiful message popping up to wish you Happy Winter holidays! :)

Credits

This plugin is a well crafted developed sample out of our large collection of premium plugins that we provide only to our clients. All rights are therefore strictly reserved by STCNetwork except for the scripts which can be grabbed from the following sources:

CountDown timer script contributed by hashemia
Falling Snow by Somethinghitme
Reveal popup by ZURB

You are most welcomed to share it with your readers by attaching an attribution link back to this page.

Need Help?

I hope this popup proves useful for most of you. Its not just attractive but too light in weight and load time perspective. It's time you may welcome your visitors with some winter greetings! :)

Kindly let me know if I could be of any help. Peace and blessings buddies. :)

Christmas Popups,christmas pop ups,christmas pop ups london,christmas card pop ups,Christmas Background themes,christmas background themes,christmas background themes free,christmas background themes for windows 7,christmas themes background computer,christmas themed powerpoint background,christmas theme background for word document,christmas theme background images,Happy Winter holidays,happy winter holidays wishes,happy winter holidays quotes,happy winter holidays sms,happy winter holidays message,happy winter holidays greetings,happy winter holidays cards,happy winter holidays,happy winter holidays printable cards,happy winter holidays para colorear,happy winter holidays worksheet,Winter holidays,winter holidays,winter holidays around the world,winter holidays in usa,winter holidays list,winter holidays in france,winter holidays 2013,winter holidays in china,winter holidays in japan,winter holidays in india,winter holidays in italy,winter greetings,winter greetings,winter greetings china,winter greetings lenox china,winter greetings everyday by lenox,winter greetings messages,winter greetings dinnerware,winter greetings sayings,winter greetings teapot,winter greetings tablecloth,winter greetings by lenox,christmas greetings,christmas greetings,christmas greetings message,christmas greetings for cards,christmas greetings sayings,christmas greetings images,christmas greetings in spanish,christmas greetings words,christmas greetings for business,christmas greetings sentiments,christmas greetings in italian,christmas blogger plugins,blogger plugins,blogger plugins,blogger plugins 2013,blogger plugins for wordpress,blogger plugins slideshow,blogger plugins facebook,blogger plugins 2012,blogger plugins twitter,blogger plugins facebook like,blogger plugins seo,blogger plugins for website,blogger widgets,blogger widgets,blogger widgets for websites,blogger widgets free,blogger widgets social media,blogger widgets not working,blogger widgets 2013,blogger widgets 2013 free,blogger widgets and gadgets,blogger widgets html,blogger widgets to increase traffic

Christmas Popups with Falling snow & Countdown Timer by MBT

Add it to Blogger

Credits

Need Help?

Popular Posts

Labels

Blog Archive

Total Pageviews