Membuat Pengumuman Kelulusan Menggunakan Blogger (Blogspot)

Ingin membagikan pengumuman penting seperti kelulusan siswa, hasil seleksi, atau info kegiatan sekolah secara online? Salah satu cara paling mudah adalah menggunakan platform Blogger (Blogspot). Gratis, mudah digunakan, dan langsung bisa dibagikan ke siapa saja.

Dalam panduan ini, kita akan membuat pengumuman kelulusan sederhana yang bisa dicari berdasarkan Nama atau NISN menggunakan fitur HTML sederhana dan JavaScript.

📌 Langkah 1: Login ke Blogger

1. Kunjungi https://www.blogger.com
2. Login menggunakan akun Google Anda
3. Klik "Blog Baru" untuk membuat blog baru jika belum punya

📸 Contoh tampilan:

📌 Langkah 2: Buat Postingan Baru

1. Pilih blog Anda
2. Klik tombol "Postingan Baru"

📸 Tampilan editor Blogspot:

📌 Langkah 3: Masuk ke Mode HTML

1. Di editor postingan, klik "HTML" (bukan Compose)
2. Tempelkan kode berikut:

<h2 style="text-align: center;">Pengumuman Kelulusan Peserta Didik</h2>
<p style="text-align: center;">Tahun Pelajaran 2024/2025</p>
<p style="text-align: center;">UPTD SMPN 1 MELINTING</p>
<hr />

<div style="text-align: center; margin-bottom: 20px;">
  <input type="text" id="searchInput" placeholder="Masukkan Nama atau NISN" style="padding: 10px; width: 80%; max-width: 400px; border-radius: 5px; border: 1px solid #ccc;">
</div>

<table border="1" cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center; display: none;" id="resultTable">
  <thead style="background-color: #f2f2f2;">
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>NISN</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="resultBody">
    <!-- Data akan dimasukkan via JavaScript -->
  </tbody>
</table>

<p id="notFoundMessage" style="display: none; text-align: center; color: red; font-weight: bold;">Data tidak ditemukan. Periksa kembali penulisan Nama atau NISN Anda.</p>

<script>
  // Data siswa
  const dataSiswa = [
    { no: 1, nama: "Aan Sulistiawan", nisn: "123456789", status: "LULUS" },
    { no: 2, nama: "Budi Hartono", nisn: "987654321", status: "LULUS" },
    { no: 3, nama: "Citra Dewi", nisn: "1122334455", status: "LULUS" }
    // Tambahkan data lainnya di sini
  ];

  const searchInput = document.getElementById("searchInput");
  const resultTable = document.getElementById("resultTable");
  const resultBody = document.getElementById("resultBody");
  const notFoundMessage = document.getElementById("notFoundMessage");

  searchInput.addEventListener("keyup", function () {
    const query = this.value.trim().toLowerCase();
    resultBody.innerHTML = "";
    resultTable.style.display = "none";
    notFoundMessage.style.display = "none";

    if (query.length === 0) return;

    const results = dataSiswa.filter(siswa =>
      siswa.nama.toLowerCase().includes(query) ||
      siswa.nisn.toLowerCase().includes(query)
    );

    if (results.length > 0) {
      results.forEach(siswa => {
        const row = `<tr>
          <td>${siswa.no}</td>
          <td>${siswa.nama}</td>
          <td>${siswa.nisn}</td>
          <td style="color: green; font-weight: bold;">${siswa.status}</td>
        </tr>`;
        resultBody.innerHTML += row;
      });
      resultTable.style.display = "table";
    } else {
      notFoundMessage.style.display = "block";
    }
  });
</script>

<p style="margin-top: 30px; font-style: italic; color: gray; text-align: center;">
  Masukkan Nama lengkap atau NISN untuk mengecek status kelulusan Anda. Jika data ditemukan, hasil akan langsung ditampilkan.
</p>

📌 Langkah 4: Simpan & Publikasikan

1. Klik tombol "Publikasikan"
2. Bagikan link postingan ke siswa/ortu

🎯 Tips Tambahan:

1. Ganti data nama/NISN di dalam JavaScript (dataSiswa = [...]). Misalnya : { no: 4, nama: "Dedi Kurniawan", nisn: "5566778899", status: "LULUS" }
2. Jika datanya banyak, gunakan Excel untuk menyalin nama dan NISN, lalu saya bisa bantu ubah jadi format script
3. Bisa disesuaikan untuk jenis pengumuman lainnya: lomba, seleksi, sertifikat, dll.

✅ Contoh Link Hasil:

https://namabloganda.blogspot.com/2025/05/pengumuman-kelulusan.html

https://www.aans.my.id/2025/05/pengumuman-kelulusan.html

🎯 Panduan:

Silakan simak video berikut :