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..
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
I will share a tutorial on How to make a Countdown Timer on an AMP HTML page complete with CSS to enhance its appearance.
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:
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 :)