miércoles, 29 de julio de 2026

 Canales de YouTube que recomiendo ✨

  • 1. Curiosamente: Se dedican a resolver dudas curiosas de su comunidad de una forma educativa y didáctica. Es el mejor canal que conozco; lo sigo desde que tengo 9 años y me encanta. La verdad, mil por mil se los recomiendo.
  • 2. Infonimados: Este canal se dedica a contar hechos históricos de una forma igualmente entretenida.
  • 3. PutoMikel: Perdón por mis recomendaciones de extrema izquierda, pero qué te puedo decir, chiquistriquis. 😔✋
  • 4. Diana Gaby: Videos de maquillaje, GRWM y Q&A. LA AMOOOO. Mi ejemplo a seguir en cuanto a contenido.
  • 5. Blanca Guilera: Datos curiosos, historia... Un canal súper, súper interesante. I love her.
  • 6. Rose Bennet: Divulgación de historia, ciencia, etc. Igual la amo.
  • 7. Macakiux: Él hace pura divulgación científica con un poco de humor. Es muy inteligente; le quiero besar el cerebro.
  • 8. Yiseni Pérez: También hace contenido sobre conciencia social y sobre internet.
  • 9. Issa Rico: La amo. Conecté mucho con su contenido; también es sobre belleza y cuidado personal. Un día nos abandonó durante 7 meses y regresó diciéndonos que estaba embarazada. Fue shockeante. Love her.

🎙️ Podcasts, ya que estamos aquí 🌸

Estos, la verdad, ya son gustos muy personales. Y si estos temas no son aptos para ti, estás en todo tu derecho de ponerte como prioridad. 🫂

  • • Relatos Forenses: Su nombre lo dice todo. El Dr. Olivares también es súper inteligente; también le besaría el cerebro.
  • • Pepe & Chema: Él les da voz a personas en situaciones vulnerables y a víctimas de feminicidio, homicidio, entre otros casos.
  • • Historia para Tontos: Mi sección fav: Geopolítica para Tontos. Lo único es que hablan mucho al inicio, jeje.

──── ୨ৎ ────

sábado, 18 de julio de 2026

¡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 🎀

<!-- ==========================================
     1. IMPORTACIÓN DE FUENTES E ÍCONOS
     ========================================== -->
<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. :꣓

──── ୨ৎ ────

viernes, 17 de julio de 2026

Respondiendo sus dudas y actualizándoles un poquito. ✉️🎀

Primero que nada, muchas gracias a las personitas que me siguen. Los quiero mucho 🫶🫶, son increíbles.

Segundo, les quiero contar que estoy investigando cómo podemos dejar algo así como una sección para que todos ustedes pongan los links de sus blogs y que todos los veamos. Así yo los sigo y también otros lectores de este blog pueden seguirlos, pero eso aún no descubro cómo hacerlo, así que en cuanto esté listo, aquí lo pongo. JAJA.

También les quiero pedir consejos para mejorar mi encabezado de página porque no me gusta nadita. Es en lo que he estado intentando trabajar estos días, y también ideas para promocionar el blog y que llegue a más gente, aunque como aún le faltan cositas no creo que esté tan interesante. :(

las preguntas del buzón 🍓

En la sección de preguntas me llegaron dos.

LA PRIMERA: según lo que entendí, es de cómo le hago para poner mis gadgets, por ejemplo este:


Y pues les digo que los HTML los hago con Gemini. La verdad, algunas de las ideas las he tomado de TikTok y le pido a la IA que me ayude a generar el código. También algunos códigos los he tomado de este blog: https://pensarenvozaltaconali.blogspot.com/, y le doy totalmente los créditos a ella por las ideas.

Les recomiendo que los códigos se los pidan a Gemini. He visto que recomiendan a ChatGPT, pero siento que le echa menos ganitas y luego se inventa cosas. Eso sí, a ambas IAs deben contarles muy bien cuál es la estética de su blog. Les recomiendo hacer una paleta de colores y una paleta de tipografías. Y si quieren que les pase los códigos de algún gadget, pueden escribírmelo en el botón de sugerencias. De todos modos, aquí les dejo el link del formulario:

La SEGUNDA pregunta es de cómo ajusto el tamaño de mis gadgets. Para los gadgets de HTML, te recomiendo que también le digas a la IA las medidas de tus barras laterales, que las encuentran entrando a tema, luego personalizar y aquí:


Y para los de imágenes y GIFs les tienes que picar en este botón que dice "Reducir hasta ajustar". Lo activas y se ajusta automáticamente.


gracias por leer 🐚

Creo que hasta aquí llega la publicación de hoy. Aún le estoy haciendo ajustes a la página y buscando que llegue a más gente. Agradezco también a quienes lo han compartido y espero que les gusten todas las cositas que le voy poniendo. Muchas gracias nuevamente y nos vemos en la próxima actualización. 𑣲⋆

──── ୨ৎ ────