PRISM TEMPLATE

The Ultimate Cheat Sheet & Style Guide

---

1. Verdict & Rating Boxes

Berikut adalah cara memunculkan kotak penilaian untuk artikel review / rekap.

Auto Verdict Box (Untuk Rekap)

Fitur ini otomatis. Kamu tidak perlu masuk ke HTML View. Cukup ketik kode ini di mode Compose View (Tampilan Menulis) di baris baru:

• Ketik [VERDICT: MUSTPLAY] (Biru) -> Sangat direkomendasikan
• Ketik [VERDICT: YES] (Hijau) -> Direkomendasikan, dengan sedikit catatan
• Ketik [VERDICT: NEUTRAL] (Oranye) -> Netral / Biasa aja / Niche
• Ketik [VERDICT: WAIT] (Ungu) -> Menarik, tapi tunggu update / diskon
• Ketik [VERDICT: NO] (Merah) -> Tidak direkomendasikan / Skip

Preview Hasilnya:

[VERDICT: MUSTPLAY] [VERDICT: YES] [VERDICT: NEUTRAL] [VERDICT: WAIT] [VERDICT: NO]

Section Score Box

Digunakan sebagai penunjuk skor per kategori di dalam artikel. Tulis via HTML View:

<div class="section-score-box">
  <div class="section-score-label">GRAPHICS & PERFORMANCE SCORE</div>
  <div class="section-score-value">8.5</div>
</div>

Skill / Pts Bars

Digunakan untuk menilai aspek spesifik (cerita, musik, dsb) dengan bar animasi.

<div class="wrap"><p>Nama Penilaian</p><span class="sogood">90 pts</span></div>

Pilihan Class: sogood (100%), quitegood (80%), hmm (60%), quitebad (40%), sobad (20%).

2. Interactive Buttons & Store Links

Tombol Animasi (Efek Putar/Glow)

Tombol dengan efek glow yang berputar di belakangnya saat di-hover. Tulis via HTML View:

<anibuttonred>Beli di Steam</anibuttonred>
<anibuttonblue>Beli di Epic</anibuttonblue>
<anibuttongreen>Download Gratis</anibuttongreen>
<anibuttonyellow>Wishlist</anibuttonyellow>
<anibuttonorange>Pesan Sekarang</anibuttonorange>

Tombol Download 3D

Tombol unik yang berputar 3D saat di-hover. Selalu menampilkan teks "Download Here".

<downloadbutton><a href="URL_TUJUAN"></a></downloadbutton>

Store Card (Rekomendasi Link Beli)

Card panjang yang elegan untuk menaruh link menuju toko game/aplikasi.

Monster Hunter Wilds

Available on Steam

Epic Games

<a href="URL_STORE" class="store-card">
  <img src="URL_GAMBAR" class="store-cover">
  <div class="store-info">
    <div class="store-title">Judul Game</div>
    <div class="store-sub">Tersedia di Store</div>
  </div>
  <div class="store-btn epic">Epic Games</div>
</a>

Ubah tulisan class epic pada tombol menjadi: gog (Ungu), play (Hijau Xbox/Play), apple (Biru), atau hapus saja untuk warna abu-abu default.

3. Content Boxes & Accordions

TL;DR Box

Kotak biru dengan ikon lampu untuk ringkasan di awal artikel.

<div class="tldr-box">
  <h2>TL;DR</h2>
  <p>Isi ringkasanmu di sini...</p>
</div>

Info Box Details (Dengan Ikon)

Gunakan class info-box untuk membuat spoiler yang dilengkapi ikon info (i) biru dan tombol kecil "Click to expand/Close".

Catatan Penting (Klik untuk baca)

Ini adalah konten tambahan yang hanya muncul kalau diklik. Bagus untuk info teknis yang panjang.

<details class="info-box">
  <summary>Judul Catatan</summary>
  <div class="info-box-content">Isi catatan ada di sini.</div>
</details>

Accordion / Spoiler Biasa (Multi Warna)

Fitur buka-tutup standar dengan variasi garis warna di sebelah kiri. Cocok untuk menyembunyikan spesifikasi PC atau lirik lagu.

Style 1 (Biru)

Konten di sini.

Style 2 (Merah)

Konten di sini.

Style 3 (Kuning)

Konten di sini.

Style 6 (Dark Navy)

Konten di sini.

Style 10 (Hijau)

Konten di sini.

Style 14 (Ungu)

Konten di sini.

Style 16 (Abu-abu / Muted)

Konten di sini.

<details class="style1">
  <summary>Judul Accordion</summary>
  <div class="content">Isinya taruh sini.</div>
</details>

4. Typography & Standard HTML Elements

Elemen HTML standar yang sudah di-custom otomatis oleh template Prism.

Ini adalah H2 (Heading Utama)

Ini adalah H3 (Subheading Italic)

Ini adalah H4 (Minor Heading Monospace)

Ini adalah H5 (Paragraph Header)

Auto-Italic Em Dash: Cukup ketik tanda em dash (—) di teksmu melalui editor. —otomatis kata-katanya menjadi miring seperti ini sampai bertemu titik.

Label Link Style: Jika kamu memasukkan link yang menuju ke label Blogger, otomatis bentuknya jadi seperti ini: Games Media.

Ini adalah Blockquote. Gunakan fitur Quote ("") bawaan Blogger. Cocok untuk mengutip perkataan orang atau menonjolkan ringkasan cerita. Desainnya kuning stabilo dengan ikon kutip air di pojok kanan atas.

List / Daftar:

• Item pertama list unordered
• Item kedua yang punya margin rapi

Tabel Standar:

Jika kamu membuat tabel dari MS Word atau editor HTML tanpa tulisan "TOTAL SCORE", bentuknya akan rapi seperti ini:

Karakter	Senjata
Geralt	Silver Sword
Ciri	Magic

Photo Credit

Untuk menaruh sumber gambar (caption) di bawah gambar agar rapi.

<div class="photo-credit">Image via Steam / Capcom</div>

5. Interactive Chat Logs (Forum Style)

Buat percakapan ala Discord. Tulis via HTML View:

<div class="chat-log">
  <div class="cl-row">
      <div class="cl-avatar adli-pic"></div>
      <div class="cl-body">
          <div class="cl-header">
              <span class="cl-name adli">Adli_HM</span>
              <span class="cl-time">Waktu</span>
          </div>
          <div class="cl-msg"><p>Isi pesan...</p></div>
      </div>
  </div>
</div>

Catatan: Gunakan class adli (Warna Biru/Kuning) atau guest (Warna Merah) untuk nama user. Gunakan class adli-pic pada cl-avatar untuk otomatis memunculkan foto profilmu.

6. Media Layouts

Custom Image Grid (Galeri Sejajar)

Gunakan untuk menjejerkan 2 gambar/embed agar sejajar di PC, dan otomatis menjadi atas-bawah di HP.

<div class="my-custom-grid">
  <img src="GAMBAR_1">
  <img src="GAMBAR_2">
</div>

Video Gallery (Pop-up Lightbox)

Buat thumbnail video dari YouTube yang jika diklik akan memunculkan Pop-up teater keren.

<div class="video-gallery">
  <div class="gallery-item">
    <a href="LINK_YOUTUBE_LENGKAP" class="vimeo-popup"></a>
    <img src="LINK_GAMBAR_THUMBNAIL">
    <div class="gallery-item-caption">
      <h3>Judul Video</h3>
      <p>Deskripsi singkat</p>
    </div>
  </div>
</div>