Interactive Documentation and Digital Content Framework for hanhaoyu.com

Selamat datang, Gaes! Artikel ini khusus ngebahas 10 fitur baru yang lahir dari kombinasi kreatif code bawaan websiteku. Semua bisa langsung copy-paste ke HTML view post kamu. Nggak perlu coding dari nol, tinggal remix aja!

Daftar Isi

Tau nggak sih, sebenernya komponen-komponen yang udah ada di website ini bisa dikombinasikan jadi fitur baru yang lebih keren dan fungsional? Misalnya, tabs digabung sama accordion, atau alert di dalam spoiler, dan masih banyak lagi. Di artikel ini aku bakal kasih tau 10 variasi fitur baru yang bisa langsung kamu pakai!

"Kreativitas bukan soal bikin dari nol — tapi soal ngeremix yang udah ada jadi sesuatu yang lebih keren."

Fitur #1 — Tabbed Alert Box 🔔

Apa Ini?

Bayangin kamu punya beberapa jenis pesan penting — info, warning, success, error — tapi nggak mau nge-stack semua ke bawah dan bikin artikel jadi panjang banget. Solusinya: Tabbed Alert Box! Ini kombinasi antara komponen tabs + berbagai varian alert, sehingga user bisa milih sendiri mau liat pesan yang mana.

Cocok banget buat dokumentasi teknis, panduan multi-kondisi, atau halaman FAQ yang punya banyak tipe peringatan berbeda.

Demo Langsung

Info! Ini adalah pesan informasi penting. Pastikan kamu baca sebelum lanjut ke langkah berikutnya ya!

Warning! Hati-hati! Kalau kamu salah langkah di sini, bisa-bisa data kamu hilang. Double check dulu sebelum klik tombol apapun.

Success! Yeay! Kamu berhasil menyelesaikan langkah ini. Lanjut ke step berikutnya dengan percaya diri!

Error! Duh, ada yang salah nih. Cek lagi kode atau inputan kamu, terus coba ulang dari awal.

Code Cara Buatnya

<div class='tabs'>
  <input id='alertTab-1' type='radio' name='alertTabGroup' checked>
  <input id='alertTab-2' type='radio' name='alertTabGroup'>
  <input id='alertTab-3' type='radio' name='alertTabGroup'>
  <input id='alertTab-4' type='radio' name='alertTabGroup'>
  <div>
    <label for='alertTab-1' data-text='ℹ️ Info'></label>
    <label for='alertTab-2' data-text='⚠️ Warning'></label>
    <label for='alertTab-3' data-text='✅ Success'></label>
    <label for='alertTab-4' data-text='❌ Error'></label>
  </div>
  <div class='tabC-1'>
    <div class='alert info outline'><b>Info!</b>
      Isi pesan info kamu di sini.
    </div>
  </div>
  <div class='tabC-2'>
    <div class='alert warning outline'><b>Warning!</b>
      Isi pesan warning kamu di sini.
    </div>
  </div>
  <div class='tabC-3'>
    <div class='alert success outline'><b>Success!</b>
      Isi pesan success kamu di sini.
    </div>
  </div>
  <div class='tabC-4'>
    <div class='alert error outline'><b>Error!</b>
      Isi pesan error kamu di sini.
    </div>
  </div>
</div>

Variasi & Kombinasi Lainnya

Fitur ini bisa dikembangin lebih jauh dengan kombinasi berikut:

• Ganti outline jadi tanpa outline buat tampilan solid yang lebih bold.
• Tambahin ol class='steps' di dalam tiap tab buat ngasih langkah-langkah per kondisi.
• Kombinasikan sama details class='sp' buat bikin tabbed spoiler.

Pro Tip!
Pastikan name pada setiap grup tab punya nilai yang unik supaya nggak bentrok kalau ada beberapa fitur ini dalam satu halaman.

Fitur #2 — Collapsible Download Center 📦

Apa Ini?

Kamu punya banyak file yang mau disediain buat download, tapi takut bikin halaman jadi keliatan penuh dan berantakan? Tenang! Collapsible Download Center ini jawabannya. Ini kombinasi antara spoiler/details + dlBox, jadi list download-nya bisa disembunyiin dulu dan baru muncul pas user klik tombol.

Demo Langsung

Pusat Download — Panduan Beasiswa Unggulan 2025

Pedoman Beasiswa Unggulan — Masyarakat Berprestasi 2.4 MB

Panduan Pendaftaran — Aplikasi Si Unggul 1.8 MB

Template Surat Rekomendasi — Format Resmi 245 KB

Semua File Sekaligus — Bundle Lengkap 5.1 MB

Code Cara Buatnya

<details class='sp'>
  <summary data-show='📥 Tampilkan Semua File Download' data-hide='🙈 Sembunyikan File'>
    Pusat Download — Judul Kategori Kamu
  </summary>
  <div>

    <!-- Download Box 1 -->
    <div class='dlBox'>
      <span class='fT' data-text='pdf'></span>
      <div class='fN'>
        <span><b>Nama File Pertama</b></span>
        <span class='fS'>2.4 MB</span>
      </div>
      <a class='button' aria-label='Download' href='LINK_DOWNLOAD' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
    </div>

    <!-- Download Box 2 -->
    <div class='dlBox'>
      <span class='fT' data-text='docx'></span>
      <div class='fN'>
        <span><b>Nama File Kedua</b></span>
        <span class='fS'>245 KB</span>
      </div>
      <a class='button' aria-label='Download' href='LINK_DOWNLOAD' rel='nofollow noreferrer noopener' target='_blank'><i class='icon dl'></i></a>
    </div>

  </div>
</details>

Variasi & Kombinasi Lainnya

• Bisa ditambahin div class='alert info outline' di awal spoiler buat kasih info sebelum user download.
• Wrap beberapa details ini dalam div class='showH' buat grouped collapsible download per kategori.
• Tambahin tipe file berbeda: data-text='zip', data-text='mp4', data-text='CV', dll.

Fitur #3 — Stepped FAQ Accordion 🪗

Apa Ini?

FAQ biasa tuh membosankan — cuma pertanyaan dan jawaban teks biasa. Nah, Stepped FAQ Accordion ini beda! Ini gabungan antara accordion grouped + ol class='steps' di dalam jawabannya. Jadi user nggak cuma dapet jawaban, tapi juga panduan langkah-langkah yang terstruktur rapi. Cocok banget buat tutorial atau panduan teknis.

Demo Langsung

Gimana cara daftar Beasiswa Unggulan?

1. Buka website resmi Si Unggul di beasiswaunggulan.kemendikdasmen.go.id
2. Daftar akun dengan email aktif kamu.
3. Lengkapi profil: biodata, orang tua, riwayat pendidikan.
4. Upload semua dokumen yang dibutuhkan sesuai checklist.
5. Klik "Ajukan Berkas" sebelum deadline penutupan.

Dokumen apa aja yang harus disiapkan?

1. KTP dan KTM yang masih berlaku.
2. Transkrip nilai atau KHS terbaru (IPK minimal sesuai ketentuan).
3. Sertifikat UKBI — wajib untuk semua pendaftar!
4. Surat rekomendasi dari dosen atau dekan.
5. Esai pribadi (1.000–1.500 kata, cek turnitin <20%).
6. NPWP dan dokumen tambahan sesuai skema yang dipilih.

Berapa lama proses seleksinya?

1. Pendaftaran: ± 2 minggu.
2. Seleksi Administrasi: ± 2 minggu setelah penutupan.
3. Pengumuman Administrasi: diumumkan di website resmi.
4. Seleksi Wawancara: bisa online atau offline, ± 1 bulan kemudian.
5. Pengumuman Final: beberapa minggu setelah wawancara.

Beasiswa ini cover biaya apa aja?

1. 🎓 Biaya Pendidikan — UKT/SPP at cost langsung ke kampus.
2. 💸 Biaya Hidup — Rp2.000.000/bulan ke rekening awardee.
3. 📚 Biaya Buku — Rp900.000/semester ke rekening awardee.

Catatan: Komponen biaya bisa berbeda untuk skema Penyandang Disabilitas dan Pegawai Kemendikdasmen.

Code Cara Buatnya

<div class='showH'>

  <!-- Accordion default -->
  <details class='ac'>
    <summary>Pertanyaan pertama kamu di sini?</summary>
    <div>
      <ol class='steps'>
        <li>Langkah jawaban pertama.</li>
        <li>Langkah jawaban kedua.</li>
        <li>Langkah jawaban ketiga.</li>
      </ol>
    </div>
  </details>

  <!-- Accordion alt (style berbeda) -->
  <details class='ac alt'>
    <summary>Pertanyaan kedua kamu di sini?</summary>
    <div>
      <ol class='steps'>
        <li>Langkah jawaban pertama.</li>
        <li>Langkah jawaban kedua.</li>
      </ol>
      <p class='note'><b>Catatan tambahan:</b> Info ekstra bisa ditaruh sini.</p>
    </div>
  </details>

</div>

Variasi & Kombinasi Lainnya

• Bisa pakai itemscope dan itemtype='https://schema.org/FAQPage' buat SEO rich result Google.
• Tambahin div class='alert' di dalam accordion buat highlight poin penting.
• Ganti ol dengan ul kalau jawaban nggak perlu urutan.

Fitur #4 — Comparison Table Tabs 📊

Apa Ini?

Sering kan mau bandingin beberapa hal tapi bingung cara nyajiin yang rapih? Comparison Table Tabs ini solusinya! Ini kombinasi tabs + table yang ngizinin user switch antar tabel perbandingan yang berbeda. Tampilannya bersih, interaktif, dan nggak bikin scrolling panjang.

Demo Langsung

Jenis Beasiswa	Pendidikan	Biaya Hidup/bln	Biaya Buku/smt
Masyarakat Berprestasi	✅ At Cost	Rp 2.000.000	Rp 900.000
Penyandang Disabilitas	✅ At Cost	✅ Ada	✅ Ada
Pegawai Kemendikdasmen	✅ At Cost	✅ Ada	✅ Ada

Jenis Beasiswa	S1 / D4	S2	S3
Masyarakat Berprestasi	Min 2.75	Min 3.25	Min 3.40
Penyandang Disabilitas	—	Min 3.25	Min 3.40
Pegawai Kemendikdasmen	Sesuai Pedoman	Sesuai Pedoman	Sesuai Pedoman

Jenis Beasiswa	Dalam Negeri	Luar Negeri
Masyarakat Berprestasi	✅	✅ (tanpa buku)
Penyandang Disabilitas	✅	❌
Pegawai Kemendikdasmen	✅	✅ (+ tiket & asuransi)

Code Cara Buatnya

<div class='tabs stick'>
  <input id='cmpTab-1' type='radio' name='cmpTabGroup' checked>
  <input id='cmpTab-2' type='radio' name='cmpTabGroup'>
  <div>
    <label for='cmpTab-1' data-text='Tabel Pertama'></label>
    <label for='cmpTab-2' data-text='Tabel Kedua'></label>
  </div>

  <div class='tabC-1'>
    <div class='table sticky bordered stripped hovered'>
      <table>
        <thead>
          <tr>
            <th>Kolom A</th>
            <th>Kolom B</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data 1A</td>
            <td>Data 1B</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class='tabC-2'>
    <div class='table sticky bordered stripped hovered'>
      <table>
        <thead>
          <tr>
            <th>Kolom C</th>
            <th>Kolom D</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data 2C</td>
            <td>Data 2D</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Variasi & Kombinasi Lainnya

• Tambahin class primary atau success ke div class='table' buat warnain header tabel.
• Bisa gabungin sama alert di atas tabel tiap tab buat konteks tambahan.
• Gunakan mh200 buat batasi tinggi tabel kalau datanya banyak banget.

Fitur #5 — Spoiler Quote Revealer 💬

Apa Ini?

Ini fitur kece buat ningkatin engagement artikel! Spoiler Quote Revealer adalah kombinasi details class='sp' + berbagai varian blockquote. Idenya: kutipan penting disembunyiin dulu, user harus klik buat reveal-nya. Bikin penasaran dan bikin orang mau baca lebih jauh.

Demo Langsung

Kutipan Motivasi dari Han Haoyu

"Sekali daftar, langsung diterima. Bukan karena beruntung — tapi karena sudah siap jauh sebelum kesempatan datang."

Muhammad Hayyu Hani Nuril — Awardee Beasiswa Unggulan 2025

"Kalau kamu nunggu siap dulu, kamu nggak akan pernah mulai. Kesempatan nggak nunggu kamu sempurna."

Han Haoyu

"Beasiswa bukan hadiah. Itu amanah — dan datanglah dengan bukti, bukan sekadar mimpi."

Prinsip Hidup

Code Cara Buatnya

<details class='sp'>
  <summary data-show='💡 Klik untuk reveal kutipan ini!' data-hide='🙈 Sembunyikan lagi'>
    Judul Spoiler Kamu
  </summary>
  <div>

    <!-- Blockquote Style 1 -->
    <blockquote class='s1'>
      <p>"Kutipan pertama yang keren banget."</p>
      <span>Nama Sumber</span>
    </blockquote>

    <!-- Blockquote Style 2 -->
    <blockquote class='s2'>
      <p>"Kutipan kedua yang nggak kalah keren."</p>
      <span>Nama Sumber</span>
    </blockquote>

    <!-- Blockquote Standard -->
    <blockquote>
      <p>"Kutipan ketiga yang simpel tapi berkesan."</p>
      <span>Nama Sumber</span>
    </blockquote>

  </div>
</details>

Variasi & Kombinasi Lainnya

• Bungkus beberapa details ini dalam satu div class='showH' buat grouped spoiler quotes per topik.
• Tambahin gambar di dalam spoiler buat bikin visual quote yang lebih menarik.
• Kombinasikan sama div class='alert success outline' sebagai teaser sebelum spoiler dibuka.

Fitur #6 — Multi-tab Code Playground 🧑‍💻

Apa Ini?

Kalau kamu sering nulis tutorial teknis, fitur ini bakal jadi andalan! Multi-tab Code Playground menggabungkan pre tabs + berbagai mark highlights di dalam code block. Hasilnya: tampilan kode yang bisa diswitch per bahasa pemrograman, plus highlight bagian penting yang bisa di-customize warnanya. Terlihat super profesional!

Demo Langsung

<!-- Struktur dasar halaman -->
<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman Kamu</mark></title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

/* Styling dasar */
body {
  font-family: 'Inter', sans-serif;
  background: #f5f5f5;
  color: #333333;
  margin: 0;
  padding: 0;
}

h1 {
  color: #6200ea;
  font-size: 2rem;
}

// Script interaktif
document.addEventListener('DOMContentLoaded', () => {
  const heading = document.querySelector('h1');
  
  heading.addEventListener('click', () => {
    heading.style.color = '#ff6b6b';
    console.log('Heading diklik!');
  });
});

Code Cara Buatnya

<div class='pre tabs'>
  <input id='codeTab-1' type='radio' name='codeTabGroup' checked/>
  <input id='codeTab-2' type='radio' name='codeTabGroup'/>
  <div>
    <label for='codeTab-1' data-text='HTML'></label>
    <label for='codeTab-2' data-text='CSS'></label>
  </div>

  <!-- Tab HTML -->
  <pre class='preC-codeTab-1' data-source='index.html'><code>
<mark>bagian yang di-highlight biasa</mark>
<mark class='green'>highlight hijau</mark>
<mark class='purple' data-before='Label'>highlight ungu + label</mark>
<mark class='block red' data-after='// Komentar'>highlight block merah</mark>
  </code></pre>

  <!-- Tab CSS -->
  <pre class='preC-codeTab-2' data-source='style.css'><code>
kode_css_kamu: <mark class='blue'>nilai yang penting</mark>;
  </code></pre>
</div>

Warna Mark yang Tersedia:
default, class='gray', class='red', class='orange', class='blue', class='green block', class='gold', class='purple', class='block'. Plus bisa nambahin data-before='label' atau data-after='label'.

Variasi & Kombinasi Lainnya

• Tambahin atribut data-lines='3,4,5' ke pre buat highlight nomor baris tertentu.
• Bisa tambahin data-comment='.html' buat label bahasa di pojok kode.
• Gabungkan sama div class='alert info' di atas tab buat kasih catatan sebelum user coba kodenya.

Fitur #7 — Interactive Step Guide with Alerts 🗺️

Apa Ini?

Tutorial biasa pakai ol class='steps' udah oke, tapi Interactive Step Guide with Alerts ini lebih kece! Ini menggabungkan ol class='steps' + alert berbeda di setiap langkah sebagai penanda kondisi. Hasilnya: panduan yang nggak cuma ngasih tau langkah, tapi juga ngasih konteks emosional (info, warning, tips) per step.

Demo Langsung

Panduan Daftar Beasiswa Unggulan — H-7 Sebelum Deadline Ikutin langkah di bawah ini secara berurutan ya! Jangan skip satupun kalau nggak mau bermasalah.

1. Cek persyaratan resmi di website Puslapdik.
   Info! Persyaratan bisa berubah tiap tahun. Selalu cek di sumber resmi, bukan dari info grup WA ya!
2. Siapkan sertifikat UKBI — ini syarat wajib yang sering dilupain.
   Warning! UKBI butuh waktu proses beberapa hari. Jangan mepet deadline buat daftarnya!
3. Tulis esai (1.000–1.500 kata) dan cek similaritas di Turnitin.
   Tips! Target similarity di bawah 20% buat aman. Kalau bisa di bawah 5%, makin bagus nilainya!
4. Minta surat rekomendasi dari dosen/dekan kamu.
   Info! Semakin banyak surat rekomendasi, semakin kuat aplikasi kamu. Minimal satu dari dosen pembimbing.
5. Upload semua dokumen ke Si Unggul dan klik Ajukan Berkas.
   Penting! Setelah klik submit, data nggak bisa diubah lagi. Pastikan semua sudah lengkap dan benar sebelum submit!

Code Cara Buatnya

<!-- Alert intro di atas -->
<div class='alert info outline'><b>Judul Panduan</b>
  Deskripsi singkat panduan ini.
</div>

<ol class='steps'>
  <li>
    <b>Judul Langkah 1</b> — deskripsi singkat.
    <div class='alert info'><b>Info!</b> Catatan untuk langkah ini.</div>
  </li>
  <li>
    <b>Judul Langkah 2</b> — deskripsi singkat.
    <div class='alert warning outline'><b>Warning!</b> Peringatan untuk langkah ini.</div>
  </li>
  <li>
    <b>Judul Langkah 3</b> — deskripsi singkat.
    <div class='alert success outline'><b>Tips!</b> Tips untuk langkah ini.</div>
  </li>
  <li>
    <b>Judul Langkah 4</b> — deskripsi singkat.
    <div class='alert error outline'><b>Penting!</b> Peringatan kritis untuk langkah ini.</div>
  </li>
</ol>

Variasi & Kombinasi Lainnya

• Bisa tambahin details class='sp' di dalam langkah tertentu buat nyembunyiin detail teknis.
• Gunakan pre code di dalam langkah buat nampilin cuplikan kode yang relevan.
• Wrap keseluruhan fitur ini dalam div class='tabs' kalau ada beberapa versi panduan (Windows, Mac, Linux misalnya).

Fitur #8 — Tabbed Image Gallery with Show All 🖼️

Apa Ini?

Punya banyak foto dari berbagai kategori/event? Tabbed Image Gallery with Show All ini jawaban yang tepat! Ini kombinasi tabs + psImg hdImg (show all function) dalam tiap tab. Jadi user bisa pilih kategori foto dulu lewat tab, terus bisa pilih mau liat semua foto atau nggak.

Demo Langsung

Grid Layout Foto tampil rapi dalam format grid. Klik foto untuk lightbox full-screen!

Scroll Layout Foto tampil horizontal, bisa digeser. Cocok untuk tampilan mobile!

Code Cara Buatnya

<div class='tabs stick'>
  <input id='galTab-1' type='radio' name='galTabGroup' checked>
  <input id='galTab-2' type='radio' name='galTabGroup'>
  <div>
    <label for='galTab-1' data-text='📸 Grid Layout'></label>
    <label for='galTab-2' data-text='🖼️ Scroll Layout'></label>
  </div>

  <!-- Tab 1: Grid Gallery -->
  <div class='tabC-1'>
    <div class='psImg grImg'>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-1'/>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-2'/>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-3'/>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-4'/>
    </div>
  </div>

  <!-- Tab 2: Scroll Gallery -->
  <div class='tabC-2'>
    <div class='glImg'>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-1'/>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-2'/>
      <img alt='deskripsi' loading='lazy' src='URL-GAMBAR-3'/>
    </div>
  </div>
</div>

Variasi & Kombinasi Lainnya

• Di dalam tab, bisa pakai input class='inImg' + div class='psImg hdImg' buat Show All Function per kategori.
• Tambahin figure + figcaption di dalam tab buat gambar featured dengan caption.
• Bisa sampai 9 tab per grup kalau kategori fotonya banyak.

Fitur #9 — Spoiler Timeline / Roadmap 🗓️

Apa Ini?

Mau nampilin roadmap perjalanan atau timeline event tapi biar nggak kepanjangan di halaman? Spoiler Timeline ini kombinasi details class='sp' + ol class='steps' berlapis + blockquote sebagai penanda milestone. Bikin timeline kamu jadi interaktif — user yang penasaran aja yang bakal buka!

Demo Langsung

Roadmap Perjalanan Akademik

"Setiap semester adalah babak baru. Setiap keputusan adalah investasi jangka panjang."

1. 2022 — Semester 1-2: Bangun Pondasi
   • Fokus total ke IPK — konsisten di atas 3.5
   • Kenali lingkungan kampus dan mulai networking
   • Ikut orientasi mahasiswa baru (PKKMB)
2. 2023 — Semester 3-4: Masuk Organisasi
   • Bergabung HIMAMEN sebagai Humas
   • Mulai bantu dosen dalam riset pertama
   • Ikut kepanitiaan event kampus nasional (ICEBEMA)
3. 2024 — Semester 4-5: Terjun PKM & Pengabdian
   • Ketua Tim PKM — lolos pendanaan nasional
   • Bantu 5 skema PKM Dosen (lolos semua)
   • Terlibat 3 penelitian ilmiah bersama dosen
4. 2025 — Semester 5: Beasiswa Unggulan 🏆
   • Daftar H-7 sebelum deadline
   • Seleksi administrasi: LOLOS ✅
   • Wawancara 52 menit: LOLOS ✅
   • Resmi jadi Awardee Beasiswa Unggulan 2025

One-Shot! Sekali Daftar, Langsung Diterima. Bukan keberuntungan — ini hasil dari persiapan panjang sejak semester pertama.

Code Cara Buatnya

<details class='sp'>
  <summary data-show='📅 Lihat Roadmap Lengkap' data-hide='🙈 Sembunyikan Roadmap'>
    Judul Timeline Kamu
  </summary>
  <div>

    <!-- Kutipan pembuka (opsional) -->
    <blockquote class='s1'>
      <p>"Kutipan motivasi yang relevan."</p>
    </blockquote>

    <!-- Timeline Steps -->
    <ol class='steps'>
      <li>
        <b>Tahun/Periode: Judul Fase</b>
        <ul>
          <li>Poin pencapaian pertama.</li>
          <li>Poin pencapaian kedua.</li>
        </ul>
      </li>
      <li>
        <b>Tahun/Periode: Judul Fase Berikutnya</b>
        <ul>
          <li>Poin pencapaian pertama.</li>
          <li>Poin pencapaian kedua.</li>
        </ul>
      </li>
    </ol>

    <!-- Alert penutup (opsional) -->
    <div class='alert success'><b>Pencapaian Akhir!</b>
      Deskripsi hasil akhir yang dicapai.
    </div>

  </div>
</details>

Variasi & Kombinasi Lainnya

• Bisa wrap beberapa spoiler timeline ini dalam div class='showH' buat per-orang atau per-proyek.
• Tambahin figure + gambar di dalam spoiler buat visual per fase.
• Ganti ol class='steps' dengan tabel buat format yang lebih grid dan terstuktur.

Fitur #10 — Sticky Tabbed Profile Card 👤

Apa Ini?

Buat yang mau nampilin profil lengkap dengan banyak kategori info (portofolio, pengalaman, sertifikasi, dll.), Sticky Tabbed Profile Card ini the perfect solution! Ini gabungan tabs stick + dlBox + table + blockquote + alert. Semuanya tersusun rapi dalam satu komponen yang navigasinya nempel di atas saat discroll. Super clean!

Demo Langsung

"Bukan tentang seberapa cepat berjalan, tapi seberapa konsisten melangkah."

Muhammad Hayyu Hani Nuril — Han Haoyu

Nama Lengkap	Muhammad Hayyu Hani Nuril
Nama Populer	Han Haoyu
Kampus	Universitas Dr. Soetomo (UNITOMO) Surabaya
Prodi	Manajemen — Fakultas Ekonomi & Bisnis
Semester	5 (saat artikel ini dibuat)
Status	🏆 Awardee Beasiswa Unggulan 2025

Pencapaian Terkini Berikut adalah highlight prestasi akademik dan non-akademik terpilih.

Prestasi	Tingkat	Tahun
Awardee Beasiswa Unggulan	Nasional	2025
Ketua Tim PKM Lolos Pendanaan	Nasional	2024
5 Skema PKM Dosen (semua lolos)	Nasional	2023–2024
3 Penelitian Ilmiah Bersama Dosen	Kampus	2023–2025
Google Data Analytics Certificate	Internasional	2024

Dokumen Resmi Klik tombol untuk mengakses dokumen lengkap.

Curriculum Vitae — Muhammad Hayyu Hani Nuril Coming Soon!

Portofolio Lengkap — Han Haoyu Coming Soon!

Sertifikasi	Penyelenggara	Tahun
Data Analytics	Google	2024
AI Fundamentals	IBM	2024
UKBI — Predikat Unggul (609)	Kemendikbud	2025
Digital Marketing	Coursera	2023
Riset & Metodologi	LPPM UNITOMO	2024

Total: Ratusan sertifikat dari berbagai institusi nasional & internasional.

Code Cara Buatnya

<div class='tabs stick'>
  <input id='profileTab-1' type='radio' name='profileTabGroup' checked>
  <input id='profileTab-2' type='radio' name='profileTabGroup'>
  <input id='profileTab-3' type='radio' name='profileTabGroup'>
  <div>
    <label for='profileTab-1' data-text='👤 Profil'></label>
    <label for='profileTab-2' data-text='🏆 Prestasi'></label>
    <label for='profileTab-3' data-text='📁 Portofolio'></label>
  </div>

  <!-- Tab Profil -->
  <div class='tabC-1'>
    <blockquote class='s1'>
      <p>"Kutipan signature kamu."</p>
      <span>Nama Kamu</span>
    </blockquote>
    <div class='table bordered stripped'>
      <table>
        <tbody>
          <tr><td><b>Nama</b></td><td>Isi nama kamu</td></tr>
          <tr><td><b>Kampus</b></td><td>Nama kampus kamu</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Tab Prestasi -->
  <div class='tabC-2'>
    <div class='alert success outline'><b>Highlight Prestasi</b>
      Deskripsi singkat.
    </div>
    <div class='table sticky bordered stripped hovered'>
      <table>
        <thead>
          <tr><th>Prestasi</th><th>Tingkat</th><th>Tahun</th></tr>
        </thead>
        <tbody>
          <tr><td>Nama Prestasi</td><td>Nasional</td><td>2025</td></tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Tab Portofolio -->
  <div class='tabC-3'>
    <div class='dlBox'>
      <span class='fT' data-text='CV'></span>
      <div class='fN'>
        <span><b>Curriculum Vitae</b></span>
        <span class='fS'>Updated 2025</span>
      </div>
      <a class='button' aria-label='Lihat CV' href='/cv'><i class='icon demo'></i></a>
    </div>
  </div>
</div>

Variasi & Kombinasi Lainnya

• Tambahin tab ke-4 dan ke-5 buat sertifikasi, pengalaman kerja, atau kontak.
• Bisa tambahin figure + foto profil di tab pertama buat tampilan yang lebih personal.
• Gabungkan sama details class='sp' buat nyembunyiin detail teknis yang terlalu panjang di salah satu tab.

Penutup

"Kode bukan cuma buat dijalankan — tapi buat dikombinasikan jadi sesuatu yang lebih berarti."

Han Haoyu — hanhaoyu.com

Nah, itu dia 10 Fitur Baru yang lahir dari kombinasi code bawaan website ini! Semuanya bisa langsung kamu copy-paste ke HTML view post kamu. Nggak perlu install plugin tambahan, nggak perlu edit template — semua udah tersedia tinggal pakai.

Yang udah kamu pelajari di artikel ini:

1. Tabbed Alert Box — gabungan tabs + berbagai varian alert.
2. Collapsible Download Center — spoiler + dlBox.
3. Stepped FAQ Accordion — accordion grouped + ol steps.
4. Comparison Table Tabs — tabs stick + table.
5. Spoiler Quote Revealer — spoiler + berbagai blockquote.
6. Multi-tab Code Playground — pre tabs + mark highlights.
7. Interactive Step Guide with Alerts — ol steps + alert per langkah.
8. Tabbed Image Gallery — tabs + berbagai layout gambar.
9. Spoiler Timeline / Roadmap — spoiler + steps + blockquote.
10. Sticky Tabbed Profile Card — tabs stick + table + dlBox + blockquote.

Stay tune buat Versi 2 yang bakal ngebahas 10 kombinasi fitur lainnya yang nggak kalah keren! Kalau ada pertanyaan atau mau request kombinasi tertentu, feel free buat komen di bawah ya. 🔥

Artikel Terkait

Artikel oleh: Muhammad Hayyu Hani Nuril (Han Haoyu)
Website: hanhaoyu.com
Semua komponen menggunakan sistem bawaan Han Haoyu Platform v3.