Linktree merupakan sebuah layanan untuk membuat sebuah halaman web yang dapat menampung link sosial media yang kita miliki. Linktree dapat memudahkan seseorang dalam menyimpan berbagai macam link agar dapat lebih mudah diakses karena cukup dengan satu halaman web semua link sosial media kita dapat ditampilkan. Tapi apa kalian pernah berfikir untuk membuat linktree sendiri menggunakan HTML dan CSS ? yang pasti dengan membuat sendiri kita akan lebih mudah melakukan kustomisasi sesuai dengan apa yang kita inginkan.
Baca juga : Cara Hilangkan Jerawat Dengan Photoshop 100% Mudah!
Daftar Isi
1. Buka Folder Menggunakan Text Editor
Silahkan buka text editor yang biasa kalian gunakan (disini saya menggunakan Visual Studio Code) setelah itu buka folder menggunakan text editor, jika belum ada silahkan buat folder terlebih dahulu.
–Cara membuat linktree custom–
2. Buat File Index.html dan Style.css
Setelah folder terbuka silahkan buat satu buah file bernama index.html dan style.css
3. Masukkan Kode HTML Pada File Index.html
Bagi yang menggunakan Visual Studio Code silahkan ketik tanda seru (!) kemudian tekan enter untuk membuat kerangka dasar HTML kemudian lengkapi bagian title dan lainnya seperti kode dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Teknozen</title>
</head>
<body>
<div class="header">
<img src="awish1x1black.jpg" alt="">
<h3>Sosial Media Teknozen</h3>
</div>
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Youtube</a>
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Istagram</a>
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Twitter</a>
<div class="footer">
<p>© Teknozen 2021</p>
</div>
</body>
</html>Pada bagian :
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Youtube</a>
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Istagram</a>
<a class="kotak" href="https://www.youtube.com/channel/UCiTuqjoH9CWJhQa2Goruoog">Twitter</a>Silahkan isi dengan link dan nama sosial media kalian sendiri.
4. Masukkan Kode CSS Pada File Style.css
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
background: linear-gradient(to right, #24c1ff, rgb(81, 246, 81), yellow);
font-family: 'Roboto', sans-serif;
}
.kotak{
width: 400px;
height: 50px;
border: solid 3px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 10px;
display: block;
font-size: 30px;
text-decoration: none;
color: black;
margin-bottom: 10px;
}
.kotak:hover{
background-color: rgb(81, 246, 81);
}
.header{
text-align: center;
font-size: 35px;
}
.header img{
width: 150px;
border-radius: 50%;
margin-top: 10px;
}
.footer{
text-align: center;
margin-top: 50px;
font-size: 20px;
}Pada kode CSS ini silahkan diikuti saja dan dipelajari sendiri, jika ingin mendownload source code silahkan klik disini untuk hasil yang sudah jadi bisa klik disini. Atau bisa tonton video dibawah agar lebih jelas.
[…] Cara Membuat Linktree Sendiri Dengan HTML dan CSS 2021 […]