Widget untuk Membuat Profil Anggota Redaksi — Tutorial Lengkap
Pendahuluan
Tutorial ini merangkum seluruh proses pembuatan widget profil anggota redaksi yang kami diskusikan sebelumnya—dirapikan menjadi panduan terstruktur agar mudah dipahami dan langsung dapat dipasang di Blogspot atau platform situs lain. Anda akan mendapatkan:
- Kode HTML + CSS siap-pasang (tanpa JavaScript) dengan mekanisme popup (pure CSS checkbox hack).
- Biodata setiap anggota: jabatan, nomor press, masa tugas, tugas & fungsi singkat.
- Tombol “Lihat Surat Tugas”, ikon media sosial, serta blok identitas & kontak redaksi.
Kenapa Perlu Halaman Redaksi?
Halaman redaksi meningkatkan transparency, kredibilitas, dan memudahkan pembaca menghubungi kontributor. Untuk media online, menampilkan struktur redaksi juga membantu:
- Menguatkan kepercayaan pembaca.
- Mempermudah verifikasi sumber saat ada klaim/kesalahan.
- Memberi akses untuk pengiriman artikel, foto, atau rilis pers (melalui kontak terverifikasi).
SEO Singkat & robots.txt
Sebelum publish, pastikan situs Anda dapat diindeks mesin pencari sesuai tujuan. Contoh catatan robots.txt yang sederhana (boleh disesuaikan):
# contoh sederhana robots.txt
User-agent: *
Disallow:
Sitemap: https://jakartaupdate.my.id/sitemap.xml
Catatan: robots.txt sebaiknya dikelola hati-hati. Jika Anda mengizinkan semua, gunakan Disallow: kosong. Jika ingin mengecualikan path tertentu (mis. /private/), tambahkan baris Disallow: /private/.
Struktur Widget — Grid & Modal (Penjelasan singkat)
Konsep yang digunakan di sini:
- Grid menampilkan foto & nama anggota.
- Modal popup menampilkan biodata lengkap ketika pembaca mengklik anggota. Kita gunakan pendekatan checkbox hack agar tidak bergantung pada JavaScript (lebih kompatibel di Blogspot).
- Di dalam modal tersedia tombol surat tugas (link ke file PDF), serta ikon media sosial dan email.
Kode Lengkap Siap Pasang (10 anggota, pure-CSS)
Di bawah ini adalah **kode lengkap**. Silakan salin seluruh kode (bagian <section id="widget-redaksi"> sampai akhir) ke postingan Blogspot (mode HTML) atau ke halaman statis. Ganti foto, nama, nomor press, masa tugas, dan link surat tugas sesuai data Anda.
Jajaran Redaksi Jakarta Update ID
Jakarta Update adalah media online seputar Jakarta, mengulas isu kehidupan sosial, hiburan, politik, teknologi, dan kabar terkini dari Jakarta hingga Nusantara.
📍 Alamat: Jl. Siaga Raya, Pejaten Barat, Pasar Minggu 12510, Jakarta — 📧 redaksi.jakartaupdate@gmail.com
Blok Kontak Redaksi (letakkan di bawah widget)
✉️ Untuk pengiriman artikel, opini, foto, atau informasi menarik, silakan hubungi kami melalui email atau DM Instagram resmi.
📧 Email: redaksi.jakartaupdate@gmail.com
📘 Facebook: @jakartaupdate.id
📷 Instagram: @jakartaupdate.id
🐦 Twitter (X): @jakartaupdate24
▶️ YouTube: @jakartaupdatetv
Catatan Penggunaan & Penutup
Tips cepat sebelum publish:
- Ganti foto placeholder (https://i.imgur.com/gWBHYhx.jpeg) dengan foto asli setiap anggota.
- Perbarui link
href="#"pada tombol "Lihat Surat Tugas" ke file PDF surat tugas yang valid (atau ke penyimpanan drive/internal). - Jika Anda ingin popup ditutup saat klik luar modal, gunakan versi JavaScript — namun untuk kompatibilitas Blogspot, versi pure-CSS ini umumnya cukup.
- Tambahkan
rel="noopener noreferrer"ketarget="_blank"link eksternal bila perlu.
Catatan hukum & etika: pastikan Anda memiliki izin publikasi foto karyawan/kontributor; bila menerima kiriman dari publik, cantumkan sumber dan pastikan tidak melanggar hak cipta.
Butuh penyesuaian?
Kalau mau, saya bisa:
- Mengganti foto default ke URL yang Anda berikan.
- Mengisi nama & nomor press sesuai data Anda.
- Menghasilkan versi JavaScript (modal lebih interaktif) jika Anda mengizinkan JS di template.
Artikel dibuat berdasarkan rangkuman percakapan dan disesuaikan menjadi tutorial terstruktur. Semoga membantu — selamat publish!