jQuery Christmas pop-up for websites "align =" left "src =" http://lh5.ggpht.com/-dDlvCoTsrwI/Urh2ejV2WUI/AAAAAAAAM2U/obHU9_hKQnA/image%25255B20%25255D.png?imgmax=800 "width =" 583 "height =" 454 "/> Welcome your website visitors with falling snow and a countdown clock this Christmas 2017. An easy-to-add jQuery pop-up for Christmas greetings that can be added to any simple web page, WordPress blog or Blogger blog. </p>
<p>
To keep our tradition alive, we release our premium set of jQuery pop-ups as holiday gifts to all MBT readers. This Popup plug-in has been specially designed and developed with <font style= Five unique features ! It is fully customizable, has a countdown timer that can be set to any date and time, has 3 different animations, 2 attractive Christmas themes & # 39; s and most importantly the first pop-up plug-in of its kind is introduced for blogger -blogs that come with HTML5 sessionStorage functionality to set a cookie to control the pop-up screen. You can decide whether you want the pop-up to be shown to your visitors only once or every new visit. It is perfectly compatible with all major browsers. Interestingly, the scripts are stored on our servers, so no headache on your part, making the installation extremely easy. You can easily add it to your blog or blog on WordPress or on a webpage that you have. This allows you to first view a live demo on Blogger and then on two simple web pages & # 39; s.

Blogger: LIVE DEMO fadeAndPop

Simple webpage: DEMO 1 fade DEMO 2 none

Note: The demo above shows each animation style. To check if cookies are being saved or not, simply refresh the page and you will notice that the pop-up does not reappear. We use session cookies here. The pop-up will only reappear if the user closes the browser and visits your blog again or if the visitor visits your blog in a new browser tab. To prevent the pop-up from reappearing after the browser is closed, you can use local storage instead of session storage. All details have already been discussed in HTML5 cookie series .

Looking for a New Year's Popup ? Check this! Gold plated new year pop-up

Adding a Christmas pop-up to a BlogSpot blog

  1. Go to blogger> Template
  2. Back up your template
  3. Click on "Edit HTML"
  4. paste the following code just above



You can adjust almost everything in the above count from block count to animation style, but I will only discuss what is relevant to keep things simple:

  • Set time and date by editing: 12/25/2017 12:00 AM I set this to the standard Christmas time. The demo shows the time for Christmas in 2017. Just to keep the pop-up alive! 🙂
  • You can set the CountDown text text display by editing: %% D %% days: %% H %% hours: %% M %% mins: %% S %% secs . Make sure you do not change the variables, starting with dn ending with %%. You can choose to display only hours / minutes / seconds or Days / hours / minutes. Edit it as you want.
  • As soon as the countdown timer reaches the target date, it will display a message instead. You can choose to write something by replacing it It is finally here!
  • You can select another animation style from the available three by replacing fadeAndPop with fade or none. The animation names are case-sensitive. Make sure you type it as mentioned above.
  • You can determine the size, speed, count and shape of the snowballs by editing: device orientation: true, round: true, minSize: 1, maxSize: 8, flakeCount: 250 By rounded to false, you can display snowballs in square form. I would recommend to keep it as it is for natural snowfall effect. flakecount refers to the number of snowballs that fall each time.
  • If you want to show the pop-up only once to a visitor and never again during his lifetime, replace sessionStorage with localStorage. This variable appears twice, so replace it twice.

5. Next search to]]> and just above it paste the following styles:

If you want to display a pop-up as shown in DEMO1, use this CSS code:

/ * ———————————————— –
Christmas Popup DEMO1
————————————————– * /

# mbt-counter {
fill: 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;
Do not show;
above: 0;
left: 0;
}

.reveal-modal {
visibility: hidden;
left: 50%;
top: 170px;
margin left: -300 px;
width: 550 px;
height: 305px;
background: rgba (51, 51, 51, 0) url (http://1.bp.blogspot.com/-TTroJ-Ea3sA/UrhBhxFgyVI/AAAAAAAAM1Y/Bg4sF3Lzu0g/s1600/christmas.png) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
boundary radius: 8px;
color: #FFF;
}

.reveal-modal.small {width: 200px; left margin: -140 px;}
.reveal-modal.medium {width: 400px; left margin: -240 px;}
.reveal-modal.large {width: 600px; margin-left: -340px;}
.reveal-modal.xlarge {width: 800px; margin left: -440 px;}

.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: bold;
cursor: pointer;
}

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

Or use the following CSS code to display a pop-up as shown in DEMO1:

/ * ———————————————— –
Christmas Popup DEMO2
————————————————– * /

# mbt-counter {
fill: 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;
Do not show;
above: 0;
left: 0;
}

.reveal-modal {
visibility: hidden;
left: 50%;
top: 170px;
margin left: -300 px;
width: 550 px;
height: 305px;
background: rgba (51, 51, 51, 0) url (http://2.bp.blogspot.com/-LTWEoQSBqOU/UrhBiaYZbuI/AAAAAAAAM1c/yEiqg5cBnek/s1600/christmas1.png) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
boundary radius: 8px;
color: #FFF;
}

.reveal-modal.small {width: 200px; left margin: -140 px;}
.reveal-modal.medium {width: 400px; left margin: -240 px;}
.reveal-modal.large {width: 600px; margin-left: -340px;}
.reveal-modal.xlarge {width: 800px; margin left: -440 px;}

.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: 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 replace the text in bold with any message you like.

7. Save your template and you're done!

Go to your blog to see a nice message to wish you a pleasant winter holiday! 🙂

You are most welcome to share it with your readers by adding an attribution link to this page.

Need help?

I hope this pop-up is useful for most of you. It is not only attractive, but too light in weight and load time perspective. It is time that you welcome your visitors with some winter greetings! 🙂

Let me know if I can help you. Friends of peace and blessings. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *