Dokumentasi Lengkap Tag Portofolio & Biolink Engine
Modul Portofolio & Biolink memungkinkan Anda membuat halaman profil kreator, agregator tautan sosial media (Link-in-bio), dan galeri showcase proyek responsif yang diatur melalui panel redaksi edit-0.xhtml?act=portobio.
1. Tag Utama Multi-Mode: [portobio]
Merender tampilan penuh secara otomatis sesuai mode yang dipilih pada panel profil (Biolink, Portofolio, atau Hybrid gabungan keduanya).
Parameter yang Didukung:
mode=biolink|portofolio|hybrid: Menentukan mode rendering secara dinamis tanpa mengubah pengaturan database.bg=TEMA: Pilihan preset latar belakang visual:bg=gradient_midnight: Gradien biru gelap modern (default).bg=gradient_ocean: Samudra biru elektrik.bg=gradient_sunset: Merah jingga hangat.bg=gradient_emerald: Hijau zamrud natural.bg=gradient_purple: Ungu royal futuristik.bg=clean_light: Latar bersih minimalis putih terang.bg=dark_editorial: Hitam pekat pekat kontras tinggi.
card=TIPE: Gaya tampilan kartu tautan & proyek (glass,rounded_solid,soft_shadow,outline).accent=#HEX: Kode warna aksen tombol dan border (contoh:accent=#38bdf8).
Contoh Penggunaan:
[portobio]mode=hybrid,bg=gradient_ocean,card=glass,accent=#0284c7[/portobio]2. Tag Khusus Biolink: [biolink]
Selalu merender kartu profil, foto avatar, status badge, lokasi, serta daftar tombol tautan media sosial vertikal dengan efek pulse dan ikon otomatis platform/favicon.
Contoh Penggunaan:
[biolink]cat=Utama,l=8[/biolink]3. Tag Khusus Portofolio: [portofolio]
Selalu merender grid galeri karya/proyek responsif dengan foto mockup, deskripsi, badges tech stack, dan tautan demo langsung.
Contoh Penggunaan:
[portofolio]cat=Web Application,l=6[/portofolio]4. Tag Kartu Header Profil Mandiri: [portobio_profile]
Merender hanya bagian header profil avatar, nama, bio, dan badge verifikasi. Sangat berguna jika Anda ingin mendesain tata letak kustom.
| Variabel | Contoh Data | Keterangan |
|---|---|---|
%nama% | Alex Pratama | Nama lengkap atau brand profil. |
%headline% | Fullstack Web Developer | Profesi / spesialisasi keahlian. |
%bio% | Membangun website modern... | Teks deskripsi biografi ringkas. |
%avatar% | https://.../avatar.jpg | URL gambar foto profil. |
%badge% | Available for Hire | Teks status badge kreator. |
%lokasi% | Jakarta, Indonesia | Kota atau negara domisili. |
%verified% | <span>✓</span> | Lencana centang biru resmi jika akun terverifikasi. |
%accent% | #38bdf8 | Kode hex warna aksen yang dipilih. |
Contoh Format Kustom HTML:
[portobio_profile]||<div class="custom-card"><img src="%avatar%"/><h2>%nama% %verified%</h2><p>%headline%</p></div>[/portobio_profile]5. Tag Looping Tautan Biolink: [biolink_links]
Melakukan perulangan daftar tautan aktif dengan dukungan kustomisasi template HTML bebas.
| Variabel | Contoh Data | Keterangan |
|---|---|---|
%id% | 1 | ID unik baris database tautan. |
%judul% | WhatsApp Konsultasi | Label judul tombol tautan. |
%url% | https://wa.me/628... | URL target (lolos sensor Trust+ Komdigi). |
%icon% | <svg...> / <img...> | Ikon SVG platform resmi atau favicon domain otomatis. |
%kategori% | Sosial Media | Grup kategori tautan. |
%clicks% | 350 | Total akumulasi klik pengunjung. |
%pulse% | pulse | Penanda jika tautan diberi animasi sorotan khusus. |
Contoh Format Kustom HTML:
[biolink_links]l=6||<a href="%url%" class="link-item %pulse%" target="_blank">%icon% <span>%judul%</span></a>[/biolink_links]6. Tag Looping Galeri Proyek: [portofolio_projects]
Melakukan perulangan daftar karya dan proyek showcase aktif dengan template HTML kustom.
| Variabel | Contoh Data | Keterangan |
|---|---|---|
%id% | 2 | ID unik proyek karya. |
%judul% | Aplikasi Kasir Toko | Judul proyek atau portofolio. |
%deskripsi% | Aplikasi berbasis web offline-first... | Penjelasan fitur dan solusi karya. |
%gambar% | https://.../mockup.jpg | URL gambar thumbnail mockup dari File Manager. |
%kategori% | Web App | Kategori jenis proyek. |
%tech_stack% | PHP, MySQL, Tailwind | Teknologi dan tools yang digunakan. |
%link_url% | https://demo.domain.com | Tautan live demo atau repositori proyek. |
%clicks% | 120 | Total interaksi pengunjung. |
Contoh Format Kustom HTML:
[portofolio_projects]cat=Web App,l=4||<div class="card"><img src="%gambar%"/><h4>%judul%</h4><p>%deskripsi%</p><a href="%link_url%">Lihat Proyek</a></div>[/portofolio_projects]7. Tag Bar Kontak Cepat: [portobio_contact]
Merender tombol kontak langsung berbentuk pil mengambang untuk nomor WhatsApp dan Email publik kreator.
[portobio_contact]8. Proteksi Sensor & Keamanan Komdigi Trust+
Seluruh URL tautan yang dimasukkan ke dalam biolink dan portofolio secara otomatis divalidasi ke database 22 ekstensi domain Komdigi Trust+. Tautan situs terlarang (judi online, pornografi, dan phishing) akan otomatis diblokir demi menjaga reputasi domain dan kepatuhan hukum di Indonesia.