Widget untuk Membuat Profil Anggota Redaksi

Widget untuk Membuat Profil Anggota Redaksi (Lengkap dengan Popup & Media Sosial)

Setiap media online biasanya memiliki halaman khusus untuk memperkenalkan jajaran redaksi. Hal ini penting agar pembaca mengetahui siapa saja yang terlibat dalam penyusunan berita, sekaligus sebagai bentuk transparansi dan profesionalisme. Artikel ini akan membahas cara membuat widget profil anggota redaksi yang responsif, dilengkapi popup biodata, nomor press, masa tugas, serta tautan sosial media.

1. Struktur Dasar HTML & Grid

Kita akan menggunakan sistem grid sederhana agar foto dan nama redaksi tampil rapi, baik di desktop maupun mobile.

<div class="redaksi-grid">
  <div class="redaksi-card" onclick="openModal('modal1')">
    <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Pemimpin Redaksi">
    <h3>TB. Achmad Ilham Efendi</h3>
    <p>Pemimpin Redaksi</p>
  </div>
</div>

2. CSS untuk Tampilan Grid

 .redaksi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}
.redaksi-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}
.redaksi-card:hover {
  transform: translateY(-5px);
} 

3. Modal Popup untuk Biodata

Setiap anggota redaksi bisa memiliki popup yang menampilkan biodata lengkap. Gunakan struktur modal berikut:

<div id="modal1" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal('modal1')">×</span>
    <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Pemimpin Redaksi">
    <h2>TB. Achmad Ilham Efendi</h2>
    <p><strong>Jabatan:</strong> Pemimpin Redaksi</p>
    <p><strong>Nomor Press:</strong> 001/JNN/JU-ID/2025</p>
    <p><strong>Masa Tugas:</strong> 2025 – 2028</p>
    <p>Pendiri sekaligus pemimpin Jakarta Update. 
    Memimpin jalannya redaksi dengan fokus pada isu nasional, sosial, dan politik.</p>
    <a href="#" target="_blank" class="btn-surat">📄 Lihat Surat Tugas</a>
  </div>
</div>

4. Menambahkan Media Sosial

Untuk memperkuat identitas redaksi, kita tambahkan ikon sosial media. Contohnya menggunakan font-awesome:

<div class="social-links">
  <a href="mailto:redaksi.jakartaupdate@gmail.com">📧 Email</a> |
  <a href="https://facebook.com/jakartaupdate.id" target="_blank">📘 Facebook</a> |
  <a href="https://instagram.com/jakartaupdate.id" target="_blank">📷 Instagram</a> |
  <a href="https://twitter.com/jakartaupdate24" target="_blank">🐦 Twitter</a> |
  <a href="https://youtube.com/@jakartaupdatetv" target="_blank">▶️ YouTube</a>
</div>

5. Contoh Lengkap Widget Redaksi

Berikut contoh lengkap dengan 10 anggota redaksi, popup biodata, nomor press, masa tugas, dan sosial media:

<!-- Tempel di postingan Blogspot -->
<div class="redaksi-container">
  <h2>Jajaran Redaksi Jakarta Update</h2>
  <div class="redaksi-grid">
    <div class="redaksi-card" onclick="openModal('modal1')">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Pemimpin Redaksi">
      <h3>TB. Achmad Ilham Efendi</h3>
      <p>Pemimpin Redaksi</p>
    </div>
    <!-- Tambahkan slot anggota lain -->
  </div>
</div> 

6. Penutup

Dengan widget ini, halaman redaksi menjadi lebih interaktif, transparan, dan profesional. Selain itu, adanya popup biodata dan tautan sosial media akan memudahkan pembaca berinteraksi dengan tim redaksi.

💡 Tips: Pastikan setiap modal diberi ID unik (modal1, modal2, modal3...) agar tidak bentrok.