Judul dua
Ini postingan judul kedua
Bertindaklah sebagai Senior Front-End Developer dan Pakar SEO. Saya ingin Anda membuatkan kode kerangka (template) Blogger (XML) yang dioptimalkan untuk Web App Islami.
Spesifikasi Utama:
1 . Desain Sistem: Terapkan Material Design 3 (M3) dengan skema warna yang menenangkan (nuansa islami yang bersih). Gunakan font sans-serif modern.
2 . Layout Responsif:
Header: Fixed/Sticky dengan branding yang jelas.
Sidebar: Harus muncul secara dinamis hanya pada layar lebar (Desktop/Tablet) dan disembunyikan pada mobile.
Post List: Pada desktop, tampilkan dalam bentuk list sederhana (grid 2 kolom).
Footer: Informatif dengan link internal dan credit.
3 . Integrasi Tool Islami (Grid System):
Buat modul grid menu untuk fitur: Jadwal Sholat, Doa, Dzikir, Al-Quran, Kalkulator, Ebook Kitab, dsb.
Teknis: Modul ini harus ditempatkan dalam gadget HTML/JavaScript Blogger, namun wajib menggunakan logika conditional tag agar hanya muncul di halaman beranda (<b:if cond='data:view.isHomepage'>).
4 . Optimasi & Performa:
SEO: Gunakan struktur tag header (H1, H2, H3) yang benar, meta tags yang tepat, dan loading yang cepat.
Keamanan: Pastikan kode HTML/JS untuk tool islami tersebut terisolasi agar tidak mengganggu layout utama.
Mohon berikan struktur kode XML Blogger yang bersih, komentari bagian-bagian penting, dan sertakan CSS kustom untuk mendukung tampilan Material Design 3 tersebut.
Tentu, ini adalah versi prompt yang telah dioptimalkan agar lebih sistematis, terukur, dan memberikan instruksi teknis yang lebih eksplisit bagi model AI.
Pengembangan prompt ini difokuskan pada pemberian peran yang lebih spesifik, pembagian modul yang jelas, serta standar output yang diharapkan, sehingga meminimalisir kemungkinan AI memberikan jawaban yang terlalu umum.
Versi Prompt yang Dioptimalkan
Role: Bertindaklah sebagai Senior Front-End Developer yang ahli dalam pengembangan tema Blogger (XML) dan pakar SEO teknis.
Tugas: Buatlah kerangka (skeleton) template Blogger (XML) yang dioptimalkan untuk performa tinggi, SEO-friendly, dan mengusung estetika Material Design 3 (M3) untuk sebuah Web App Islami.
Spesifikasi Teknis:
Arsitektur Desain (UI/UX):
Visual Style: Implementasikan prinsip Material Design 3. Gunakan palet warna Earth-tone/Islamic (seperti soft sage, cream, dan dark teal). Font: Gunakan Google Fonts (Inter atau Plus Jakarta Sans).
Layout:
Header: Sticky/Fixed dengan integrasi logo dan menu navigasi.
Sidebar: Gunakan CSS media query agar hidden pada mobile dan visible pada layar desktop.
Post List: Grid 2 kolom dengan card-based layout yang rapi.
Footer: Clean footer dengan link internal dan credit section.
Modul Integrasi (Fitur Islami):
Buat struktur kode untuk "Islamic Dashboard" (Jadwal Sholat, Doa, Al-Quran, dll) dalam bentuk Grid Menu.
Implementasi: Kode harus ditempatkan sebagai elemen yang dapat dimasukkan ke Gadget HTML/JavaScript Blogger, namun gunakan Blogger Conditional Tags (<b:if cond='data:view.isHomepage'>) agar modul ini hanya merender di halaman beranda.
Standar SEO & Performa:
Terapkan Semantic HTML5 (Header, Main, Section, Aside, Footer).
Gunakan struktur heading (H1 untuk judul postingan, H2 untuk sub-judul, dsb) secara hierarkis.
Pastikan CSS dioptimalkan (gunakan inline atau minified jika perlu) untuk mendapatkan skor Core Web Vitals yang baik.
Output yang Diharapkan:
Struktur XML: Sertakan kerangka utama <html>, <head>, dan <body> yang diperlukan untuk tema Blogger.
CSS Terintegrasi: Berikan blok <b:skin> atau <style> yang mengandung desain Material Design 3 kustom.
Dokumentasi Kode: Berikan komentar (comment) pada bagian kode yang krusial untuk mempermudah saya melakukan kustomisasi di masa depan.
Panduan Instalasi Singkat: Berikan tips singkat mengenai bagian mana yang harus saya masukkan ke dalam Gadget agar integrasi modul islami berjalan lancar.
Komentar ()