Link list is a useful feature for social media. The most popular one is from linktr.ee. The problem with link-tree is that you have to use their domain like linktr.ee/yourname which is not a good thing. I have always wanted to share links on social media like Instagram, but it is a nuisance when you have to change links on bio every time. I came to know about link tree somewhere in 2018 and I tried but hate it, so I decided to put my html skill to use and did it myself. Here in this short write up, I'm sharing how simple and easy it is to do it. You can check my link-list web-app at fdh.pw. Here is what you need to get yourself a custom link list web-app of your choice.
[<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap demo</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"></head><body><h1>Hello, world!</h1><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script></body></html>]
[<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">]
[<a class="btn btn-primary" href="#" role="button">Link</a>]
After this, to customise the look of the site, I'm going to add a few line of css to change default colour and background colour of bootstrap button
[<style>body {background-color: #c2deff;}.btn{background-color: #1e4c7c;color: #fff;display:block;}.btn:hover {background-color:#326092;color:#fff;}</style>]
Then additional classes to enhance visibility as follows:
[<a class="btn text-start my-4 p-3" target="_blank">Link</a>]
This will make my link look like this:
[<div class="container"> <div class="py-2"> <svg class="mx-auto d-block" width="100" height="100"><use xlink:href="#fdphy"></use></svg> <div class="text-center social py-2"> <a href="https://youtube.com/fdphy/?sub_confirmation=1" class="text-decoration-none text-dark h4"><i class="bi bi-youtube"></i></a> <a href="https://facebook.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-facebook"></i></a> <a href="https://twitter.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-twitter-x"></i></a> <a href="https://instagram.com/fdphy" class="text-decoration-none text-dark h4"><i class="bi bi-instagram"></i></a> <a href="https://fdiengdoh.com" class="text-decoration-none text-dark h4"><i class="bi bi-globe"></i></a> </div> <div class="text-center"> @fdphy </div> </div> <div class="col-lg-8 mx-auto"> <!-- Links list here --> <a class="btn text-start my-4 p-3" target="_blank">Link</a> </div> </div>]
This part of the code will add these icons and linked to my social media when you tap the icons. The icons look as below:
You can then add your link to your work as many links as required. My full html file is available at Github. My final webapp look like the image at the top of this article.
COMMENTS