Di antara kalian, pasti sudah banyak yang tahu apa itu Linktree. Linktree adalah sejenis situs pembuat tombol link-link, yang sangat cocok di pasang di Instagram, dan sosial media lainnya. Kalau di Instagram, kita hanya bisa memasukkan 1 link saja di bio, tetapi jika kita memasukkan linktree di bio Instagram kita, maka bisa terhubung dengan lebih dari satu link dengan mengklik link di bio tersebut. Orang lain atau pengikut kita bisa mengklik linktree kita di bio Instagram kita, lalu muncul banyak link, seperti situs web, olshop, sosial media, blog, dan lain sebagainya.
Cara membuat linktree sangat mudah sekali. Anda hanya perlu sign up atau daftar akun kita terlebih dahulu di website linktr.ee. Kita bisa sign up dengan menggunakan akun email, Google, atau Instagram kita. Setelah sign up, kita masukkan link-link yang ingin dimasukkan, seperti link sosial media, youtube, blog, olshop, whatsapp, dsb. Daftar di Linktree gratis, akan tetapi, pada Linktree versi gratis hanya memiliki template yang sangat terbatas sekali. Kita pun tidak bisa memasukkan gambar di samping link untuk versi gratis. Warna yang disediakan pun kalau dilihat-lihat menurut kami itu terbatas. Meski banyak yang terbatas, kita bisa memasukkan linknya tanpa batas, dan bisa dimasukkan linktreenya di Instagram, Facebook, Twitter, dsb.
Apakah kalian pernah melihat orang membuat linktree sendiri di website / blog sendiri? Mungkin masih banyak yang belum pernah. IzRu Web dulu sempat membuat linktree. Tetapi, sekarang IzRu Web memiliki linktree versi sendiri di situsnya. Kalian bisa lihat di bio Instagram, Facebook, dan Twitter IzRu Web.
Baca Juga:
- Cara Membuat Tulisan dan Gambar Ber-Link di Blog
- Jam Tepat WIB, WITA, WIT, dan GMT Beserta Embed Kodenya
Bagaimana cara membuat linktree versi kita sendiri untuk web / blog kita? Awal-awalnya sih sulit, harus pandai dalam bidang HTML / CSS. Tapi, lama-kelamaan rasanya mudah untuk membuatnya. Kalian harus bisa menguasai bidang HTML / CSS. Tapi, kami akan membagikan kode HTML membuat linktree versi sendiri.
Catatan: coba lihat blog Anda apakah telah terpasang Font Awesome di template Anda? Kalau belum, silahkan di instal Font Awesomenya. Bisa lihat cara memasang Font Awesome di Google.
Berikut kode HTMLnya.
<style>
/* Linktree by IzRu Berbagi */
.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: #fff;
transition: 0.4s;
text-transform: capitalize;
background: #ff4545;
border: 2px solid #ff4545;
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">
<img src="LINK FOTO PROFIL KAMU" />
<p>NAMA KAMU</p>
</div>
</header>
<br />
<div class="linktreecontainer">
<a class="btn" href="LINK KAMU" target="blank">
<img src="LINK GAMBAR LOGO KAMU" />
NAMA WEBSITE/SOSIAL MEDIA
</a>
<a class="btn" href="LINK KAMU" target="blank">
<img src="LINK GAMBAR LOGO KAMU" />
NAMA WEBSITE/SOSIAL MEDIA 2
</a>
<a class="btn" href="LINK FACEBOOK KAMU" target="blank">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a class="btn" href="LINK INSTAGRAM KAMU" target="blank">
<i class="fa fa-instagram"></i>
Instagram
</a>
<a class="btn" href="LINK TWITTER KAMU" target="blank">
<i class="fa fa-twitter"></i>
Twitter
</a>
<a class="btn" href="LINK TELEGRAM KAMU" target="blank">
<i class="fa fa-telegram"></i>
Telegram
</a>
<a class="btn" href="LINK YOUTUBE KAMU" target="blank">
<i class="fa fa-youtube-play"></i>
YouTube
</a>
</div>
<!--AKHIR LINK
_________________________________________________________________________________-->
<div style="color: #363636; font-size: 12px; padding-top: 50px; text-align: center;">
<i>Powered by IzRu Berbagi</i></div>Ganti LINK KAMU dengan link web, sosial media kamu, dsb
Ganti LINK FOTO PROFIL KAMU dengan link gambar profil yang ingin dipasang.
Kode/tulisan #ff4545 boleh kalian ganti dengan warna yang Anda suka. Bisa cek kode warna di Google.
Baca Juga:
Kalau kalian ingin menambah link website, salin kode berikut dan tempelkan dibawah
</div> atau diatas AKHIR LINK<a class="btn" href="LINK KAMU" target="blank">
<img src="LINK GAMBAR LOGO KAMU" />
NAMA WEBSITE/SOSIAL MEDIA
</a> Kalau kalian ingin menambah link sosial media baru / yang lain, salin kode berikut dan tempelkan dibawah
</div> atau diatas AKHIR LINK<a class="btn" href="LINK SOSIAL MEDIA KAMU" target="blank">
<i class="KODE FONT AWESOME"></i>
NAMA SOSIAL MEDIA
</a> Untuk menghilangkan icon sosial media, silahkan hapus bagian yang berwarna merah
<a class="btn" href="LINK SOSIAL MEDIA KAMU" target="blank">
<i class="KODE FONT AWESOME"></i>
NAMA SOSIAL MEDIA
</a> Untuk menghilangkan gambar/icon web, silahkan hapus bagian yang berwarna merah.
<a class="btn" href="LINK KAMU" target="blank">
<img src="LINK GAMBAR LOGO KAMU" />
NAMA WEBSITE/SOSIAL MEDIA
</a> Kemudian klik save / simpan / publikasikan lalu lihat hasilnya.
Baca Juga: Cara Membuat Wifi Sendiri dari Kaleng Bekas
Untuk melihat hasilnya, klik disini (demo).
Catatan: masukkan kode tersebut di kolom HTML, bukan di Compose / tampilan menulis.
Sekian artikel cara membuat linktree versi sendiri di web / blog. Semoga bermanfaat. Silahkan di coba di pasang di web Anda. Selamat mencoba!
Terima kasih telah berkunjung.
Sumber:
- blogadityajanuardi.blogspot.com
Posting Komentar