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

welcome to HT Tricks tutorial Desk my beloved readers! this trick is provided by Mybloggertricks.com and I find it neccessary to share it Here At Helperstutorial as a follow up trick to how to Add Falling Snowflakes / colored stars / Flowers / Leaves / stars / butterfly /to Your Blog I shared Before

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/AVvXsEhWYk_X4hXGM5Hn0B-XulWeozKUkrUJZCWnyZDBkP-1eZxm4WO2Qtm2V7DX5V-TZ4AKqr36V19CQiOc4VaiDSNlrk7VflQIFtkCRthpQz9Xk-0F-QLWkIjTQdTZYku3aEq3aTfbUheRb_pn/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.
All Credit goes to Mohammad of Mybloggertricks

Share it →

Tweet