Cara Membuat Countdown Pengumuman Kelulusan Di Google Sites

Pengumuman kelulusan adalah momen penting bagi siswa. Google Sites menyediakan platform mudah untuk membuat website. Countdown pengumuman kelulusan meningkatkan antisipasi. Artikel ini memberikan panduan lengkap. Pembuatan countdown di Google Sites sangat mudah.

Cara Membuat Countdown Pengumuman Kelulusan di Google Sites

Hai teman-teman! Sebentar lagi momen pengumuman kelulusan tiba, nih. Pasti deg-degan banget, kan? Nah, biar suasana makin seru dan bikin penasaran, kita bisa lho bikin countdown pengumuman kelulusan di website sekolah atau website pribadi kita menggunakan Google Sites. Caranya gampang banget, dan yang pasti, gratis!

Google Sites itu platform dari Google yang memungkinkan kita membuat website dengan mudah, tanpa perlu coding yang rumit. Cocok banget buat kita-kita yang pengen punya website tapi nggak jago ngoding. Oke, langsung aja yuk kita mulai!

Persiapan Awal

Sebelum mulai membuat countdown, ada beberapa hal yang perlu kita siapkan:

1. Akun Google: Pastikan kamu sudah punya akun Google, karena kita akan menggunakan Google Sites.
2. Tanggal dan Waktu Pengumuman: Tentukan tanggal dan jam berapa pengumuman kelulusan akan diumumkan. Ini penting agar countdown kita akurat.
3. Gambar Latar (Opsional): Siapkan gambar latar yang menarik untuk countdown kamu. Bisa foto sekolah, logo sekolah, atau gambar apa pun yang relevan.

Langkah-Langkah Membuat Countdown

Setelah semua persiapan beres, sekarang kita masuk ke langkah-langkah pembuatan countdown di Google Sites:

1. Buka Google Sites:
   • Buka browser kamu dan ketik sites.google.com.
   • Login dengan akun Google kamu.
2. Buat Situs Baru:
   • Klik tombol “Blank” atau “Kosong” untuk membuat situs baru dari awal. Atau, kamu juga bisa memilih template yang sudah ada jika mau.
3. Beri Nama Situs:
   • Di bagian atas halaman, kamu akan melihat tulisan “Untitled site” atau “Situs tanpa judul”. Klik di situ dan ganti dengan nama yang sesuai, misalnya “Pengumuman Kelulusan SMAN 1 Jakarta”.
4. Tambahkan Judul Halaman:
   • Sama seperti memberi nama situs, kamu juga bisa mengganti judul halaman. Misalnya, “Menuju Pengumuman Kelulusan!”.
5. Sisipkan Kode HTML Countdown:
   • Nah, di sinilah bagian pentingnya. Kita akan menggunakan kode HTML untuk membuat countdown.
   • Di menu sebelah kanan, cari dan klik opsi “Embed” atau “Sematkan”.
   • Pilih opsi “Embed code” atau “Sematkan kode”.
   • Sekarang, kita perlu kode HTML countdown. Kamu bisa mencari kode countdown generator online. Ada banyak kok, salah satunya di Time and Date atau TickCounter.
   • Atur tanggal dan waktu pengumuman kelulusan sesuai dengan data yang sudah kamu siapkan.
   • Salin kode HTML yang diberikan oleh countdown generator tersebut.
   • Kembali ke Google Sites, tempelkan kode HTML tersebut di kotak “Embed code”.
   • Klik “Next” atau “Berikutnya”, lalu klik “Insert” atau “Sisipkan”.
6. Atur Posisi dan Ukuran Countdown:
   • Setelah kode disisipkan, kamu akan melihat tampilan countdown di halaman Google Sites kamu.
   • Klik dan tarik countdown tersebut untuk mengatur posisinya. Kamu bisa meletakkannya di tengah halaman, di atas, atau di mana pun yang kamu suka.
   • Tarik sudut-sudut countdown untuk mengatur ukurannya. Pastikan ukurannya pas dan mudah dilihat.
7. Tambahkan Gambar Latar (Opsional):
   • Jika kamu ingin menambahkan gambar latar, arahkan mouse ke bagian atas halaman (di bagian judul halaman).
   • Klik “Change image” atau “Ubah gambar”.
   • Kamu bisa mengunggah gambar dari komputer kamu atau memilih gambar dari galeri Google.
8. Tambahkan Informasi Tambahan:
   • Kamu juga bisa menambahkan informasi tambahan di bawah countdown, misalnya:
     • “Pengumuman kelulusan akan diumumkan pada tanggal [Tanggal] pukul [Waktu] di website ini.”
     • “Siapkan diri kalian ya!”
     • “Semoga sukses!”
   • Untuk menambahkan teks, gunakan opsi “Text box” atau “Kotak teks” di menu sebelah kanan.
9. Publikasikan Situs:
   • Setelah semuanya selesai, klik tombol “Publish” atau “Publikasikan” di pojok kanan atas.
   • Beri nama alamat web untuk situs kamu. Misalnya, “pengumumankelulusansman1jakarta”.
   • Klik “Publish” sekali lagi.

Contoh Kode HTML Countdown

Berikut ini contoh kode HTML countdown yang bisa kamu gunakan. Kode ini menggunakan library JavaScript sederhana. Kamu bisa memodifikasi kode ini sesuai dengan kebutuhanmu.

<div id="countdown" style="font-size: 30px; text-align: center;"></div>

<script>
  // Atur tanggal dan waktu pengumuman kelulusan
  var countDownDate = new Date("May 26, 2024 10:00:00").getTime();

  // Update countdown setiap 1 detik
  var x = setInterval(function() 

    // Dapatkan tanggal dan waktu sekarang
    var now = new Date().getTime();

    // Hitung selisih waktu
    var distance = countDownDate - now;

    // Hitung hari, jam, menit, dan detik
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Tampilkan hasil countdown
    document.getElementById("countdown").innerHTML = days + " Hari " + hours + " Jam "
    + minutes + " Menit " + seconds + " Detik ";

    // Jika countdown selesai, tampilkan pesan
    if (distance < 0) 
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "PENGUMUMAN KELULUSAN!";
    
  , 1000);
</script>

Penjelasan Kode:

• <div id=”countdown”></div>: Ini adalah elemen HTML tempat countdown akan ditampilkan.
• var countDownDate = new Date(“May 26, 2024 10:00:00”).getTime();: Baris ini menentukan tanggal dan waktu pengumuman kelulusan. Ubah tanggal dan waktu sesuai dengan data kamu.
• var x = setInterval(function() … , 1000);: Baris ini mengatur agar fungsi di dalam kurung kurawal dieksekusi setiap 1 detik (1000 milidetik).
• Di dalam fungsi setInterval:
  • Kita menghitung selisih waktu antara tanggal dan waktu sekarang dengan tanggal dan waktu pengumuman.
  • Kita menghitung hari, jam, menit, dan detik dari selisih waktu tersebut.
  • Kita menampilkan hasil countdown di dalam elemen dengan id “countdown”.
  • Jika countdown sudah selesai (selisih waktu kurang dari 0), kita menghentikan interval dan menampilkan pesan “PENGUMUMAN KELULUSAN!”.

Tips Tambahan, Cara Membuat Countdown Pengumuman Kelulusan di Google Sites

• Desain yang Menarik: Gunakan warna-warna cerah dan font yang mudah dibaca agar countdown kamu terlihat menarik.
• Mobile-Friendly: Pastikan situs kamu responsif dan bisa diakses dengan baik di perangkat mobile. Google Sites biasanya sudah otomatis responsif, tapi tetap perlu dicek.
• Bagikan Link: Setelah situs kamu dipublikasikan, bagikan link-nya ke siswa-siswa agar mereka bisa melihat countdown-nya.

Contoh Penerapan dalam Tabel:

Dengan menggabungkan elemen-elemen ini, kamu bisa membuat countdown pengumuman kelulusan yang informatif, menarik, dan membuat siswa semakin antusias!

Alternatif Lain: Menggunakan Google Calendar

Selain menggunakan kode HTML, kamu juga bisa menggunakan Google Calendar untuk membuat pengumuman kelulusan. Caranya:

1. Buat event di Google Calendar dengan tanggal dan waktu pengumuman kelulusan.
2. Atur notifikasi agar siswa mendapatkan pengingat sebelum pengumuman.
3. Sematkan (embed) Google Calendar tersebut ke Google Sites kamu.

Cara ini lebih sederhana daripada menggunakan kode HTML, tapi kurang fleksibel dalam hal desain.

Memastikan Countdown Berfungsi dengan Baik

Setelah kamu membuat dan mempublikasikan countdown, penting untuk memastikan bahwa countdown tersebut berfungsi dengan baik. Berikut adalah beberapa hal yang perlu diperiksa:

• Tanggal dan Waktu yang Tepat: Pastikan tanggal dan waktu yang ditampilkan di countdown sudah benar.
• Tampilan yang Benar: Pastikan countdown terlihat dengan baik di semua perangkat (desktop, tablet, dan smartphone).
• Link yang Benar: Pastikan link situs kamu sudah benar dan bisa diakses oleh siswa.

Membuat Pengumuman Lebih Interaktif

Selain countdown, kamu juga bisa menambahkan elemen interaktif lainnya ke situs pengumuman kelulusan kamu, seperti:

• Formulir Pertanyaan: Buat formulir di mana siswa bisa mengajukan pertanyaan tentang pengumuman kelulusan.
• Kolom Komentar: Aktifkan kolom komentar agar siswa bisa memberikan komentar dan berinteraksi satu sama lain.
• Galeri Foto/Video: Tambahkan galeri foto atau video kenangan selama masa sekolah.

Dengan menambahkan elemen-elemen interaktif ini, kamu bisa membuat situs pengumuman kelulusan yang lebih menarik dan engaging bagi siswa.

Menjaga Keamanan Situs

Meskipun Google Sites relatif aman, tetap penting untuk menjaga keamanan situs kamu. Berikut adalah beberapa tips:

• Gunakan Password yang Kuat: Pastikan kamu menggunakan password yang kuat dan unik untuk akun Google kamu.
• Batasi Akses: Batasi akses ke situs kamu hanya untuk orang-orang yang berwenang.
• Perbarui Situs Secara Teratur: Perbarui situs kamu secara teratur untuk memastikan bahwa semua plugin dan tema yang kamu gunakan sudah versi terbaru.

Dengan mengikuti tips-tips ini, kamu bisa membuat situs pengumuman kelulusan yang aman dan terpercaya.

Nah, itu dia langkah-langkah lengkap cara membuat countdown pengumuman kelulusan di Google Sites. Gampang banget kan? Sekarang giliran kamu untuk mencoba. Dijamin, momen pengumuman kelulusan akan semakin seru dan bikin penasaran!

Semoga artikel ini bermanfaat ya! Terima kasih sudah membaca sampai selesai. Jangan lupa untuk berkunjung kembali nanti, karena masih banyak tips dan trik menarik lainnya yang akan kami bagikan. Sampai jumpa!