Gampang‼ Membuat Linktree Sendiri dengan HTML dan CSS + Custom Domain

    Cara membuat linktree sendiri dengan html dan css

     Linktree, kata tersebut sering terbaca secara tak sengaja saat membuka suatu profil Instagram, Twitter, Facebook dan platform sejenisnya.

    Sebenarnya apa sih Linktree, buat apa sih dan gimana cara bikinnya? Silahkan pelajari lebih lanjut di artikel ini.

    Apa itu Linktree?

    Linktree adalah alat untuk membuat satu halaman dengan tampilan simple yang berisi beberapa link menuju tempat lain, misalnya link menuju toko online, profil Facebook, Twitter, Instagram dan sebagainya.

    Alat tersebut sering digunakan oleh public figure, seseorang yang memiliki usaha online, blogger dan seseorang yang mempunyai banyak akun media sosial.

    Untuk Apa Linktree?

    Linktree digunakan untuk memaksimalkan traffic dari media sosial, misalnya untuk mengarahkan followers ke toko online guna meningkatkan penjualan, atau mengarahkan ke blog guna mendapatkan lebih banyak pengunjung.

    Jika Anda membuat linktree Anda dapat menggunakannya (menempelkan) di Whatsapp, Line, Shopee, Instagram dan tempat lain.

    Karena kebijakan Instagram yang tidak mengizinkan hyperlink dalam posting maka menggunakan linktree adalah solusinya.

    Bagaimana Cara Kerjanya?

    Saat seseorang membuka tautan linktree pada bio Instagram misalnya, maka akan mengarah ke sebuah halaman sederhana yang berisi kumpulan link. Kemudian jika salah satu link diklik maka akan diarahkan ke halaman yang dituju.

    Anda dapat membuatnya secara mudah pada situs web link.tree, tetapi untuk menikmati beberapa fitur menarik hanya tersedia jika memilih versi premium.

    Bagi yang ingin membuat linktree versi sendiri, mungkin perlu mengetahui dasar-dasar coding seperti HTML dan CSS. Gak usah jago-jago amat juga bisa kok! Berikut tutorialnya.

    Cara Membuat Linktree Sendiri

    Yang perlu disiapkan untuk membuat linktree versi sendiri antara lain:

    • Template Linktree (Udah disediakan dibawah).
    • Hosting, kalo pengen gratisan pakai GitHub pages.
    • Nama Domain, ini kalo mau custom domain biar Brandable (Rekomendasi hosting .COM murah ada dibawah ini :D).
    • Aplikasi Coding, untuk pengguna Android Anda dapat menginstall salah satu Aplikasi coding di Android Offline.
    • Koneksi internet di perangkat Anda (HP/Lepi/PC).

    1. Buat File HTML dengan nama index.html

    Berikut codingannya:

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
       <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fendi Ali @fendialii - Tetaplah Terhubung</title>
        <meta name="description" content="Fendi Ali - Linktree, Neumorphism Soft UI Design. ">
    <meta name="keywords" content="Linktree, Bio Link, Template, neumorphism UI, Theme, Codepen, GitHub">
    <meta name="robots" content="index, follow">
    <link rel="stylesheet" href="main.css">
    </head>
    
    <body>
      
      <div class="container">
        <header class="heamder">
          <img class="bumderan fomto">
          <h1>@fendialii</h1>
        </header>
        <main class="btn-tree">
            <button class="btn-link" onclick="location.href='https://bit.ly/31wRz5U'">My Personal Blog</button>
            <button class="btn-link ngocok" onclick="location.href='https://bit.ly/3jiGNWV'">Tool: YouTube Tags Viewer</button>
            <button class="btn-link" onclick="location.href='https://twitter.com/fendialiii'">Twitter</button>
            <button class="btn-link" onclick="location.href='https://facebook.com/example.json'">Facebook</button>
            <button class="btn-link" onclick="location.href='https://instagram.com/fendialii'">Instagram</button>
        </main>
        <footer>
          Linktree Neumorphism Soft UI Design, Theme by <a href="https://www.instagram.com/fendialii">Fendi Ali</a>, Hosted on <a href="https://github.com/fendiali">GitHub</a>
        </footer>
      </div>
    </body>
    </html>
    

    Silahkan Anda ubah kodingan diatas di bagian Nama, deskripsi, foto dan button link sesuai yang diinginkan. Untuk memberi efek shake pada link tombol, edit class button menjadi class="btn-link ngocok".

    2. Buat File CSS dengan nama main.css

    Berikut codingannya:

    
    @import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500&display=swap');
         @import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap');
    
    :root {
        --bg-color:#EBECF0;
        --color-w: #FFF;
        --color-s: #BABECC;
        --accent-color:#7E90F8;
        --font: 'Poppins',sans-serif;
        --feneumorphism: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
        --feneumorphism-inset:inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
    }
    
    
    body {
        margin:0;
        padding:0;
        box-sizing: border-box;
        display:flex;
        font-size: 16px;
        flex-direction: column;
        font-family: var(--font);
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        letter-spacing: -0.2px;
        color: var(--color-s);
      text-shadow: 1px 1px 1px var(--color-w);
        background-color: var(--bg-color);
    }
    
    .container {
      padding:50px;
      max-width:1080px;
      margin:0 auto;
    }
    .bumderan {
    	  -moz-box-shadow: var(--feneumorphism-inset);
    	  -webkit-box-shadow: var(--feneumorphism-inset);
    	  box-shadow: var(--feneumorphism-inset); 
    	  -moz-border-radius:50%; 
    	  -webkit-border-radius:50%; 
    	  border-radius:50%;
    	  
      }
    
      .fomto {
    	  width: 90px;
    	  height: 90px;
    	  background: var(--bg-color);
    	  background-image: url("https://scontent.fsub2-2.fna.fbcdn.net/v/t1.0-9/fr/cp0/e15/q65/118154083_1293017191045188_6024330906885362052_n.jpg?_nc_cat=106&ccb=1&_nc_sid=85a577&efg=eyJpIjoidCJ9&_nc_eui2=AeHSnbCvEcWlbqAwkm-HUhoXk04_lqKJlYiTTj-WoomViPk60ikgURXLvVAvSH7wIH6ADJ-LcgZGwsq3R1JZGoyG&_nc_ohc=yCppUEM9EJcAX-f1YaV&_nc_ht=scontent.fsub2-2.fna&tp=14&oh=648fd0145670546afcefb329c6fb2805&oe=5FB608FC");
    	  background-size: cover;
    	  background-repeat: no-repeat;
    	  background-position: 50% 50%;
      }
    .heamder {
      color: var(--color-s);
      text-align: center;
      margin-bottom:35px;
    }
    .heamder h1 {
      font-family: 'Merienda One', cursive;
      font-weight: 400;
      font-size: 18px;
    }
    .btn-tree {
      margin:20px 0;
    }
    .btn-link {
        font-family: var(--font);
        font-size:1em;
        font-weight: 500;
        border: 0;
        outline: 0;
        width:100%;
        background-color:var(--bg-color);
        color:var(--accent-color);
        padding:10px 40px;
        border-radius:12px;
        min-width:190px;
        margin-bottom:30px;
        cursor: pointer;
        text-shadow: 1px 1px 0 var(--color-w);
        box-shadow: var(--feneumorphism);
        transition:background-color 300ms ease-in-out;
    }
    
    .btn-link:hover {
        box-shadow: var(--feneumorphism-inset);
        
    }
    .btn-link:active {
      box-shadow: var(--feneumorphism-inset);
    }
    .ngocok {
    	animation: ngocok-animation 4.72s ease infinite;
    	transform-origin: 50% 50%;
      }
    @keyframes ngocok-animation {
    	 0% { transform:translate(0,0) }
    	1.78571% { transform:translate(5px,0) }
    	3.57143% { transform:translate(0,0) }
    	5.35714% { transform:translate(5px,0) }
    	7.14286% { transform:translate(0,0) }
    	8.92857% { transform:translate(5px,0) }
    	10.71429% { transform:translate(0,0) }
    	100% { transform:translate(0,0) }
      }
    
    footer {
      text-align: center;
    }
    footer a{
      color: var(--accent-color);
      text-decoration: none;
    }
    

    3. Upload File Linktree tersebut ke Hosting Anda

    Jika ingin menggunakan GitHub, silahkan buat akun GitHub > Buat Repository dengan nama (namaAnda.github.io) > upload file > klik Setting > aktifkan GitHub page.

    4. Arahkan Domain ke Hosting Anda, selesai

    Silahkan setting DNS Domain untuk diarahkan ke GitHub Page Anda. Jika Anda belum memiliki domain, Anda dapat membeli domain murah disini.

    Live Preview

    Kelebihan Membuat Linktree Sendiri

    Beberapa kelebihan jika Anda membuat halaman Linktree sendiri antara lain:

    • Brandable, karena menggunakan nama domain sendiri bukan link.tree/blabla.
    • Mudah dikostumisasi, Anda bebas custom tampilan linktree.
    • Professional.

    Akhir kata...

    Jika ada pertanyaan terkait, anda dapat menyampaikannya melalui halaman kontak disini.