Skip to main content

Link tree on your website

Stop relying on external services like Linktree. When you do, you give up your website’s ability to be discovered by people and search engines.
Remember: any service out there can disappear overnight. What would you be left with? Your website.

Here’s a simple black-and-white HTML snippet, ready to paste into a post, page, or a custom HTML block in WordPress (or whatever you use).
Customize the colors, and don’t forget to replace my links with yours.
Enjoy!

Paste this into a custom HTML block or as “code” into a post:

<style>
.ltwrap{max-width:520px;margin:0 auto}
.ltcard{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:22px}
.lthead{display:flex;gap:14px;align-items:center;justify-content: center}
.ltavatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid rgba(0,0,0,.08)}
.lttitles{width:100%;text-align:center}
.lttitles h1{font-size:20px;line-height:1.2;margin:0}
.lttitles p{margin:6px 0 0;font-size:14px;opacity:.75}
.ltlinks{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.ltbtn{display:block;text-decoration:none;text-align:center;padding:14px 16px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:linear-gradient(180deg,#ffffff,#f7f7f7);color:#111;font-weight:600;transition:transform .08s ease,box-shadow .08s ease,background .08s ease}
.ltbtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.10)}
.ltbtn:active{transform:translateY(0px);box-shadow:0 6px 14px rgba(0,0,0,.10)}
.ltsocial{margin-top:18px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;align-items:center}
.ltsocial a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;padding:10px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.10);color:#111;background:#fff;line-height:1;white-space:nowrap}
.ltsocial svg{width:18px;height:18px;display:block;flex:0 0 auto}
.ltfoot{margin-top:16px;text-align:center;font-size:12px;opacity:.7}
@media (prefers-color-scheme: dark){
.ltcard{background:#2c2a4a;border-color:rgba(255,255,255,.10);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ltsocial a{background:#0f0f10;border-color:rgba(255,255,255,.12);color:#fff}
.lttitles p,.ltfoot{opacity:.8;color:#ddd}
.lttitles h1{color:white}
}
</style>

<div class=”ltwrap”>
<div class=”ltcard”>
<div class=”lttitles”> <h1>Links</h1></div>
<div class=”ltlinks”>
<a class=”ltbtn” href=”https://archiveofourown.org/works/77670151″ target=”_blank” rel=”noopener”>FREE Prequel</a>
<a class=”ltbtn” href=”https://www.amazon.com/dp/B0FMFL628Z” target=”_blank” rel=”noopener”>A Tale of Fate and Fury<br/>(Romantasy series)</a>
<a class=”ltbtn” href=”https://freyalojord.studiofreya.com/newsletter” target=”_blank” rel=”noopener”>Newsletter</a>
</div>

<div class=”ltsocial”><a href=”https://www.instagram.com/freyalojord/” target=”_blank” rel=”noopener” aria-label=”Instagram”>
<svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”1.8″>
<rect x=”3″ y=”3″ width=”18″ height=”18″ rx=”5″></rect>
<circle cx=”12″ cy=”12″ r=”4″></circle>
<circle cx=”17.5″ cy=”6.5″ r=”1″></circle>
</svg>Instagram</a>
<a href=”https://www.tiktok.com/@freyatheauthor” target=”_blank” rel=”noopener” aria-label=”TikTok”>
<svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”1.8″>
<path d=”M14 3v11a4 4 0 1 1-4-4″></path>
<path d=”M14 7c1.6 2.3 3.7 3.6 7 3.8″></path>
</svg>TikTok
</a>
<a href=”https://www.youtube.com/@FreyaLojord” target=”_blank” rel=”noopener” aria-label=”Youtube”>
<svg viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”1.8″>
<path d=”M21 8s-1-3-3-3H6C4 5 3 8 3 8s0 3 0 4 1 7 3 7h12c2 0 3-3 3-3s0-3 0-4 0-4 0-4Z”></path>
<path d=”M10 10l6 3-6 3v-6Z”></path>
</svg>YouTube</a>
</div>

</div>
</div>