kutubuku.myid-Cara Memasang Countdown Timer di Blog Valid AMP-Assalamualaikum wr.wb, hai sobat kutubuku.my.id, ketemu lagi bersama mimin di sini. kali ini mimin akan sedikit membahas mengenai Cara Memasang Countdown Timer di Blog Valid AMP.
oke mimin akan membahas dulu nih sedikit mengenai countdown time, jadi countdown ini fungsinya untuk penghitung mundur tanggal dan waktu dari blog. biasanya trik ini digunakan para blogger untuk menghitung mundur suatu hari besar atau hari penting yang akan diadakan oleh suatu blog. contohnya pengumuman kontes, atau hari-hari penting dari blog tersebut lainnya.
pemasangan trik ini membutuhkan javascript tambahan loh. nah pertanyaannya apakah trik ini bisa kita gunakan di blog AMP?
jawabannya tentu saja bisa dong karena mimin sudah menyiapkan suatu siasat untuk memasang ini tanpa javascrip yang akan mengakibatkan blog AMP kalian error.
jawabannya tentu saja bisa dong karena mimin sudah menyiapkan suatu siasat untuk memasang ini tanpa javascrip yang akan mengakibatkan blog AMP kalian error.
Oke caranya pertama anda harus memasang dulu scipt amp-mustache dan scipt amp-date-countdown dan tempelkan tepat di bawah koding head.
ini scriptnya kawan.
<script async="async" custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"/>
<script async="async" custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"/>
<script async="async" custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"/>
selanjutnya kalian pasang kode dibawah ini tepat di bagian css blog amp kalian oke.
.countdown-container{background:#00ecb9;margin:0 auto;font-size:16px;padding:10px 10px 20px 10px;text-align:center;font-family:Arial, sans-serif}
.countdown {display:flex;margin:0 auto;padding:10px;}
.blok1 {width:25%;text-align:center;font-size:14px;background:#00bf96;color:#fff;font-weight:400;padding:8px;text-transform:capitalize;border-radius:10px;margin:5px}
.blok2{display:block;padding:10px;color:#fff;background:#00816a;border-radius:10px;font-size:25px;margin-bottom:8px}
.teks-blok {display:inline-block;color:#006351;font-size:20px;font-weight:600;margin:0}
.countdown {display:flex;margin:0 auto;padding:10px;}
.blok1 {width:25%;text-align:center;font-size:14px;background:#00bf96;color:#fff;font-weight:400;padding:8px;text-transform:capitalize;border-radius:10px;margin:5px}
.blok2{display:block;padding:10px;color:#fff;background:#00816a;border-radius:10px;font-size:25px;margin-bottom:8px}
.teks-blok {display:inline-block;color:#006351;font-size:20px;font-weight:600;margin:0}
jika sudah, selanjutnya kalian pasang countdown timernya. ini kode yang harus kalian tempelkan dibagian yang kalian inginkan ya.
<amp-date-countdown end-date="2021-03-11T00:00+05:00"
locale="id"
layout="fixed-height"
height="250">
<template type="amp-mustache">
<div class="countdown-container">
<div class="countdown">
<div class="blok1">
<div class="blok2">{{d}}</div>
Hari
</div>
<div class="blok1">
<div class="blok2">{{h}}</div>
Jam
</div>
<div class="blok1">
<div class="blok2">{{m}} </div>
Menit
</div>
<div class="blok1">
<div class="blok2">{{s}} </div>
Detik
</div>
</div>
<div class="teks-blok">Menuju Ramadhan 1442 H</div>
</div>
</template>
</amp-date-countdown>
sekarang tinggal ganti tanggal dan waktunya sesuai dengan yang kalian inginkan di bagian end-date nya ya.
Jika sudah, jangan lupa untuk menyimpan template tadi.
Mungkin hanya itu yang bisa mimin bagikan untuk saat ini, moga di lain hari mimin bisa membuat artikel yang lebih baik dan lebih bermanfaat lagi untuk kalian.
Jangan lupa untuk bagikan artikel ini jika kalian suka agar teman-teman kalian juga dapat ilmu yang sama.
akhir kata, wassalamualaikum, wr.wb
akhir kata, wassalamualaikum, wr.wb
Posting Komentar