Punya banyak link sosial media tapi bingung bagaimana cara menampilkannya secara rapi di bio Instagram atau TikTok? Membuat halaman Bio Links sendiri (seperti Linktree) adalah solusi terbaik agar profil Anda terlihat lebih profesional dan personal.
Hari ini, saya akan membagikan template Bio Links Eksklusif dengan tema minimalis-elegan, perpaduan warna krem lembut, dan tipografi serif yang mewah. Template ini sangat cocok untuk fotografer, kreator konten, atau personal brand yang ingin tampil beda.
Preview Desain
Halaman ini menggunakan kombinasi font Cormorant Garamond untuk kesan klasik dan Montserrat untuk kesan modern. Fitur utamanya meliputi:
- Header gambar hitam-putih yang estetik.
- Foto profil melingkar dengan overlay posisi yang rapi.
- Tombol interaktif dengan efek hover yang halus.
- Ikon sosial media yang responsif.
Persiapan Gambar
Sebelum menyalin kode di bawah, pastikan Anda telah menyiapkan dua gambar di dalam folder project Anda:
- fotobg.png: Untuk latar belakang header (disarankan ukuran landscape).
- fotopp.png: Untuk foto profil Anda.
Kode HTML & CSS Lengkap
Silakan salin kode berikut dan simpan dengan nama index.html:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurellia Nismara Kirana - Bio Links</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Montserrat:wght@400;500&display=swap"
rel="stylesheet">
<style>
:root {
--cream-bg: #F5F2E9;
/* Latar belakang krem lembut */
--dark-text: #333333;
/* Warna teks gelap */
--light-grey-border: #CCCCCC;
/* Border tombol */
--accent-color: #B5A18C;
/* Warna aksen opsional, bisa untuk hover */
}
body {
background-color: var(--cream-bg);
font-family: 'Montserrat', sans-serif;
/* Font utama untuk tombol & body */
color: var(--dark-text);
display: flex;
justify-content: center;
align-items: flex-start;
/* Mengatur ke atas, bukan tengah vertikal */
min-height: 100vh;
margin: 0;
padding: 20px 0;
/* Padding atas dan bawah */
box-sizing: border-box;
/* Memastikan padding tidak menambah lebar/tinggi total */
}
.container {
width: 100%;
max-width: 450px;
/* Sedikit lebih lebar untuk estetika */
background-color: #FFFFFF;
/* Latar belakang kartu utama putih */
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
/* Bayangan lembut */
text-align: center;
overflow: hidden;
/* Penting agar gambar header tidak keluar */
padding-bottom: 25px;
/* Padding bawah untuk konten */
margin: 0 15px;
/* Margin samping untuk responsivitas */
}
.header-section {
position: relative;
margin-bottom: 0px;
/* Menyesuaikan jarak antara header dan profil pic */
}
.header-img {
width: 100%;
height: 180px;
/* Sedikit lebih tinggi */
object-fit: cover;
filter: grayscale(100%);
/* Efek hitam putih */
display: block;
/* Menghilangkan margin bawah default pada img */
}
.profile-pic-wrapper {
position: relative;
/* Untuk menempatkan pic di atas header */
margin-top: -80px;
/* Menaikkan gambar profil */
z-index: 10;
}
.profile-pic {
width: 120px;
/* Ukuran lebih besar */
height: 120px;
border-radius: 50%;
border: 6px solid var(--cream-bg);
/* Border warna latar belakang */
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
/* Bayangan pada foto profil */
}
h1 {
font-family: 'Cormorant Garamond', serif;
/* Font serif untuk nama */
font-size: 2.5em;
margin-top: 15px;
margin-bottom: 5px;
color: var(--dark-text);
font-weight: 700;
/* Tebal */
}
.subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 0.85em;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 25px;
color: #666;
}
.social-icons {
margin-top: 20px;
margin-bottom: 30px;
/* Jarak ke tombol */
}
.social-icons a {
color: var(--dark-text);
margin: 0 12px;
font-size: 1.5em;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: var(--accent-color);
/* Perubahan warna saat hover */
}
.link-buttons {
padding: 0 25px;
/* Padding samping untuk tombol */
}
.btn {
display: block;
background-color: transparent;
border: 1px solid var(--light-grey-border);
padding: 15px 20px;
margin: 15px 0;
/* Jarak antar tombol */
text-decoration: none;
color: var(--dark-text);
letter-spacing: 1.5px;
font-size: 0.9em;
font-weight: 500;
text-transform: uppercase;
border-radius: 8px;
/* Sudut tombol sedikit membulat */
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
/* Bayangan tombol */
}
.btn:hover {
background-color: var(--dark-text);
/* Latar belakang hitam saat hover */
color: #FFFFFF;
/* Teks putih saat hover */
border-color: var(--dark-text);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
/* Efek naik sedikit */
}
.extra-feature {
background-color: var(--accent-color);
/* Latar belakang aksen untuk fitur khusus */
color: white;
border-color: var(--accent-color);
}
.extra-feature:hover {
background-color: darken(var(--accent-color), 10%);
/* Lebih gelap saat hover */
border-color: darken(var(--accent-color), 10%);
}
.footer-text {
margin-top: 30px;
font-size: 0.75em;
color: #999;
letter-spacing: 1px;
}
.footer-text a {
color: #999;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-text a:hover {
color: var(--dark-text);
}
@media (max-width: 600px) {
.container {
margin: 0 10px;
border-radius: 0;
/* Hilangkan radius di mobile penuh */
box-shadow: none;
/* Hilangkan bayangan di mobile penuh */
}
body {
padding: 0;
}
.profile-pic-wrapper {
margin-top: -60px;
}
.profile-pic {
width: 100px;
height: 100px;
border-width: 5px;
}
h1 {
font-size: 2em;
}
.subtitle {
margin-bottom: 20px;
}
.social-icons {
margin-bottom: 25px;
}
.link-buttons {
padding: 0 20px;
}
.btn {
padding: 13px 15px;
font-size: 0.85em;
margin: 12px 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header-section">
<img src="linkimg/bg.jpg" alt="Landscape Header" class="header-img">
</div>
<div class="profile-pic-wrapper">
<img src="linkimg/pp.jpg" alt="Aurellia Nismara Kirana Profile" class="profile-pic">
</div>
<h1>Aurellia Nismara Kirana</h1>
<p class="subtitle">PHOTOGRAPHER</p>
<div class="social-icons">
<a href="https://www.instagram.com/#/" target="_blank" aria-label="Instagram"><i
class="fab fa-instagram"></i></a>
<a href="https://www.facebook.com/#/" target="_blank" aria-label="Facebook"><i
class="fab fa-facebook-f"></i></a>
<a href="https://www.pinterest.com/#/" target="_blank" aria-label="Pinterest"><i
class="fab fa-pinterest-p"></i></a>
<a href="https://www.youtube.com/#/" target="_blank" aria-label="YouTube"><i
class="fab fa-youtube"></i></a>
</div>
<div class="link-buttons">
<a href="#" class="btn">Website Resmi</a>
<a href="#" class="btn">Book / Enquire</a>
<a href="#" class="btn">Harga & Paket</a>
<a href="#" class="btn">Tentang Saya</a>
<a href="#" class="btn">FAQ's</a>
<a href="#" class="btn">Blog Terbaru</a>
<a href="#" class="btn extra-feature">Portfolio Eksklusif 📸</a>
</div>
<p class="footer-text">
© 2026 Aurellia Nismara Kirana. Dibuat dengan ❤️.
</p>
</div>
</body>
</html>Cara Kustomisasi:
- Ubah Nama & Bio: Cari tag
<h1>dan<p class="subtitle">untuk mengganti nama dan profesi Anda. - Update Link: Ganti tanda
#pada bagian<a href="#">dengan link Instagram, WhatsApp, atau website asli Anda. - Warna: Anda bisa mengubah variabel
--accent-colordi bagian atas kode CSS untuk menyesuaikan dengan warna brand Anda. - Foto: Buat folder linkimg/ untuk menaruh foto .jpg.
Semoga template ini bermanfaat untuk mempercantik kehadiran digital Anda! Jika ada kendala dalam pemasangan kodenya, silakan tulis di kolom komentar ya.
