Get the Christmas countdown clock widget for your web with snowball and pop up effects, so grab it from our site.
You can also read our previous article: How to add an Alexa widget in blogger.
In this tutorial we have taken the two styles of widget, so first see the demo below and then choose your favorite design.
How To Add Free Christmas Countdown Clock Widget.
- Move to blogger.com.
- Go to template>> Click on edit html.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<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 = "YOUR-MESSAGE!";
//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'/>
- Change the “12/18/2014 11:00 AM” with the current time.
- When the Christmas countdown complete you have an advantage to give the celebration message by replacing “YOUR-MESSAGE!” with yours peaceful message.
- Note: The below editing instruction codes are only for experts, and for the new users kindly follow the above two steps.
- You can also change the sequence of the date and time by changing some codes in %%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs. Remember not change any stated code, i.e. %, only change the sequence of Days/Hours/Mins/seconds.
- You can alter the snowball size, speed (time on which snow falls), countdown by doing some editing on deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250.
- If you want to show the pop up only one time for new coming visitors, so you will have to change the sessionStorage with localStorage.
- Lets jump to the next step.
- Press CTRL+F and search ]]></b:skin> and paste the following styles just above it.
- Those users who like’s the demo1 style use the below codes.
- For users who like’s the demo2 style use the below codes.
- Ultimately, copy the below code and paste it below <body>.
/* --------------------------------------------------
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/AVvXsEjyon8JSYZq8G3CvWzXUcGAHLS3LAq7h104om7Swzs7MBl8Mm27NwOQ1Y72rUR_eNqIgYjbyDO-SHVnA6aVoeRWunr4M6BgOLR1lKZdd0cZeCbjhyIfFjQiyEtVb0T_8NTxkG5ClRsTJLc/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/AVvXsEgUYNyHJw8EkggErloRoH94f5jgtVJ73RT9FlbPXxSbRPu_UWSXaToalW2HC4OwG_NYvljKGQAZaKZ8RCI1U1Wzald6hkTlOryxrVANBK37QS1LRrKBU3mdcVDWH2GndGpQq9niL8VtCwY/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;
}
<div id="myModal" class="reveal-modal" >
<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>
- You can change the blue highlighted text as you wish.
- Finally, click on save template and survey the blog or web for checking the Christmas widget.
Last Words
These beautiful widget give your blog some winter effects and it will constrain your users to feel the natural coldness and it also builds the excitement for Christmas. For more fantastic widgets and tutorials subscribe with us and take the good service without any cost. Happy Winter Holidays!.
COMMENTS