MEMBUAT LINKTREE TANPA LINKTREE - BEGINI CARANYA

Jumat, 25 Februari 2022


Karena satu link aktif di bio sosial media tidak cukup untuk flexing segala pencapaian anda. Tidak bisa menunjukkan seluruh media sosial anda yang verified dan mempunyai jumlah pengikut banyak, tidak bisa menunjukkan bahwa anda kuliah di banyak kampus ternama seperti Oxford, UoB, dll, atau juga tidah bisa menunjukkan bahwa skor IELTS anda 8,5. 

Berikut adalah cara bagaimana mengatasi hal tersebut?
Mungkin beberapa dari anda merasakan hal yang sama dengan saya. Pada beberapa sosial media, di halaman bio atau profilnya hanya menyediakan satu link aktif atau link yang bisa di klik. Jadi apabila anda ingin mencantumkan banyak link (misal anda mau mencantumkan seluruh media sosial yang anda punya pada bio atau profil anda), maka link tersebut tidak bisa di klik. Memang, sungguh sangat menyebalkan.

Sebenarnya ada beberapa cara yang bisa dilakukan. Yang pertama, apabila anda mempunyai blog atau website, cukup buat page baru. Anda bisa membuatnya via HTML atau CSS, tergantung preferensi masing-masing. Dibawah ini adalah contoh HTMLnya.

<style>
/* Linktree by Tiko Prabhata */
.linktreelogo {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 0;
flex-direction: column;
}

.linktreelogo img{
height: 75px;
}

.linktreelogo p{
font-size: 24px;
color:#5c5c5c;
font-weight: 600;
}

.linktreecontainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10px;
}

.linktreecontainer .btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border-radius: 5px;
padding: 5px;
margin-top: 15px;
font-size: 17px;
text-decoration: none;
color: #141719;
transition: 0.4s;
text-transform: capitalize;
background: #ebeef0;
border: 2px solid #ebeef0;
width: 90%;
}

.linktreecontainer .btn i {
margin-right: 10px;
font-size: 25px;
}

.linktreecontainer .btn:hover {
background: #fff;
font-weight: bold;
color: black;
font-size: 18px;
}

.linktreecontainer img{
height: 28px;
width : 28px;
margin-right: 15px;
}

</style>

<!-- HTML START HERE
_________________________________________________________________________________ -->

<header>
<div class="linktreelogo">
<p>NAMA ANDA</p>
</div>
</header>
<br />
<div class="linktreecontainer">
<a class="btn" href="ALAMAT BLOGGER ANDA" target="blank">
<i class="fab fa-blogger"></i>
BLOGGER
</a>
<a class="btn" href="ALAMAT YOUTUBE ANDA" target="blank">
<i class="fab fa-youtube"></i>
YOUTUBE
</a>
<a class="btn" href="ALAMAT INSTAGRAM ANDA" target="blank">
<i class="fab fa-youtube"></i>
INSTAGRAM
</a>
<a class="btn" href="ALAMAT FACEBOOK ANDA" target="blank">
<i class="fab fa-youtube"></i>
FACEBOOK
</a>
<a class="btn" href="ALAMAT TWITTER ANDA" target="blank">
<i class="fab fa-youtube"></i>
TWITTER
</a>
</div>
<!-- END LINK
_________________________________________________________________________________ -->

<div style="color: #141719; font-size: 12px; padding-top: 50px; text-align: center;">
<i>Created by Tiko Prabhata</i></div>


Anda bisa mengganti tulisan yang saya BOLD sesuai dengan preferensi anda masing-masing. Contoh, pada script dibawah ini, anda bisa mengganti NAMA ANDA.

<header>
<div class="linktreelogo">
<p>NAMA ANDA</p>
</div>
</header>

Anda juga bisa menambahkan script dibawah apabila anda ingin menambahkan media sosial anda lainya. Cukup ganti tulisan yang saya BOLD.

<a class="btn" href="ALAMAT MEDIA SOSIAL ANDA" target="blank">
<i class="fab fa-NAMA MEDIA SOSIAL"></i>
NAMA MEDIA SOSIAL
</a>

Untuk contoh penerapanya, anda bisa klik tulisan dibawah ini.


Masih belum berhasil? atau mungkin menurut anda, langkah diatas terlalu rumit? anda bisa mencoba opsi selanjutnya yaitu menggunakan Linktree (atau Linktr.ee).

Well, sebenarnya ada banyak aplikasi sejenis seperti Campsite.bio, ContactInBio, lynkfire, dan lain sebagainya. Tapi saya pribadi lebih prefer ke Linktr.ee. Dibawah ini adalah Linktr.ee saya.


Akhir kata, doa baik saya untuk anda yang menyebutkan nama saya di setiap doa baik anda.

Salam.

Posting Komentar

© tikoprabhata.