Add Free Christmas Countdown Clock Widget

Get the Christmas countdown clock widget for your web with snowball and pop up effects, so grab it from our site.


Christmas countdown timer
Today we have come with the new amazing widget that you like very much, you all know that the month of December is the month of happiness and celebration. With the taking advantage of this month we introduce the Christmas countdown widget for website users which gives our web exciting touch up. So let’s discuss about this widget. We have adopted this widget from MBT network, which is designed by Mustafa Ahmedzai. This widget is fully customized with HTML5 and design with CSS3 and javascript, the best thing about this widget is that it is supported by the all browsers and web pages.

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'/>

  • You can also play with the above codes, for a newbie we share some guidance below that helps you to customize the codes.

    • 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.
    • /* --------------------------------------------------
      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(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;
              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;         }
      •  For users who like’s the demo2 style use the below codes.
      /* --------------------------------------------------
      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(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;
              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;
              }
      • Ultimately, copy the below code and paste it below <body>.
      <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">&#215;</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

    Name

    Android,2,backlinks,7,Blogger,46,blogger theme,1,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,9,Tools,7,Tricks,15,Web designing,18,Widgets,24,WordPress,4,
    ltr
    item
    PRO TECHNIFY: Add Free Christmas Countdown Clock Widget
    Add Free Christmas Countdown Clock Widget
    Get the Christmas countdown clock widget for your web with snowball and pop up effects, so grab it from our site.
    http://1.bp.blogspot.com/-QMu1NWON_bI/VJLv4Qgu5fI/AAAAAAAAH9Y/KqfPudV9vqI/s1600/Christmas%2Bcountdown%2Btimer.png
    http://1.bp.blogspot.com/-QMu1NWON_bI/VJLv4Qgu5fI/AAAAAAAAH9Y/KqfPudV9vqI/s72-c/Christmas%2Bcountdown%2Btimer.png
    PRO TECHNIFY
    https://www.protechnify.com/2014/12/Free-christmas-countdown-clock-widget.html
    https://www.protechnify.com/
    https://www.protechnify.com/
    https://www.protechnify.com/2014/12/Free-christmas-countdown-clock-widget.html
    true
    8223102945718438291
    UTF-8
    Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy