Beranda Tips

LinkKeren: Cara Bikin Website Biolink Ala Linktree yang Estetik & SEO-Friendly

AGAM RIYANDANA
AGAM RIYANDANA
• 0 • menit membaca
Daftar Isi


🌟 Kenapa Harus Punya Biolink Sendiri?

Sekarang semua kreator Instagram, TikTok, YouTube pakai link in bio. Tapi kalau cuma pakai Linktree atau Beacons biasa, tampilannya standar. Dengan biolink sendiri, kamu bisa:

  1. 💡 Kontrol penuh branding → warna, font, tombol, dan animasi

  2. ⚡ Cepat & ringan → tanpa script berat

  3. 🧭 SEO-friendly → bisa muncul di Google

  4. 💰 Gratis → hosting bisa pakai Netlify, Vercel, atau GitHub Pages

Biolink bukan sekadar link, tapi profil digital yang profesional, interaktif, dan fun.

🔑 Tips SEO & Biolink Keren

Supaya biolink kamu mudah ditemukan di Google:

🎨 Desain Biolink Ala Gen Z

Untuk tampilan fresh & fun:

💻 Struktur File

Kita buat satu project dengan:

  1. index.html → HTML utama

  2. style.css → CSS eksternal

  3. script.js → JavaScript untuk interaktivitas & sound effect

  4. Sound effect file (misal: click1.mp3, click2.mp3)

  5. Avatar foto (misal: avatar.jpg)

📄 Contoh Kode index.html

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Agam • LinkKeren Super Interaktif</title>
<meta name="description" content="Buat biolink super interaktif ala Linktree. Tombol animasi, ikon bergerak, efek suara klik, dark/light mode, responsive & SEO-friendly.">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" />

<!-- CSS -->
<link rel="stylesheet" href="style.css" />

<!-- JSON-LD Schema -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Agam Riyandana",
  "url": "https://agamlink.example",
  "sameAs": [
    "https://instagram.com/agamri",
    "https://youtube.com/@agamri"
  ]
}
</script>
</head>
<body class="dark-mode">

<div class="theme-toggle">
  <button id="toggle-theme"><i class="fas fa-moon"></i> Toggle Dark/Light</button>
</div>

<main class="container">
  <img src="avatar.jpg" alt="Foto Agam" class="avatar" />
  <h1>Agam Riyandana</h1>
  <p class="bio">Digital creator 🎥 | Web dev 💻 | Konten kreatif + gampang dimengerti ✨</p>

  <section class="links">
    <a href="https://instagram.com/agamri" class="btn" data-sound="click1.mp3" target="_blank" rel="noopener">
      <i class="fab fa-instagram"></i><span>Instagram</span>
    </a>
    <a href="https://youtube.com/@agamri" class="btn" data-sound="click2.mp3" target="_blank" rel="noopener">
      <i class="fab fa-youtube"></i><span>YouTube</span>
    </a>
    <a href="https://toko.example" class="btn" data-sound="click3.mp3" target="_blank" rel="noopener">
      <i class="fas fa-store"></i><span>Toko Online</span>
    </a>
    <a href="mailto:[email protected]" class="btn outline" data-sound="click1.mp3">
      <i class="fas fa-envelope"></i><span>Email</span>
    </a>
    <a href="https://link.donasi.example" class="btn" data-sound="click2.mp3" target="_blank" rel="noopener">
      <i class="fas fa-heart"></i><span>Donasi 💖</span>
    </a>
  </section>

  <footer>
    <small>© <span id="year"></span> Agam Riyandana — Dibuat dengan ❤️</small>
  </footer>
</main>

<script src="script.js"></script>
</body>
</html>

📄 Contoh Kode style.css

(Sama seperti versi sebelumnya, sudah ada tombol animasi, hover ikon, dark/light mode toggle, responsive)

📄 Contoh Kode script.js

document.getElementById('year').textContent = new Date().getFullYear();

// Dark/Light toggle
const toggleBtn = document.getElementById('toggle-theme');
toggleBtn.addEventListener('click', () => {
  document.body.classList.toggle('light-mode');
  document.body.classList.toggle('dark-mode');
});

// Sound effect klik tombol
const buttons = document.querySelectorAll('.btn');
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    const soundFile = btn.dataset.sound;
    if(soundFile){
      const audio = new Audio(soundFile);
      audio.play();
    }
  });
});

🚀 Cara Pasangkan Kode Ini Sampai Jadi Online

  1. Siapkan folder project
    Buat folder baru, misal biolink-super. Masukkan:

    • index.html

    • style.css

    • script.js

    • avatar.jpg (foto kamu)

    • click1.mp3, click2.mp3, click3.mp3 (sound effect)

  2. Test offline dulu

    • Buka index.html di browser.

    • Pastikan tombol muncul, animasi & toggle dark/light berfungsi, suara tombol bisa terdengar (klik tombol).

  3. Upload ke hosting gratis

    • Netlify:

      • Buat akun → pilih “New Site from Git” → drag & drop folder project.

    • Vercel:

      • Buat akun → pilih “New Project” → upload folder project.

    • GitHub Pages:

      • Buat repo → upload semua file → aktifkan GitHub Pages di Settings → pilih branch.

  4. Cek domain online

    • Setelah deploy, hosting akan memberikan link gratis seperti:

      • https://namakamu.netlify.app

      • https://namakamu.vercel.app

      • https://username.github.io/biolink-super

  5. Opsional: pakai domain sendiri

    • Beli domain di penyedia domain lokal (Namecheap, mediacloud, Domainesia, idwebhost, hostinger).

    • Hubungkan ke Netlify / Vercel / GitHub Pages sesuai petunjuk mereka.

    • Sekarang biolink kamu punya URL keren, mudah diingat, dan profesional.

  6. Update link secara berkala

    • Tambah / ganti tombol di index.html.

    • Update bio, foto, atau efek tombol sesuai kebutuhan.

    • Setelah diubah, upload ulang ke hosting → otomatis website online terupdate.

Dengan panduan ini, biolink super interaktif kamu siap online, tampil keren & Gen Z vibes, lengkap dengan animasi tombol, hover ikon, sound effect, dan dark/light toggle.

AGAM RIYANDANA
AGAM RIYANDANA AGAM OFFICIAL BLOG oleh Agam Riyandana hadir untuk membantumu kuasai blogging, SEO, dan digital marketing. Temukan trik online, teknologi terbaru, dan strategi sukses di dunia digital!

Posting Komentar

Silakan Memberikan Kritik Dan Saran. Boleh Sambil Ngelink.