Strawberries, Tea & Notes

¡Holaaa, chicosss! 🌷✨

Hoy les voy a enseñar cómo hacer su propia página de redes, como esta. No se preocupen si nunca han tocado HTML, porque lo iremos haciendo pasito a pasito. ♡

Antes de empezar, les recomiendo que se apoyen en una IA para personalizar el código. Mi favorita es Gemini, pero si ustedes usan otra y les funciona bien, también está perfecto. Lo importante es que les haga el proceso mucho más fácil.

Lo primero que tienen que hacer es copiar el código HTML. Yo les recomiendo pegarlo en un editor de texto para poder modificarlo con tranquilidad.

Si están en una PC con Windows, mi recomendación es usar Bloc de notas, porque es muy ligero y hace que sea muchísimo más fácil probar el código y modificarlo mientras lo editan.

Código HTML para copiar 🎀


<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
.linktree-container {
font-family: 'Mulish', sans-serif;
background-color: #000000;
background: linear-gradient(180deg, #000000 0%, #333333 100%);
max-width: 100%; min-height: 100vh; padding: 40px 20px;
display: flex; flex-direction: column; align-items: center; box-sizing: border-box;
}
.profile-avatar { width: 110px; height: 110px; border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); object-fit: cover; margin-bottom: 15px; }
.profile-name { font-size: 2.2rem; font-weight: 700; color: #000000; margin: 0 0 5px 0; letter-spacing: -0.5px; }
.profile-bio { font-size: 0.95rem; font-weight: 300; color: #000000; margin-bottom: 25px; letter-spacing: 0.5px; }
.connect-text { font-size: 0.85rem; color: #000000; margin-bottom: 30px; font-weight: 400; letter-spacing: 1px; }
.links-wrapper { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 14px; }
.link-btn { display: flex; justify-content: space-between; align-items: center; background-color: #FFFFFF; color: #000000; text-decoration: none; font-size: 1rem; font-weight: 600; padding: 16px 24px; border-radius: 50px; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.link-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); }
.link-btn i { font-size: 1.2rem; color: #000000; }
</style>

<div class="linktree-container">
<img class="profile-avatar" src="URL_DE_TU_FOTO_DE_PERFIL" alt="Perfil">
<h1 class="profile-name">TuNombre</h1>
<div class="profile-bio">subtítulo • descripción • palabras</div>
<div class="connect-text">｡:*･ﾟ★ cambia este texto aquí ★･ﾟ:*｡</div>
<div class="links-wrapper">
<a class="link-btn" href="TU_LINK_DE_INSTAGRAM" target="_blank"><span>Instagram</span><i class="fab fa-instagram"></i></a>
<a class="link-btn" href="TU_LINK_DE_SPOTIFY" target="_blank"><span>Spotify</span><i class="fab fa-spotify"></i></a>
<a class="link-btn" href="TU_LINK_DE_PINTEREST" target="_blank"><span>Pinterest</span><i class="fab fa-pinterest"></i></a>
<a class="link-btn" href="TU_LINK_DE_SHELF" target="_blank"><span>Shelf</span><i class="fas fa-book-open"></i></a>
</div>
</div>

¿Cómo personalizarlo? 🍓

En realidad el código está bastante claro por sí solo, pero les voy a explicar las partes más importantes.

Por ejemplo, si encuentran algo como esto:

/* CAMBIA AQUÍ EL COLOR DE FONDO */
background-color: #000000;

Lo único que tienen que cambiar es el #000000 por el color que ustedes quieran. Ese formato se llama código hexadecimal.

Si no conocen los códigos de colores, les recomiendo muchísimo esta página:

https://htmlcolorcodes.com/es/selector-de-color/

Ahí pueden elegir cualquier color y copiar su código hexadecimal. Esto aplica para todos los lugares del código donde aparezca un color, no solamente para el fondo.

Si quieren agregar más botones, solo copien desde:

<a class="link-btn"> ... </a>

Y si quieren eliminar alguno, hagan exactamente lo contrario: simplemente borren ese bloque de código. 😝

También recuerden que donde diga algo como TU_LINK_DE_PINTEREST simplemente tienen que reemplazarlo por su propio enlace, sin espacios ni comillas extras. Por ejemplo: https://pin.it/65z0i2NFN.

¿Cómo probar el archivo? 📸

Cuando terminen de editar el código, toca probarlo. Si lo hicieron en Bloc de notas, al guardarlo es importante que el archivo se llame:

index.html

Así se guardará como una página web y podrán abrirlo para comprobar que todo funcione correctamente, que los botones lleven a sus redes y que los colores se vean como ustedes quieren.

Sin embargo, ese archivo todavía es local, es decir, solo funciona en su computadora. Si intentan poner ese archivo directamente en Blogger, no va a abrir porque no tiene una URL pública.

Para convertirlo en un enlace que cualquiera pueda visitar, yo utilicé esta página:

https://app.netlify.com/drop

El proceso es súper sencillo. Solo tienen que arrastrar su archivo index.html y esperar unos segundos a que se suba. Después de eso les aparecerá una pantalla donde harán clic en "Quick setup".

Desde ahí pueden cambiar el nombre del proyecto, que será parte de la dirección de su página. Cuando terminen, presionen "Update project name" y después "Finish later".

Los regresará a la página principal, pero ahora verán su nueva URL resaltada en color verde. ¡Solo tienen que copiar ese enlace!

¿Cómo ponerlo en Blogger? 🧁

Ahora entren a Blogger y agreguen un gadget de imagen. Llenen el gadget normalmente, pero en el apartado donde pide el enlace, peguen la URL que les dio Netlify.

¡Y listo! Cada vez que alguien haga clic en la imagen, se abrirá su página de redes. Pueden usar cualquier imagen que les guste. Yo elegí un GIF de mi poderosa Ariana Grande. 🫶

Y eso sería todo por este tutooo 🌷

Espero que les haya quedado claro y que les sirva muchísimo. Si llegaron hasta aquí, déjenme un comentario con un 🍪🌷✨ para saber que lo leyeron completito.

Como siempre, si tienen alguna duda, encuentran algún error o simplemente quieren sugerir algo, recuerden que el buzón de quejas está abierto y lo pueden encontrar en la barra izquierda.

También les dejo la nueva cuenta de TikTok que acabo de crear, que por cierto pueden encontrar en mi página de redes. 👀

Muchísimas gracias por leer y por compartir este tutorial. Espero de verdad que les sirva muchísimo. :꣓

──── ୨ৎ ────

sábado, 18 de julio de 2026