Selamat datang! Pendapatan online, Tetap terhubung untuk mendapatkan semua informasi tentang kerja lepas, SEO, dan pemasaran digital. Info Teknologi-Tetaplah pada itu.
Beranda
Postingan

Tutorial struktur redaksi

Tutorial: Widget Profil Anggota Redaksi (Grid + Popup, 5 Versi)

Tutorial: Widget Profil Anggota Redaksi (Grid + Popup) — Semua Versi

Panduan langkah-demi-langkah: versi dasar, versi lengkap 10 slot, penambahan nomor press & surat tugas, versi pure-CSS (tanpa JS), dan versi final siap pasang. Cocok untuk Blogspot atau situs statis.

Daftar Isi

Pendahuluan singkat

Halaman atau widget profil redaksi penting untuk transparansi, kredibilitas, dan komunikasi dengan pembaca. Tutorial ini menyajikan beberapa pendekatan—dari yang bergantung pada JavaScript sampai versi yang sepenuhnya berbasis CSS—agar Anda dapat memilih sesuai keterbatasan platform (mis. Blogspot).

Versi 1 — Grid dasar + Modal (JS, 1 slot)

Versi awal sederhana: menampilkan satu kartu anggota dan modal popup menggunakan JavaScript. Cocok untuk situs yang mengizinkan JS.

Kode CSS + HTML + JS (contoh minimal)

Salin dan tes pada halaman yang mengizinkan JavaScript.

<!-- Versi 1: Grid dasar + Modal (JS) -->
<style>
/* gaya singkat */
.redaksi-container { margin: 20px 0; }
.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,.08); cursor:pointer; }
.redaksi-card img { width:140px; height:140px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
.modal { display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6); }
.modal-content { background:#fff; margin:8% auto; padding:20px; border-radius:12px; width:90%; max-width:500px; text-align:center; }
.close { position:absolute; top:12px; right:18px; font-size:24px; cursor:pointer; }
</style>

<div class="redaksi-container">
  <h2>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>
  </div>
</div>

<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" style="width:150px;height:150px;border-radius:50%;object-fit:cover">
    <h2>TB. Achmad Ilham Efendi</h2>
    <p>Pemimpin Redaksi</p>
  </div>
</div>

<script>
function openModal(id){ document.getElementById(id).style.display = "block"; }
function closeModal(id){ document.getElementById(id).style.display = "none"; }
/* tutup saat klik di luar */
window.onclick = function(event){
  document.querySelectorAll('.modal').forEach(function(m){
    if (event.target == m) m.style.display = "none";
  });
}
</script>

Versi 2 — Grid 10 Slot (Modal JS)

Perluasan versi 1: menambahkan 10 kartu dan 10 modal (modal1 sampai modal10). Struktur sama, perbanyak elemen.

Catatan: jika template Blogspot Anda memblokir JavaScript di postingan, modal tidak akan berfungsi — lanjut ke versi pure-CSS untuk solusi tanpa JS.

Sketsa struktur (ulang untuk 10 slot)

<!-- struktur ulang untuk banyak anggota -->
<div class="redaksi-grid">
  <div class="redaksi-card" onclick="openModal('modal1')">...</div>
  <div class="redaksi-card" onclick="openModal('modal2')">...</div>
  ...
  <div class="redaksi-card" onclick="openModal('modal10')">...</div>
</div>

<!-- lalu buat modal1 sampai modal10 seperti contoh modal di versi 1 -->

Versi 3 — Tambah Nomor Press & Surat Tugas

Tambahkan informasi Nomor Press, Masa Tugas, dan link Surat Tugas (PDF). Tombol "Lihat Surat Tugas" mengarah ke dokumen resmi.

Contoh isi modal dengan nomor press & tombol surat tugas

<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" style="width:150px;height:150px;border-radius:50%;object-fit:cover">
    <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.</p>
    <a href="LINK_SURAT_TUGAS.pdf" class="btn-surat" target="_blank">📄 Lihat Surat Tugas</a>
  </div>
</div>

Versi 4 — Pure CSS Modal (Checkbox hack) — Cocok untuk Blogspot

Jika Blogspot memblokir JavaScript di postingan, gunakan teknik CSS murni (checkbox hack). Cara kerjanya: tiap kartu adalah <label for="popN"> yang menandai <input type="checkbox" id="popN">. Ketika checkbox aktif (:checked) CSS menampilkan modal.

CSS + HTML (contoh 1 slot)

<style>
/* CSS modal pure */
input[type=checkbox]{ display:none; }
.modal{ display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.6); }
.modal-content{ background:#fff; margin:8% auto; padding:16px; border-radius:10px; width:92%; max-width:420px; text-align:center; position:relative; }
input[type=checkbox]:checked + .modal{ display:block; }
.close-btn{ position:absolute; right:12px; top:8px; font-size:24px; cursor:pointer; }
</style>

<label for="pop1" class="redaksi-card">
  <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Pemimpin Redaksi">
  <h3>TB. Achmad Ilham Efendi</h3>
  <p>Pemimpin Redaksi</p>
</label>
<input type="checkbox" id="pop1">
<div class="modal">
  <div class="modal-content">
    <label for="pop1" class="close-btn">×</label>
    <img src="https://i.imgur.com/gWBHYhx.jpeg" style="width:130px;height:130px;border-radius:50%;object-fit:cover">
    <h2>TB. Achmad Ilham Efendi</h2>
    <p>Nomor Press: 001/JNN/JU-ID/2025</p>
    <a href="LINK_SURAT_TUGAS.pdf" class="btn-surat" target="_blank">📄 Lihat Surat Tugas</a>
  </div>
</div>

Versi Final Lengkap (Pure CSS, 10 Slot) — Siap Pasang

Berikut versi final yang direkomendasikan untuk Blogspot: pure-CSS modal (checkbox), 10 anggota, biodata singkat, nomor press, masa tugas, tombol surat tugas, dan ikon sosial media. Salin seluruh bagian antara komentar <!-- START WIDGET --> dan <!-- END WIDGET --> ke postingan (mode HTML).

KODE SIAP-PASANG: Salin seluruh blok ini ke postingan (mode HTML)

<!-- START WIDGET REDAKSI: Salin seluruh blok ini ke postingan (mode HTML) -->
<style>
  /* Gaya widget (sesuaikan bila perlu) */
  .redaksi-header{ text-align:center; margin-bottom:16px;}
  .redaksi-header img{ max-width:220px; width:48%; height:auto; display:block; margin:8px auto; }
  .redaksi-container{ margin:0 auto 18px; max-width:100%; }
  .redaksi-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
  .redaksi-card{ background:#fff; border-radius:10px; padding:12px; text-align:center; border:1px solid #e7e7e7; box-shadow:0 4px 12px rgba(0,0,0,0.03); cursor:pointer; transition:transform .18s; }
  .redaksi-card:hover{ transform:translateY(-6px); }
  .redaksi-card img{ width:120px;height:120px;border-radius:50%;object-fit:cover;border:2px solid #ddd;margin-bottom:8px; }
  .redaksi-card h3{ margin:6px 0 2px;font-size:15px; }
  .redaksi-card p{ margin:0;color:#777; font-size:13px; }

  input[type=checkbox]{ display:none; }
  .modal{ display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); }
  .modal-content{ background:#fff; margin:8% auto; padding:16px; border-radius:12px; width:92%; max-width:420px; text-align:center; position:relative; }
  .modal-content img.profile{ width:130px; height:130px; border-radius:50%; object-fit:cover; border:3px solid #ccc; margin-bottom:10px; }
  input[type=checkbox]:checked + .modal{ display:block; }
  .close-btn{ position:absolute; right:12px; top:8px; font-size:24px; color:#666; text-decoration:none; }
  .btn-surat{ display:inline-block; margin-top:10px; background:#ff6600; color:#fff; padding:8px 12px; border-radius:6px; text-decoration:none; font-weight:600; }
  .sosmed{ margin-top:10px; display:flex; justify-content:center; gap:10px; font-size:20px; }
  .sosmed a{ text-decoration:none; color:#333; }
  @media (max-width:600px){
    .redaksi-card img{ width:100px;height:100px; }
    .modal-content{ max-width:340px; margin-top:18%; }
  }
</style>

<!-- IDENTITAS WEB HEADER -->
<div class="redaksi-header">
  <h2>Jajaran Redaksi Jakarta Update ID</h2>
  <a href="https://jakartaupdate.my.id/p/iklan" target="_blank" title="Jakarta Update">
    <img src="https://i.imgur.com/OIM2baZ.png" alt="Jakarta Update Logo">
  </a>
  <p style="max-width:680px;margin:8px auto;">Jakarta Update adalah media online seputar Jakarta, mengulas isu kehidupan sosial, hiburan, politik, teknologi, dan kabar dari Nusantara.</p>
  <p style="font-size:14px;color:#777;">📍 Alamat: Jl. Siaga Raya, Pejaten Barat, Pasar Minggu 12510, Jakarta   •   📧 redaksi.jakartaupdate@gmail.com</p>
</div>

<!-- GRID REDAKSI 10 SLOT (PURE-CSS MODAL) -->
<div class="redaksi-container">
  <div class="redaksi-grid">

    <!-- SLOT 1 -->
    <label for="pop1" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="TB. Achmad Ilham Efendi">
      <h3>TB. Achmad Ilham Efendi</h3>
      <p>Pemimpin Redaksi</p>
    </label>
    <input type="checkbox" id="pop1">
    <div class="modal">
      <div class="modal-content">
        <label for="pop1" class="close-btn" title="Tutup">&times;</label>
        <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" 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>Memimpin redaksi dan menentukan arah kebijakan editorial Jakarta Update.</p>
        <a href="#" class="btn-surat" target="_blank">📄 Lihat Surat Tugas</a>
        <div class="sosmed">
          <a href="mailto:redaksi.jakartaupdate@gmail.com" title="Email">📧</a>
          <a href="https://instagram.com/jakartaupdate.id" target="_blank" title="Instagram">📷</a>
          <a href="https://facebook.com/jakartaupdate" target="_blank" title="Facebook">📘</a>
          <a href="https://twitter.com/jakartaupdate" target="_blank" title="Twitter/X">🐦</a>
          <a href="https://wa.me/6281234567890" target="_blank" title="WhatsApp">💬</a>
        </div>
      </div>
    </div>

    <!-- SLOT 2 -->
    <label for="pop2" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Andi Prasetyo">
      <h3>Andi Prasetyo</h3>
      <p>Redaktur Pelaksana</p>
    </label>
    <input type="checkbox" id="pop2">
    <div class="modal"><div class="modal-content">
      <label for="pop2" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Andi Prasetyo">
      <h2>Andi Prasetyo</h2>
      <p><strong>Jabatan:</strong> Redaktur Pelaksana</p>
      <p><strong>Nomor Press:</strong> 002/JNN/JU-ID/2025</p>
      <p><strong>Masa Tugas:</strong> 2025 – 2028</p>
      <p>Mengelola operasional redaksi dan memastikan berita akurat serta sesuai kode etik jurnalistik.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">
        <a href="mailto:redaksi.jakartaupdate@gmail.com">📧</a>
        <a href="https://instagram.com/jakartaupdate.id">📷</a>
        <a href="https://facebook.com/jakartaupdate">📘</a>
        <a href="https://twitter.com/jakartaupdate">🐦</a>
        <a href="https://wa.me/6281234567890">💬</a>
      </div>
    </div></div>

    <!-- SLOT 3 -->
    <label for="pop3" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Siti Rahmawati">
      <h3>Siti Rahmawati</h3>
      <p>Editor</p>
    </label>
    <input type="checkbox" id="pop3">
    <div class="modal"><div class="modal-content">
      <label for="pop3" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Siti Rahmawati">
      <h2>Siti Rahmawati</h2>
      <p><strong>Jabatan:</strong> Editor</p>
      <p><strong>Nomor Press:</strong> 003/JNN/JU-ID/2025</p>
      <p><strong>Masa Tugas:</strong> 2025 – 2028</p>
      <p>Menyunting naskah berita agar sesuai kaidah bahasa, etika jurnalistik, dan SEO.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 4 -->
    <label for="pop4" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Budi Santoso">
      <h3>Budi Santoso</h3>
      <p>Reporter</p>
    </label>
    <input type="checkbox" id="pop4">
    <div class="modal"><div class="modal-content">
      <label for="pop4" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Budi Santoso">
      <h2>Budi Santoso</h2>
      <p><strong>Nomor Press:</strong> 004/JNN/JU-ID/2025</p>
      <p>Meliput isu politik dan hukum.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 5 -->
    <label for="pop5" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Dewi Lestari">
      <h3>Dewi Lestari</h3>
      <p>Reporter</p>
    </label>
    <input type="checkbox" id="pop5">
    <div class="modal"><div class="modal-content">
      <label for="pop5" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Dewi Lestari">
      <h2>Dewi Lestari</h2>
      <p><strong>Nomor Press:</strong> 005/JNN/JU-ID/2025</p>
      <p>Meliput isu sosial, kesehatan, dan pendidikan.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 6 -->
    <label for="pop6" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Agus Wijaya">
      <h3>Agus Wijaya</h3>
      <p>Kontributor</p>
    </label>
    <input type="checkbox" id="pop6">
    <div class="modal"><div class="modal-content">
      <label for="pop6" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Agus Wijaya">
      <h2>Agus Wijaya</h2>
      <p><strong>Nomor Press:</strong> 006/JNN/JU-ID/2025</p>
      <p>Kontributor daerah dan feature story.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 7 -->
    <label for="pop7" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Rina Kurnia">
      <h3>Rina Kurnia</h3>
      <p>Fotografer</p>
    </label>
    <input type="checkbox" id="pop7">
    <div class="modal"><div class="modal-content">
      <label for="pop7" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Rina Kurnia">
      <h2>Rina Kurnia</h2>
      <p><strong>Nomor Press:</strong> 007/JNN/JU-ID/2025</p>
      <p>Fotografer lapangan.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 8 -->
    <label for="pop8" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Fajar Nugroho">
      <h3>Fajar Nugroho</h3>
      <p>Desainer Grafis</p>
    </label>
    <input type="checkbox" id="pop8">
    <div class="modal"><div class="modal-content">
      <label for="pop8" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Fajar Nugroho">
      <h2>Fajar Nugroho</h2>
      <p><strong>Nomor Press:</strong> 008/JNN/JU-ID/2025</p>
      <p>Desain visual, infografis, dan layout konten.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 9 -->
    <label for="pop9" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Muhammad Rizki">
      <h3>Muhammad Rizki</h3>
      <p>IT Support</p>
    </label>
    <input type="checkbox" id="pop9">
    <div class="modal"><div class="modal-content">
      <label for="pop9" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Muhammad Rizki">
      <h2>Muhammad Rizki</h2>
      <p><strong>Nomor Press:</strong> 009/JNN/JU-ID/2025</p>
      <p>Menjaga keamanan website dan dukungan teknis.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

    <!-- SLOT 10 -->
    <label for="pop10" class="redaksi-card">
      <img src="https://i.imgur.com/gWBHYhx.jpeg" alt="Lina Marlina">
      <h3>Lina Marlina</h3>
      <p>Admin Sosmed</p>
    </label>
    <input type="checkbox" id="pop10">
    <div class="modal"><div class="modal-content">
      <label for="pop10" class="close-btn">&times;</label>
      <img src="https://i.imgur.com/gWBHYhx.jpeg" class="profile" alt="Lina Marlina">
      <h2>Lina Marlina</h2>
      <p><strong>Nomor Press:</strong> 010/JNN/JU-ID/2025</p>
      <p>Mengelola akun media sosial dan interaksi pembaca.</p>
      <a href="#" class="btn-surat">📄 Lihat Surat Tugas</a>
      <div class="sosmed">...</div>
    </div></div>

  </div> <!-- end grid -->
</div> <!-- end container -->

<!-- Kontak Redaksi -->
<div style="margin-top:26px;font-size:14px;line-height:1.6;">
  <p>✉️ Untuk pengiriman artikel, opini, foto, atau informasi menarik, silakan hubungi kami melalui email atau DM Instagram resmi.</p>
  <p><strong>Email:</strong> <a href="mailto:redaksi.jakartaupdate@gmail.com">redaksi.jakartaupdate@gmail.com</a></p>
  <p><strong>Facebook:</strong> <a href="https://facebook.com/jakartaupdate.id">@jakartaupdate.id</a></p>
  <p><strong>Instagram:</strong> <a href="https://instagram.com/jakartaupdate.id">@jakartaupdate.id</a></p>
  <p><strong>Twitter (X):</strong> <a href="https://twitter.com/jakartaupdate24">@jakartaupdate24</a></p>
  <p><strong>YouTube:</strong> <a href="https://youtube.com/@jakartaupdatetv">@jakartaupdatetv</a></p>
</div>

<!-- END WIDGET REDAKSI -->

Catatan & tips

  • Ganti semua URL gambar placeholder (https://i.imgur.com/gWBHYhx.jpeg) dengan URL foto asli yang sudah Anda miliki izin publikasinya.
  • Isi setiap href="#" pada tombol "Lihat Surat Tugas" dengan link PDF surat tugas yang valid (mis. Google Drive/Dropbox/public URL).
  • Jika Blogspot memodifikasi atau menghapus input[type=checkbox], gunakan halaman statis/gadget HTML atau gunakan versi JavaScript (jika diperbolehkan oleh template).
  • Tambahkan rel="noopener noreferrer" pada semua target="_blank" bila diperlukan untuk keamanan.
  • Pertahankan atribut alt pada gambar demi aksesibilitas dan SEO.

Penutup

Artikel ini menyatukan seluruh versi kode untuk membuat widget profil anggota redaksi — dari versi paling sederhana sampai versi final yang direkomendasikan untuk Blogspot. Silakan gunakan, modifikasi, dan integrasikan sesuai kebutuhan redaksi Anda.

Jika Anda ingin, saya dapat mengganti foto placeholder, mengisi data (nama & nomor press), atau membuat versi JavaScript interaktif. Beri daftar data yang ingin diisi dan saya bantu susun kodenya.

Posting Komentar

© ‧ Tutorial Blog Tuan. All rights reserved. Premium By Tuanbagues