Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya Terbaru 2023

Di sosial media, banyak orang yang menampilkan link profil keren atau Social Page miliknya di bio. Social Page atau biasanya disebut link profil ini merupakan

Min Fx

Cara Membuat Link Profil atau Social Page Secara Manual di GitHub @ezfileid

Di sosial media, banyak orang yang menampilkan link profil keren atau Social Page miliknya di bio. Social Page atau biasanya disebut link profil ini merupakan website atau laman statis yang berisi informasi terkait identitas atau hal-hal lainnya yang ingin kita bagikan untuk umum.

Sebagai contoh, berikut merupakan link Social Page milik saya:
https://s.id/MeziMezi

Tutorial lengkap membuat Social Page atau link profil keren ini bisa kamu ikuti di HP maupun PC. Saya akan bahas selengkap mungkin sehingga bagi kamu yang masih awam soal ngoding-pun tidak akan mempunyai masalah selama mengikuti langkah-langkah di bawah dengan benar. Namun setiap orang dapat menjumpai permasalahan yang berbeda, sehingga jangan sungkan untuk bertanya di komentar. Saya akan bantu secepat dan sebisa mungkin.

Mengapa harus membuat Link Profil Keren secara Manual?

Sebenarnya banyak platform pembuatan link profil keren yang gratis seperti Desty Page, Linktree, dan sebagainya. Namun kali ini berbeda, karena kita akan membuat link profil atau Social Page kita sendiri secara manual, dengan meng-hostingnya di GitHub.

Tetapi kenapa harus membuat link profil kita sendiri secara manual jika membuat link profil keren juga bisa dilakukan dengan mudah di platform yang sudah ada? Berikut saya tuliskan beberapa kelebihan dan kekurangan antara membuat link profil sendiri secara manual dan membuat link profil di platform khusus yang sudah ada!

Membuat Link Profil di Platform Khusus

+ Mudah
+ Cepat
+ Tampilan sederhana
– Banyak pemakainya sehingga terkesan mainstream/pasaran
– Tampilan gitu-gitu aja
– Ada beberapa fitur yang jika ingin dipakai maka harus membayar

Membuat Link Profil Secara Manual di GitHub

+ Gratis sepenuhnya
+ Anti mainstream
+ Tampilan kustom sesuka hati
– Diperlukan pemahaman lebih lanjut tentang pembuatan website jika ingin mengeditnya lebih jauh

Yups, membuat link profil keren secara manual memang agak sulit, terlebih jika kamu ingin mengeditnya sesuka hati. Sejatinya memang membuat link profil ini sama dengan membuat website. Namun bukan berarti kamu gak akan bisa membuatnya, lho! Pada artikel ini, saya akan membagikan tutorial untuk membuat link profil keren atau Social Page di GitHub dengan mudah. Berikut tutorialnya!

Cara Membuat Link Profil Keren atau Social Page di GitHub

Sebelum memulai, pastikan kamu sudah memiliki akun GitHub terlebih dahulu. Ikuti tutorialnya pada artikel berikut:
Cara membuat akun GitHub.

A. Membuat Repositori Baru

Repositori merupakan struktur data yang menyimpan metadata untuk sekumpulan struktur berkas atau direktori. Singkatnya, kamu dapat menganggap repositori adalah folder istimewa atau folder induk dan sebagainya. Repositori di sini akan kita gunakan untuk menyimpan Social Page atau link profil kita nantinya.

  1. Di beranda sebelah Recent Repositories, tap New
  2. Pada kolom Repository Name, masukkan nama repositori dengan format username_kamu.github.io
    Contoh: aezife.github.io.*
    *Catatan: Mengapa perlu menambahkan alamat github.io di alamat social page yang akan dibuat? Hal ini karena sejatinya kita numpang domain dan hosting di GitHub. Hal ini sama seperti di Blogger, yang mana jika membuat blog di sana maka akan ada blogspot.com pada alamat blognya.
  3. Tandai opsi Public
    Repositori harus di set ke Public agar bisa dibuka oleh siapapun, karena tujuan kita membuat Social Page agar bisa dilihat banyak orang. Jika di set Private, maka repositori kita tidak bisa dilihat umum.
  4. Sisanya biarkan secara default, lalu tap Create Repository
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

B. Membuat Laman Statis (index.html)

Setelah membuat repositori, kita akan membuat laman statis di dalamnya. Ikuti langkah-langkah berikut ini:

  1. Buka repositori yang tadi telah dibuat
    Di beranda, tap menu tab Repositories lalu tap repositori yang tadi dibuat.
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
  1. Buat file baru dengan cara tap creating a new file lalu beri nama index.html
    Jika kamu membuka GitHub di browser HP, tap tiga titik di bawah header untuk menemukan tombol Create new file.
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
  1. Salin (copy) kode berikut lalu tempelkan (paste) di kolom Edit new file
<html>
    <head>
        <title>@aezife Social Page</title>
    </head>
    <body>
        <p>Halo Dunia! Selamat datang di laman sosialku!</p> 
    </body>
</html>
  1. Scroll ke bawah, lalu tap Commit new file
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
  1. Pembuatan laman statis telah berhasil!

Selamat, pembuatan laman statis telah berhasil! Silakan tunggu sekitar 3-10 menit lalu buka alamat username_kamu.github.io di browser kesayangan kamu. Hasilnya akan seperti di gambar berikut ini:

Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

C. Membuat Link Profil/ Social Page (Laman Sosial)

Di langkah B, kita sudah berhasil membuat sebuah laman statis sebagai percobaan. Langkah selanjutnya yaitu membuat link profil keren seperti tujuan awal kita. Berikut saya sediakan contoh template link profil dan cara mengeditnya:

1. 4 Contoh Template Link Profil/ Social Page

a. Portofolio by Sulistio
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Klik link berikut untuk men-download:

b. Gitfolio by Imfunniee
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Klik link berikut untuk men-download:

Catatan: Gitfolio dibuat oleh authornya khusus untuk menampilkan projek-projek GitHub. Kamu dapat menginstal dan mengeditnya dengan mengikuti intruksi yang disediakan author pada file readme.md.

c. Minimal Grid by Jabedford
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Klik link berikut untuk men-download:

d. Gatsby by Britannychiang
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Klik link berikut untuk men-download:

Catatan: Gatcby didesain dengan sangat keren (*imo) oleh authornya, namun kamu mungkin perlu pemahaman lebih jauh untuk mengedit template ini. Silakan baca intruksinya pada file readme.md.

e. Fimbo. by Imfunniee
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Klik link berikut untuk men-download:

TAMBAHAN!

Kamu juga dapat membuat template sendiri menggunakan Bootstrap Builder, akses melalui link berikut:
https://bootsnipp.com/builder

2. Cara Mengedit Template Link Profil

Sebagai percobaan, mari kita gunakan template Portfolio by Sulistio di atas. Template dari Kak Sulistio ini simpel dan mudah diedit, sehingga sangat cocok untuk pemula yang bahkan tidak mengenal koding sama sekali.

Selain itu, ada beberapa hal yang perlu kamu perhatikan sebelum memulai, yaitu:

  • Jika kamu akan mengedit menggunakan HP atau smartphone (Android/ iOS), silakan instal aplikasi 7zip untuk mengekstrak file template.zip di atas
    • Unduh 7zip via Play Store atau App Store
a. Mengekstrak ZIP template
  1. Unduh file Portfolio by Sulistio.zip di atas
  2. Ekstrak file Portfolio by Sulistio.zip ke salah satu folder
    Saya sarankan untuk mengekstrak file Portfolio by Sulistio.zip ke folder baru agar mudah untuk meng-uploadnya nanti. Misalnya buat folder Template lalu ekstrak file Portfolio by Sulistio.zip ke folder tersebut menggunakan 7zip (Android/ iOS) atau File Explorer (PC).

File Explorer atau Windows Explorer bisa diakses dengan cara menekan Windows+E bersamaan

b. Meng-upload file template
  1. Di beranda, tap menu tab Repositories lalu buka repositori username_kamu.github.io yang telah dibuat
  2. Tap index.html
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
  1. Hapus file index.html dengan cara tap logo tempat sampah (Delete file) lalu tap Commit changes
    Jika kamu membuka GitHub di browser HP, tap tiga titik di atas kode untuk menemmukan tombol Delete file.
    Kenapa file index.html dihapus? Jawabannya karena kita akan menggunakan salah satu dari empat template di atas, sehingga kita akan meng-upload file index.html baru.
    *Barangkali kamu lupa, setelah menghapus index.html jangan lupa untuk tap Commit changes.
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
  1. Tap Add file lalu tap Upload files
    Jika kamu membuka GitHub di HP, tap tiga titik di bawah header untuk menemukan tombol Upload fi
  1. Upload semua file hasil ekstrak Portfolio by Sulistio.zip tadi lalu tap Commit changes
    Di sini saya intruksikan untuk meng-ekstrak semua file yang ada di template Portfolio by Sulistio.zip, namun kenyataannya di dalam file tersebut hanya ada file index.html dan readme.md*. Hal ini tidak akan kamu temukan di template lainnya yang saya share di atas, sehingga kamu perlu meng-upload semua file yang ada di file template.zip tersebut.
    *File readme.md sebenarnya hanya berisi catatan, sehingga jika tidak di upload juga tidak menjadi masalah. Meski begitu, kebanyakan author menuliskan intruksi pemakaian template-nya di file readme.md ini.
Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya

Berikut tampilan repositori setelah file index.html dan readme.md berhasil di upload.

Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya
c. Mengedit file index.html
  1. Di beranda, tap menu tab Repositories lalu buka repositori username_kamu.github.io yang telah dibuat
  2. Tap index.html yang tadi kamu upload
  3. Tap Edit this file

Selanjutnya yaitu mengubah hal-hal yang perlu kamu ubah. Dalam template Portfolio by Sulistio ini, adapun hal-hal yang perlu kamu ubah yaitu sebagai berikut:

  1. Link foto profil
<!-- src="link_foto_kamu" -->
<img class="profil" src="https://blogger.googleusercontent.com/img/a/AVvXsEgcGyLSAzhTCSB4lPLCljV6Sclfj_zT_1M2uFP6p7MmoMEmiKNl6GG2x3c12yVmBFGO9XK1DWgtb3gojZ72klYFupxVrHb6agNVnDMuIszkKzBLv_IIfzhHdeu-o4tWD-m2fXVDqWJmKhHsFpAH0I99__lQYaAXokL1Lj7R-eCDs-0XFgwcnkaDaRnC" alt="swarnab">

Kamu dapat menggunakan foto yang diupload ke Facebook, Instagram, dsb. Salin link foto kamu dan tempelkan dengan cara mengganti kode berwarna merah.

  1. Username, kalimat sapaan, dsb

<span class="hello">Welcome to</span>


<h3> @aezife </h3>


<h5>Social Page</h5>
  1. Link sosial media
<ul class="social-icons">
    <li><a href="https://fb.me/aezife" class="social-icon"> <i class="fa-brands fa-facebook-f"></i></a></li>

    <li><a href="https://instagram.com/aezife" class="social-icon"> <i class="fa-brands fa-instagram"></i></a></li>

    <li><a href="https://www.aezife.com" class="social-icon"> <i class="fa-solid fa-globe"></i></a></li>

    <li><a href="https://www.youtube.com/channel/UCDXr8aQOq16XBk3SMSahfcQ" class="social-icon"> <i class="fa-brands fa-youtube"></i></a></li>

    <li><a href="https://www.linkedin.com/" class="social-icon"> <i class="fa-brands fa-linkedin-in"></i></i></a></li>

    <li><a href="https://github.com/" class="social-icon"> <i class="fa-brands fa-github"></i></a></li>

    <li><a href="https://pinterest.com/ezfileid" class="social-icon"> <i class="fa-brands fa-pinterest-p"></i></a></li>

    <li><a href="https://twitter.com/" class="social-icon"> <i class="fa-brands fa-twitter"></i></a></li>

    <li><a href="https://t.me/" class="social-icon"> <i class="fa-brands fa-telegram"></i></a></li>

    <li><a href="https://wa.me/" class="social-icon"> <i class="fa-brands fa-whatsapp"></i></a></li>

    <li><a href="https://twitch.tv/" class="social-icon"> <i class="fa-brands fa-twitch"></i></a></li>

    <li><a href="https://www.tiktok.com/@ezfileid" class="social-icon"> <i class="fa-brands fa-tiktok"></i></a></li>

    <li><a href="https://www.reddit.com/" class="social-icon"> <i class="fa-brands fa-reddit-alien"></i></a></li>

    <li><a href="https://www.snapchat.com/" class="social-icon"> <i class="fa-brands fa-snapchat"></i></a></li>

    <li><a href="https://www.tumblr.com/" class="social-icon"> <i class="fa-brands fa-tumblr"></i></a></li>

    <li><a href="https://discord.com/" class="social-icon"> <i class="fa-brands fa-discord"></i></a></li>

    <li><a href="https://www.patreon.com/" class="social-icon"> <i class="fa-brands fa-patreon"></i></a></li>

    <li><a href="https://medium.com/" class="social-icon"> <i class="fa-brands fa-medium"></i></a></li>

    <li><a href="https://open.spotify.com/user/a2e4b9bdjszw4my6ei19turnd?si=thHv9uykS0q8RddYG1gv1Q&utm_source=copy-link" class="social-icon"> <i class="fa-brands fa-spotify"></i></a></li>
</ul>

Keterangan:

  • Kode berwarna merah merupakan link yang harus disesuaikan
  • Kode berwarna kuning merupakan kalimat yang harus disesuaikan
d. Selesai

Untuk melihat hasilnya, kunjungi alamat yang berupa repositori yang telah dibuat (username.github.io).
Contoh: https://aezife.github.io (ganti aezife dengan username akun GitHub-mu).


Itulah tutorial lengkap untuk membuat link profil keren atau social page. Selanjutnya kamu tinggal menampilkan link tersebut di bio Instagram, Facebook, TikTok, dan sebagainya. Kamu juga dapat memendekan url social page milikmu dengan memakai shortener s.id atau bit.ly.

Contoh:
Link social page sebelum dipendekan: aezife.github.io
Link social page setelah dipendekan: s.id/MeziMezi

Semoga bermanfaat ~

Min Fx

Nothing l e s s . . .

Related Post

5 pemikiran pada “Tutorial Lengkap Membuat Social Page/Link Profil Keren untuk Instagram, Facebook, TikTok, dan Sosial Media Lainnya Terbaru 2023”

  1. Ping-balik: Rekomendasi 3 Tools Terbaik untuk Menganimasikan Desainmu! -@idyourzee - @idyourzee
  2. Ping-balik: Cara Membuat Akun GitHub Terbaru 2022 | @ezfileid
  3. Ping-balik: Kumpulan Template Social Page Keren di GitHub untuk Link Bio Sosial Media Terbaru 2022 - RSVPKU.ID
    • Bukan error gan, tapi tadi emang belum saya isi link-nya…
      Lagian agan cepet banget buka ni tutor, padahal baru banget saya publish

      Balas

Tinggalkan komentar

profil-frame

Kepada Yth.

Bapak/Ibu/Saudara/i