RF Free Bio - Free Link in Bio

Ini adalah website link in bio dengan memanfaatkan Blogger. Baca tutorialnya di sini.

Cara Kerja

Link in Bio merupakan salah satu jenis website yang menampilkan tumpukan link pada suatu profile individu.

Pada aplikasi ini, semua itu dilakukan dengan HTML, CSS, JS.

Agar tidak perlu sewa hosting, maka Blogger atau Blogspot digunakan.

Platform tersebut juga digunakan karena fleksibilitasnya dalam menangani custom HTML, CSS, dan JS dalam layout template yang terpilih.

Beberapa elemen widget yang tersisa bisa dihidden dengan mengaturnya di menu Layout atau dengan CSS display none.

Keuntungan tambahan dengan menggunakan Blogger atau Blogspot adalah di platform tersebut kita bisa membuat custom domain.

Jadi, setidaknya, secara teoritis, kita bisa membuat sebuah dedicated Link in Bio tanpa sewa hosting dan hanya perlu membayar domain saja.

Teknologi yang Digunakan

Aplikasi ini dibuat dengan menggunakan HTML, CSS, dan JavaScript.

Blogger atau Blogspot digunakan untuk backend-nya.

Untuk menampilkan gambar kucing secara acak, digunakan web service yang bernama Cataas.

Screenshot

Rekonstruksi

Script yang perlu dipasang di widget adalah seperti ini:

<style>
h1{
color: #F59E0B !important;
}
    .profile {
      text-align: center;
      margin-bottom: 2rem;
    }

    .avatar {
      width: 240px;
      height: 240px;
      border-radius: 50%;
      border: 4px solid #F59E0B;
      object-fit: cover;
      margin-bottom: 1rem;
    }

    .name {
      font-size: 1.5rem;
      font-weight: bold;
    }

    .bio {
      font-size: 1rem;
      color: #718096;
    }

    .links {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .link-button {
      text-decoration: none;
      background: #F59E0B;
      color: white;
      padding: 0.8rem 1rem;
      border-radius: 10px;
      text-align: center;
      font-size: 1.1rem;
      transition: background 0.3s ease;
    }

    .link-button:hover, .link-button:visited {
color: white;
      background: #D97706;
    }

    footer {
      margin-top: 2rem;
      font-size: 0.9rem;
      color: #718096;
    }

.post-outer-container {
display: none !important;
}
  </style>


  <div class="profile">
    <img src="https://cataas.com/cat" alt="Avatar" class="avatar" />
    <div class="bio">Tools Developer | Programmer | Self Hoster</div>
  </div>

  <div class="links">
    <a href="https://rakifsul.github.io" class="link-button" target="_blank">Portfolio Coding</a>
    <a href="https://github.com/rakifsul" class="link-button" target="_blank" rel="nofollow">GitHub</a>
<a href="https://x.com/rakifsul" class="link-button" target="_blank" rel="nofollow">X/Twitter</a>
  </div>

  <footer style="text-align:center;">&copy; <span id="year"></span> R.A.K.I.F.S.U.L</footer>

  <script>
    // Auto update tahun di footer
    document.getElementById("year").textContent = new Date().getFullYear();
  </script>

Download Source Code-nya

• rf_free_bio-2025.08.16-0710