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!
- Falling snowflakes,
- It has a digital countdown timer,
- It has 3 different animations,
- 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%;
top:170px;
margin-left: -300px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_kk3SwRQKtOG5G3E0_s-5RhqZZ8mT1MQr9GvKwsORyGEM-WinpWVDsNAa9vEcpE1URHQCFZWbyiqyaSzke0QpCBPRJoiuZJNNvLvFZJUE9-tamVyetej7zJ2yX4mqFXgIU7g0kAaVfY/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 {
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">×</a>
</div>
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? =)
