PRISM Cheat Sheet: Panduan Style & Komponen
Halo Adli! Simpan artikel ini sebagai draf. Kapan pun kamu lupa cara memanggil elemen tertentu (seperti kotak skor, tombol, tabel API, atau galeri video), kamu tinggal buka artikel ini di mode HTML dan copy-paste kodenya ke artikel review terbarumu.
TL;DR (Kotak Kesimpulan)
Cara Pakai: Gunakan tag <div class="tldr-box">. Kotak ini sempurna ditaruh di awal artikel buat ngerangkum inti review bagi pembaca yang malas baca panjang lebar.
Heading 3: Sub-Topik & Pull-Quote
Cara Pakai: Gunakan tag <h3>Judul Kamu</h3>. Desainnya punya garis stabilo jasmine di kiri dan teksnya italic. Cocok banget buat misahin sub-bab (misal: "Kualitas Grafis") atau meng-highlight kalimat kutipan penting.
Heading 4: Inline Callout / Pemisah Kecil
Cara Pakai: Gunakan tag <h4>Spesifikasi Minimum</h4>. Desainnya kapital kecil dengan garis memanjang di kanannya. Cocok buat judul spesifikasi teknis atau rincian patch.
Blockquote Stabilo: Cara pakainya cukup masukkan teks ke dalam tag <blockquote>. Visualnya berupa kotak kuning dengan ikon tanda kutip transparan besar. Pakai ini untuk ngutip ucapan developer atau dialog epik dari dalam game!
Spoiler & Accordion
Spoiler Box Standar (Klik untuk buka)
<details class="info-box"> lalu letakkan judul di <summary> dan isi rahasianya di <div class="info-box-content">. Fitur ini wajib dipake buat nyembunyiin spoiler cerita atau spesifikasi PC.
Accordion Varian Warna (Klik untuk buka)
<details class="style1"> dan letakkan isinya di dalam <div class="content">. Kamu bisa ganti angka di class-nya untuk mengubah warna garis samping:
style1= Birustyle2= Merahstyle3= Kuningstyle6= Hitam/Gelap (Tema)style10= Hijaustyle14= Ungustyle16= Abu-abu (Muted)
Media: Gambar & Video
<div class="header-image-wrap"> dan letakkan <div class="photo-credit">Teks Sumber</div> tepat di bawah gambar untuk memberi kredit. Desain ini cocok untuk gambar paling atas artikel. (Akan ter-generate otomatis jika kamu mengambil dari halaman Admin Fetcher).
Video Gallery (GLightbox)
Kumpulan video yang kalau diklik bakal muncul popup lightbox mulus. Cara Pakai: Bungkus dengan <div class="video-gallery">. Jangan lupa tambahkan class vimeo-popup pada tag link YouTube-nya beserta timestamp &t= atau &start= jika ingin video mulai di detik tertentu.
Sistem Skor & Rating
1. Bar Skill / Progress
Visual indikator (bar) untuk breakdown nilai. Ubah warna bar dengan mengganti class: sogood (biru), quitegood (hijau), hmm (kuning), quitebad (oranye), atau sobad (merah). (Ingat: Kalau kamu pakai format ini, Badge Skor 3D bakal muncul nempel di atas Bar!).
Graphics
100 pts2. Section Score Box
Cara Pakai: Bikin <div class="section-score-box">. Ini dipake kalau kamu mau kasih nilai sementara persis di akhir pembahasan satu topik.
3. Tabel Sakti (Penentu Auto-Badge Universal)
PENTING: Gunakan class adli-rating-table pada tag table. Pastikan ada baris bertuliskan "TOTAL SCORE" atau "TOTAL SKOR". Biarkan kolom td sebelahnya kosong. Script Javascript kamu bakal otomatis ngitung rata-rata dan manculin Badge Skor 3D rata kanan pada tabel ini, serta nampil di thumbnail artikel Homepage!
| Kriteria Penilaian | Skor |
|---|---|
|
1. Story & Narrative
|
9.0 |
|
2. Visual & Audio
|
8.5 |
| TOTAL SCORE |
Tombol Interaktif & Monetisasi
1. Animated Hover Buttons
Gunakan tag <anibuttonred>, <anibuttonblue>, dll. Ada 5 warna: red, blue, yellow, orange, green.
2. 3D Download Button
Tombol dengan efek putar (flip) 3D. Kosongkan teks di dalam tag <a>. Cukup masukkan linknya di atribut href.
3. Store Card (Manual)
Ubah warna tombol dengan mengganti class epic menjadi gog, play, atau apple.
Hidden Meta & Sidebar Injections
Kode di bawah ini TIDAK AKAN MUNCUL di dalam badan artikel, tapi script PRISM akan membacanya dan menyuntikkannya ke elemen-elemen UI situsmu (seperti Sidebar kanan atau Menu Melayang).
1. Custom Meta Description (SEO & Deskripsi Kartu)
Jika fitur meta deskripsi bawaan Blogger rusak, gunakan div ini. Script akan menarik teks di dalam data-desc untuk ditampilkan di kartu artikel (Homepage) dan di bawah judul (Halaman Artikel).
<div id="post-meta-desc" data-desc="Tulis deskripsi singkat dan menarik dari review kamu di sini. Maksimal 150-160 karakter agar tidak terpotong." style="display:none;"></div>
2. Injeksi Sidebar Media (Gameplay & Video Review)
Isi link YouTube/Tiktok/IG kamu di sini. Kotak "Watch My Gameplay" dan "Watch Video Version" di sidebar kanan akan otomatis menyala dan menampilkan link tersebut!
<div id="hidden-gameplay-data" style="display:none;" data-youtube="LINK_YOUTUBE_VOD_GAMEPLAY_KAMU"></div>
<div id="hidden-video-data" style="display:none;"
data-youtube="LINK_YT_REVIEW"
data-instagram="LINK_IG_REELS"
data-tiktok="LINK_TIKTOK"
data-bilibili="LINK_BILIBILI">
</div>
Auto-Fetch API Templates
Ini adalah sistem penarik data otomatis. PASTIKAN mem-paste seluruh blok HTML (div trigger + table) untuk masing-masing API agar berfungsi.
1. GAME API (Steam Primary + RAWG Fallback)
Cara Pakai: Cukup isi data-appid (jika ada di Steam) atau data-title. Script akan mencari ke Steam terlebih dahulu. Jika gagal/tidak ketemu, script otomatis mencari di RAWG.io. Kredit API di bawah tabel akan menyesuaikan secara dinamis!
2. MUSIC API (iTunes Search)
Cara Pakai: Cukup isi data-title, data-artist, dan pilih data-type ("track" atau "album"). API akan menarik cover, genre, dan memunculkan Apple Music Preview (30 detik). Kamu juga bisa embed Spotify & YouTube manual di tag data-spotify dan data-youtube.
3. MEDIA API (TMDB)
Cara Pakai: Cukup isi data-title dan data-year (opsional tapi disarankan agar lebih akurat). API akan mencari otomatis, mengenali apakah itu Film atau Serial TV, lalu menarik Poster, Pemeran, Sutradara, Skor Popularitas, dan Sinopsis.
Early Access / Kunci Rahasia via Firestore
Fitur untuk mengunci artikel (paywall/embargo) dan memanggil kuncinya ke Firestore (lebih aman dari metode Base64).
Cara Kerja:
1. Buka halaman artikel HTML ini.
2. Tentukan sebuah ID unik di atribut data-article-id (Misal: review-gta6).
3. Atur data-release untuk tanggal dan waktu rilis publik otomatis terbuka.
4. Buka Firebase > Firestore > Collection early_access_keys.
5. Buat dokumen dengan ID: [data-article-id]_[password]. (Contoh: Jika ID artikelnya review-gta6 dan passwordnya mabar123, maka nama dokumen di Firestore adalah review-gta6_mabar123).
🔥 Konten Rahasia / Early Access 🔥
Teks yang ditaruh di dalam tag <div class="locked-content"> ini baru bisa dibaca pembaca reguler kalau waktu rilis sudah terlewati, atau kalau mereka memasukkan password khusus yang kamu bagikan di Discord/Membership yang tersambung ke database Firestore!
