Top 10 Ultimate SEO Plugins For WordPress 2017-18
ProTechnify

18/12/2014

Add Free Christmas Countdown Clock Widget


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!.




    0 comments:

    Post a Comment