 |
| Christmas Popups with Falling snow & Countdown Timer! |
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
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.
Looking for a New Year Popup? Check this! Gold Plated New Year Popup
Add it to Blogger
- Go to blogger > Template
- Backup your template
- Click "Edit HTML"
- Paste the following code just above </head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>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:
<script type="text/javascript" src="http://tools.mybloggertricks.com/mbt-popup.js"></script>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "12/25/2013 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs"; FinishMessage = "It is finally here!";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250});
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
- 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 replacing fadeAndPop 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 : 250 By 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.
If you wish to display a popup as shown in DEMO1 then use this CSS code:
/* --------------------------------------------------Or 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/AVvXsEgTeSRCZyOlTUNVyiOeFPJNGoxEtGwKdZFpL9FUlL_JrkqFNfyDU8ejkJHQYMlFZOyRG8a98QvVd4HFdVo8TiHrWNgkiTES1vKD90jhog3d2JlCyNqjxgIDfy3ZB34oaCthyPj8hVyKx3w/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;
}
/* --------------------------------------------------
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/AVvXsEjicJpbo_bdQpF-qYhymeCyHMbRUvcInruLd68CLqnJg3WAMFGN_jJQZsYiwjyvYon_Qh6T2wJnIZUHOgqWgugJf9tkcn295C3Y2_J2aFqtc7FLbuZi6IzlwEQGGXE18CyWcNHXXZkUKwI/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 <body>
<div id="myModal" class="reveal-modal" >You can replaced the bolded text with any message you like.
<h2>Count Down Begins!</h2>
<h1>Happy holidays!</h1>
<script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
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
0 comments:
Post a Comment