Basic Design Member Card

ANDI TECH

XXXX-001-CYAN

RED WARRIOR

XXXX-002-MAGM

VIP PRESTIGE

XXXX-003-GOLD

LOVE USER

XXXX-004-GLAS

HEART PROTOCOL

XXXX-005-TOXC

Berikut adalah kode yang sudah dioptimalkan untuk Blogger (masukkan di mode Tampilan HTML saat menulis postingan):

---

Kode HTML & CSS (Khusus Postingan Blogger)

HTML

<div class="card-section-wrapper">
  
  <style>
    /* CSS ini hanya akan berefek pada elemen di dalam .card-section-wrapper */
    .card-section-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      padding: 20px;
      background: #0f1015; /* Background area kartu saja */
      border-radius: 15px;
      font-family: 'Segoe UI', sans-serif;
    }

    /* Base Card Style (Ukuran Fisik) */
    .member-card {
      width: 320px;
      height: 200px;
      border-radius: 15px;
      position: relative;
      padding: 15px;
      color: white;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: 0.3s;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    }

    .member-card:hover { transform: translateY(-5px); }

    .card-chip { width: 40px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, #e0e0e0, #888); }
    .card-name { font-weight: bold; font-size: 1.2rem; margin-top: 5px; }
    .card-id { font-family: monospace; letter-spacing: 2px; opacity: 0.8; }

    /* --- 5 VARIASI STYLE --- */

    /* 1. Neon Cyan (Cyberpunk) */
    .style-cyan { 
        background: linear-gradient(135deg, #000428, #004e92);
        box-shadow: 0 0 15px rgba(0, 242, 255, 0.4);
        border-color: #00f2ff;
    }

    /* 2. Magma / Red (Gamer Edition) */
    .style-red { 
        background: linear-gradient(45deg, #870000, #190a05); 
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
        border-color: #ff4b2b;
    }

    /* 3. Gold / VIP (Luxury) */
    .style-gold { 
        background: linear-gradient(135deg, #1a1a1a, #434343); 
        border-color: #ffd700;
    }
    .style-gold .card-name { color: #ffd700; }

    /* 4. Glassmorphism (Minimalist) */
    .style-glass { 
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
    }

    /* 5. Toxic Green (Hacker style) */
    .style-green { 
        background: black; 
        border: 1px solid #39ff14;
        box-shadow: inset 0 0 10px #39ff14;
    }
    .style-green .card-id { color: #39ff14; }

  </style>

  <div class="member-card style-cyan">
    <div class="card-chip"></div>
    <div class="card-name">ANDI TECH</div>
    <div class="card-id">XXXX-001-CYAN</div>
  </div>

  <div class="member-card style-red">
    <div class="card-chip" style="background: #555;"></div>
    <div class="card-name">RED WARRIOR</div>
    <div class="card-id">XXXX-002-MAGM</div>
  </div>

  <div class="member-card style-gold">
    <div class="card-chip" style="background: #ffd700;"></div>
    <div class="card-name">VIP PRESTIGE</div>
    <div class="card-id">XXXX-003-GOLD</div>
  </div>

  <div class="member-card style-glass">
    <div class="card-chip"></div>
    <div class="card-name">LOVE USER</div>
    <div class="card-id">XXXX-004-GLAS</div>
  </div>

  <div class="member-card style-green">
    <div class="card-chip" style="background: #333;"></div>
    <div class="card-name">HEART PROTOCOL</div>
    <div class="card-id">XXXX-005-TOXC</div>
  </div>

</div>

---

Mengapa cara ini aman untuk Blogger?

1. Wrapper Khusus (.card-section-wrapper): Semua gaya dibungkus di dalam kelas ini. Artinya, jika ada tag div di luar kontainer ini, ia tidak akan ikut berubah warnanya.

2. Internal Styling: Dengan meletakkan tag <style> langsung di dalam body post, Blogger hanya akan memprosesnya saat artikel tersebut dibuka.

3. Flexbox: Saya menggunakan display: flex dan flex-wrap: wrap. Ini sangat penting agar kartu-kartu tersebut otomatis tersusun ke bawah jika dibuka di HP (responsif).

Cara Pakai di Blogger:

1. Buka dashboard Blogger > Postingan Baru.

2. Ubah mode penulisan dari "Tampilan Menulis" ke "Tampilan HTML" (ikon pensil di kiri atas).

3. Copy-paste seluruh kode di atas.

4. Klik Pratinjau untuk melihat hasilnya.

Apakah kamu ingin saya menambahkan efek animasi berbeda untuk masing-masing kartu (misal: satu berkedip, satu lagi berputar)?