Thursday, December 13, 2018

How to Create Simple Countdown Timer for AMP Page (with CSS)

This article about How to Create Timer Countdown Valid AMP HTML in Blogger.com with CSS

    How to Create Countdown Timer for AMP Page for Blogger with CSS

    Countdown Timer, usually displayed on a website, to mark the launch of an event. To display this countdown, Webmasters must create a JavaScript that uses timestamp, and is embedded in the Dom HTML of the website.

    However, can a Countdown Timer be applied to an AMP page? Can Countdown be created without using JavaScript?

    If without using JavaScript, of course it is not possible. For this reason, AMP-Project has prepared special AMP JavaScript elements that allow Webmasters to display Countdown on AMP HTML-based web pages.. 

    amp-date-countdown

    AMP Project has released a new element called amp-date-countdown, which allows Webmasters to create and display a Countdown Timer for their website needs.

    To display it, Webmasters simply paste the amp-date-countdown element in the <head> tag, and can use amp-mustache to display it.

    I will share a tutorial on How to make a Countdown Timer on an AMP HTML page complete with CSS to enhance its appearance. 

    Create Countdown Timer for AMP Page

    To create a Countdown Timer, you need to copy  amp-date-countdown and  amp-mustache element before </head>

    <script async='' custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script>
      <script async='' custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

    Then, copy the following code to the place you want. HTML code below will display the countdown automatically. 

    <amp-date-countdown timestamp-seconds="1576225970" layout="fixed-height" height="200">
        <template type="amp-mustache">
        <div class='until'>
            We are Open in
            </div>
          <div id="timecontainer">
            <ul class='timediv'>
              <li class='time'>
            {{d}} days
              </li>
              <li class='time'>
              {{h}} hours
              </li>
              <li class='time'>
                {{m}} minutes</li>
              <li class='time'>
                {{s}} seconds
              </li>
            </ul>
          </div>
        </template>
      </amp-date-countdown>

    You just need to change timestamp-seconds (yellow mark) that use to set the expiration this date countdown. Visit https://www.epochconverter.com/ to convert date to timestamp code. Then replace the yellow mark above with that timestamp.

    To enhance the appearance, I have prepared this CSS, paste this CSS below among the amp-custom code:
    amp-date-countdown {
          display: block;
        }
    #timecontainer {
        background:#2c3e50;
        padding:10px;15px;
        display:block;
        text-align:center;
        font-size:24px;
        max-width:800px;
          margin:auto;
          width:100%;
      }
    ul.timediv {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
            color:#444;
    }
    
    li.time {
    display:inline-block;
      padding:10px 15px;
      background:#f9f9f9;
      color:#000
    }

    Demo

    Below is a simple Countdown Timer demo (for AMP) that I created in JSfiddle
    Good Luck :)