Bagi Anda yang belum tahu, Linktree adalah layanan yang memungkinkan Anda membuat satu halaman yang berisi kumpulan link ke berbagai platform atau media sosial. Sangat cocok digunakan di bio Instagram, TikTok, atau platform lainnya untuk membagikan semua tautan penting dalam satu tempat.
Nah, di sini saya akan menunjukkan cara membuat versi sederhananya sendiri yang bisa Anda edit sesuai kebutuhan, tanpa perlu framework atau bahasa pemrograman tambahan. Cukup HTML dan CSS saja!
Tampilan Website
Website ini menampilkan elemen-elemen seperti:
- Foto profil
- Nama
- Bidang atau profesi
- Deskripsi
- Daftar tautan
Tentunya, semua bagian ini sepenuhnya bisa Anda ubah sesuai dengan keiinginan Anda. Selain itu, tampilannya sudah responsif dan akan tetap nyaman diakses baik melalui laptop maupun HP.
Langkah-Langkah Membuat Website Seperti Linktree
- Download Kode
Pertama-tama, silakan download dulu kode lengkapnya melalui GitHub saya. Link download kode: https://github.com/rizkyramadhanikalinggaputra/linktree
Jika Anda belum tahu cara download kode di GitHub dan cara membukanya di code editor, Anda bisa ikuti tutorial berikut: Cara Download File atau Kode di GitHub dan Cara Membukanya di Code Editor. - Buka dan Edit Kode
Setelah Anda mendownloadnya, silakan buka file tersebut menggunakan code editor. Di sini saya menggunakan Visual Studio Code.
Berikut bagian-bagian yang perlu Anda edit:
a. Judul Halaman dan Favicon
- Judul Halaman: Ubah bagian <title> di file HTML menjadi nama Anda sendiri.
- Favicon: Gunakan gambar rasio 1:1 dan beri nama logo.jpg. Simpan di dalam folder img. Jika Anda menggunakan format lain (misalnya PNG), tinggal sesuaikan saja bagian ekstensi file di kode.
b. Foto Profil, Nama, Bidang, dan Deskripsi
- Foto Profil: Anda bisa gunakan gambar yang sama seperti favicon agar lebih ringan, atau pakai foto berbeda sesuai kebutuhan. Pastikan tetap rasio 1:1 agar tampilannya rapi.
- Nama: Ubah bagian nama sesuai dengan nama Anda.
- Bidang atau profesi: Ubah bagian bidang sesuai dengan bidang Anda.
- Deskripsi: Ubah bagian deskripsi agar sesuai dengan penjelasan tentang diri Anda.
c. Daftar Tautan
- Nama tautan: Ubah teks dalam tag <span>.
- Ikon: Ikon menggunakan Font Awesome. Anda bisa ganti ikon dengan mencarinya di fontawesome.com. Cari ikon yang sesuai, lalu salin nama kelas ikonnya (misalnya fab fa-youtube) dan tempel di bagian HTML.
- Link tujuan: Ubah nilai href ke link media sosial Anda. - Hosting Website
Setelah selesai mengedit kode, Anda bisa menghosting website ini agar bisa diakses oleh siapa pun. Anda bebas memilih hosting berbayar atau gratis. Jika Anda ingin menggunakan hosting gratis, saya sarankan menggunakan Vercel. Saya sudah membuat tutorial cara hosting website di Vercel, dan Anda bisa membacanya melalui link berikut: Cara Hosting Website Gratis di Vercel.
Nah, itu dia cara membuat website seperti Linktree hanya dengan menggunakan HTML dan CSS. Semoga artikel ini bermanfaat dan membantu Anda membuat halaman personal link sendiri dengan mudah. Jika Anda masih kurang paham dengan tutorial versi artikel ini, Anda juga bisa menonton versi videonya melalui link berikut: Cara Buat Website Seperti Linktree Cuma Pakai HTML dan CSS.
Terima kasih!