Widget Countdown Timer Terbaru dan Cara Memasangnya

COUNTDOWN Timer atau penghitung waktu mundur bisa digunakan untuk mengetahui kapan tepatnya acara yang telah kita tandai sebagai pengingat. Keterbatasan kemampuan manusia untuk mengingat seseuatu hal apalagi acara penting menjadikan widget countdown timer ini bisa dijadikan acuan untuk membantu menentukan secara cepat dan tepat akan agenda yang telah ditandai.

Widget ini bisa digunakan untuk menandai acara Ulang Tahun, Selapanan, Hari Besar, Agenda Rapat, Agenda Kantor dan bisa untuk acara-acara penting-penting lainnya. Dan widget ini bisa dipasang di blog kalian dengan menambahkan sebuah bahasa pemrograman yang tidak lain adalah CSS3 dan Javascript. Dengan menambahkan item dua bahasa ini, widget sudah dapat terpampang dengan jelas di blog kalian. Bagaimana, mau membuatnya tidak untuk kali ini? Kalau iya saya akan membuatkan tutorialnya beserta contohnya yang nanti akan saya sampaikan pada link button diarea paling bawah postingan ini.

Baca Juga :

Sebelumnya saya juga sudah membuat tutorial Penghitung Mundur ke Tahun 2023. Dan pada artikel itu, saya membuat widget untuk bisa dipasang di blog dengan penghitung mundur pada tahun 2023. Dan kali ini saya akan membuat countdown timer terbaru supaya gampang kalian mempraktekkannya. Sebenarnya hampir sama dengan widget yang sudah saya buat sebelumnya. Hanya ini hasil modifikasi dari tutorial sebelumnya. Jadi simak terus ya teman-teman.

Begini caranya :

1. Masuk ke Dashboard Blogger
2. Pilih Tata Letak
3. Klik Tambah HTML/Javascript
4. Tempelkan kode dibawah ini di konten kosong disitu

<style scoped="scoped" type="text/css">
#countdownalifacode {background:black;color:yellow;font-family:Oswald, Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
.teks {color:white}
</style>
<div id="countdownalfiacode">
<span id="countdown"></span>
</div>
<script type="text/javascript">
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Nov 21, 2022").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
  countdown.innerHTML = days + " <span class='teks'>hari</span> " + hours + " <span class='teks'>jam</span> "
  + minutes + " <span class='teks'>menit</span> " + seconds + " <span class='teks'>detik <br/>menuju Akreditasi</span> RSI";
}, 1000);
//]]>
</script>

Catatan:
Nov 21, 2022 - Ganti dengan tanggal bulan dan tahun yang kalian ingin jadi target
menuju Akreditasi RSI - Ganti dengan nama event yang ingin kalian jadikan target

Nah sudah khan, sekarang tinggal save pekerjaan kalian dan jadilah widget countdownnya. Silakan dipraktekkan ya. Biar kalian nggak perlu susah-susah untuk mengingat event yang akan kalian gelar. Kalau lebih bagus lagi pasang di Running Text hmmm pasti bagus deh nanti jadinya. Terima kasih ya yang sudah mampir. Salam Blogger.

AKRED

Script Penghitung Mundur Hingga Tahun 2023

2023 masih lama dan kita baru saja merayakannya dan sekarang masih berjalan di tahun 2022. Dan baru saja kita juga merayakan lebaran tahun 2022 dan tahun baru 2022 5 bulan silam. Tahun 2023 masih kita tunggu sama-sama. Setidaknya tahun 2023 dapat kita jadikan untuk ajang menanti hari fitri atau hari yang suci setelah sebulan berpuasa, begitu khan?

Dalam postingan kali ini, saya akan memberikan tutorial tentang Menghitung Mundur Tahun 2023 dengan Javascript. Dengan widget ini, kita akan tahu berapa hari lagi, berapa jam lagi, berapa menit lagi dan berapa detik lagi menuju tahun 2023. Sehingga kita tidak perlu mengingat event penting dan event berharga di hidup kita, karena kita bisa melihatnya dalam widget yang sudah terpasang pada blog kita. Iya khan?

Sehingga dengan adanya widget ini kita tidak perlu pusing lagi menghitung mundur karena semuanya sudah berjalan secara otomatis hingga tahun 2023 tiba. Kita tinggal melihat widget ini dan semua sudah tertera dengan jelas disana.

Biasanya kita menghitung secara manual ya nggak? atau mungkin dengan aplikasi online. Boleh saja cara itu dilakukan, tapi kali ini saya menggunakan coding Javascript yang dipadukan dengan CSS3 untuk mempercantik tampilan widgetnya.

Bagaimana sudah tidak sabar ya. Okelah sekarang kita mulai saja ya tutorialnya.

1. Kita masuk dulu ya di Tema
2. Kemudian pilih Sesuaikan : Edit HTML
3. Lalu masuklah kita ke Template Blogger. Di template yang terdapat berjibun code tersebut, temukan kode ]]></b:skin>. Dan tempelkan kode dibawah ini tepat di atas kode ]]></b:skin> itu.

:root {
  --color-white: #1E8BC3;
  --color-black: #ffffff;
  --color-glass: rgba(255, 255, 255, 0.05);
  --color-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: &quot;Poppins&quot;, sans-serif;
  color: var(--color-white);
}
body {
  background: url(background-img.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}
.wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 16px;
}
.heading {
  text-align: center;
  margin-bottom: 4em;
}
.heading h1 {
  text-shadow: var(--color-shadow);
  font-size: 6.2em;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.heading h3 {
  font-size: 1.6em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  background-color: var(--color-glass);
  backdrop-filter: blur(12px);
  box-shadow: var(--color-shadow);
  padding: 8px 30px;
  display: inline-block;
}
.countdown {
  width: 95vw;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.box {
  width: 28vmin;
  height: 29vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
span.num {
  background-color: var(--color-glass);
  backdrop-filter: blur(12px);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  font-size: 4em;
  box-shadow: var(--color-shadow);
  border-radius: 0.1em;
}
span.num:after {
  content: &quot;&quot;;
  position: absolute;
  background-color: var(--color-glass);
  height: 100%;
  width: 50%;
  left: 0;
}
span.text {
  font-size: 1em;
  background-color: var(--color-white);
  color: var(--color-black);
  display: block;
  width: 80%;
  position: relative;
  text-align: center;
  bottom: 20px;
  padding: 0.7em 0;
  font-weight: 600;
  border-radius: 0.3em;
  box-shadow: var(--color-shadow);
}

4. Masih di template, temukan kode </body>.
5. Tempelkan kode dibawah ini persis diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
let dayBox = document.getElementById("day-box");
let hrBox = document.getElementById("hr-box");
let minBox = document.getElementById("min-box");
let secBox = document.getElementById("sec-box");
let endDate = new Date(2023, 0, 1, 00, 00);
let endTime = endDate.getTime();
function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime - todayTime;
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;
  let addZeroes = (num) => (num < 10 ? `0${num}` : num);
  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(
      ".countdown"
    ).innerHTML = `<h1>Countdown Has Expired</h1>`;
  } else {
    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);
    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);
  }
}
let i = setInterval(countdown, 1000);
countdown();
//]]>
</script>

6. Setelah itu dilaksanakan, barulah kita tempelkan di postingan atau di Tata Letak. Saya kira kalian semua sudah paham letaknya itu dimana. Pada tutorial sebelumnya saya juga sudah membahas dimana Tata Letak berada. Oke? sekarang lanjut lagi. Tempelkan kode dibawah di situ ya.

<div class="wrapper">
      <div class="heading">
        <h3>Menghitung Mundur</h3>
        <h1>2023</h1>
      </div>
      <div class="countdown">
        <div class="box">
          <span class="num" id="day-box">00</span>
          <span class="text">Hari</span>
        </div>
        <div class="box">
          <span class="num" id="hr-box">00</span>
          <span class="text">Jam</span>
        </div>
        <div class="box">
          <span class="num" id="min-box">00</span>
          <span class="text">Menit</span>
        </div>
        <div class="box">
          <span class="num" id="sec-box">00</span>
          <span class="text">Detik</span>
        </div>
      </div>
    </div>

Sudah selesai kita semua melakukannya. Silakan lihat di blog kalian. Sudah jadi khan? kalo belum jadi coba diteliti lagi mana kode yang salah letak. Seharusnya bisa kalau menurut tutorial ini. Terima kasih semua teman-teman yang sudah mampir ke sini di artikel Script Penghitung Mundur Hingga Tahun 2023. Salam jumpa lagi hari besok. Tetap semangat meski rintangan menghadang. Tidak ada hal yang tidak mungkin selama kita yakin kepada-Nya. Berusahalah dibarengi dengan Ikhtiar, maka usahamu akan menampakkan hasil yang memuaskan. Salam.

Lihat di codepen saya @Alifacode

See the Pen Script Penghitung Mundur hingga Tahun 2023 by Alifacode (@Alifacode) on CodePen.

COUNTDOWN

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Script Penghitung Mundur Hingga Tahun 2023 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.