![Membuat Template Link in Bio dengan CSS [Free Download]](https://webbiz.id/wp-content/uploads/2024/01/Membuat-Template-Link-in-Bio-dengan-CSS-Free-Download.jpg)
Berikut ini adalah contoh Membuat Template Link in Bio dengan menggunakan CSS, Bootstrap dan Font Awesome [Free Download]
<!DOCTYPE html>
<html>
<head>
<title>Link Tree</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto;
display: block;
object-fit: cover;
object-position: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.name {
text-align: center;
font-size: 24px;
margin-top: 10px;
}
.links {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
}
.link {
margin: 10px;
padding: 10px 20px;
text-align: center;
text-decoration: none;
color: #333;
font-weight: bold;
box-shadow:inset 0px 1px 0px 0px #caefab;
background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
background-color:#77d42a;
border-radius:6px;
border:1px solid #268a16;
display:inline-block;
cursor:pointer;
}
.link:hover {
background-color: #ddd;
}
/* footer style */
footer {
background-color: #f2f2f2;
margin: 10px;
padding: 20px 20px;
text-align: center;
border-radius:6px;
border:1px solid #333;
}
.social-media a {
color: #333;
font-size: 20px;
margin: 0 10px;
}
.credit p {
color: #666;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<img class="profile-pic" src="https://webbiz.id/wp-content/uploads/2023/12/arman-basir.png" alt="Profile Picture">
<h1 class="name">WebbizID</h1>
<div class="links">
<a class="link" href="https://example.com">Website</a>
<a class="link" href="https://instagram.com">Tokopedia</a>
<a class="link" href="https://twitter.com">Shoope</a>
<a class="link" href="https://linkedin.com">Blibli</a>
</div>
<footer>
<div class="social-media">
<a href="https://www.facebook.com/akun-facebook" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="https://www.instagram.com/akun-instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="https://www.twitter.com/akun-twitter" target="_blank"><i class="fa fa-twitter"></i></a>
</div>
<div class="credit">
<p>© 2023 WebbizID</p>
</div>
</footer>
</div>
</body>
</html>Anda dapat menggunakan kode di atas sebagai dasar untuk membuat link tree website yang elegan. Anda dapat mengganti gambar profil, nama, dan tautan sesuai dengan kebutuhan Anda. Selain itu, Anda juga dapat menambahkan atau menghapus tautan sesuai dengan preferensi Anda.
Membuat Link Tree Website Elegan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Tree</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.link-item {
margin-bottom: 10px;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #ededed;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.profile-pic {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto;
display: block;
object-fit: cover;
object-position: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.name {
text-align: center;
font-size: 24px;
margin-top: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="profile-pic" src="https://webbiz.id/wp-content/uploads/2023/12/arman-basir.png" alt="Profile Picture">
<div class="row">
<div class="col-md-6 offset-md-3">
<h2 class="name">WebbizID</h2>
<div class="link-item">
<a href="https://example.com" class="btn btn-primary btn-block">Website</a>
</div>
<div class="link-item">
<a href="https://example.com" class="btn btn-success btn-block">Instagram</a>
</div>
<div class="link-item">
<a href="https://example.com" class="btn btn-danger btn-block">Facebook</a>
</div>
<div class="link-item">
<a href="https://example.com" class="btn btn-dark btn-block">TikTok</a>
</div>
<div class="link-item">
<a href="https://example.com" class="btn btn-warning btn-block">Twitter</a>
</div>
</div>
</div>
</div>
</body>
</html>Jika Anda ingin membuat link tree website yang elegan dan menarik, Bootstrap adalah salah satu framework yang dapat Anda gunakan. Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat tata letak yang responsif dan gaya yang konsisten untuk link tree Anda.
Anda dapat menyalin kode di atas ke file HTML baru dan membukanya di browser untuk melihat hasilnya. Kode tersebut akan membuat link tree dengan tata letak responsif menggunakan Bootstrap. Setiap link akan ditampilkan sebagai tombol dengan gaya yang konsisten.
Anda dapat menyesuaikan kode tersebut dengan menambahkan atau mengubah link sesuai kebutuhan Anda. Anda juga dapat mengubah gaya tombol dengan menggunakan kelas-kelas Bootstrap yang berbeda.
Dengan menggunakan Bootstrap, Anda dapat dengan mudah membuat link tree website yang elegan dan menarik tanpa harus menulis banyak kode CSS tambahan. Framework ini menyediakan komponen-komponen yang siap pakai dan gaya yang konsisten, sehingga Anda dapat fokus pada konten dan fungsionalitas link tree Anda.
Semoga berhasil!