¡Entendido! He ajustado el código de este Canvas para que sea 100% compatible con Blogger.
Para lograr esto y evitar que el reproductor rompa el diseño (la plantilla) de tu blog, he realizado dos cambios técnicos muy importantes:
Desactivé el
preflightde Tailwind CSS: Esto evita que el script borre los estilos predeterminados de tu blog (como los márgenes de los títulos o el diseño de los enlaces).Encapsulé la app en un Widget: Moví todos los estilos de fondo que estaban en la etiqueta
<body>a un contenedor<div>específico con sus propios estilos reiniciados.
Aquí tienes el documento editado:
Cómo insertarlo en tu Blogger:
Copia todo el código que está en este Canvas (puedes usar el botón de copiar arriba a la derecha del editor de código).
Ve a Blogger y crea una "Nueva entrada" o edita una existente.
Cambia la vista del editor de "Vista de redacción" a "Vista en HTML" (el ícono de lápiz/botones en la esquina superior izquierda).
Pega el código completo y publica.
Como he aislado los estilos y le he indicado a Tailwind que no sobrescriba el resto de la página (preflight: false), el reproductor flotará elegantemente como un widget centrado en tu entrada sin modificar la letra ni los colores del resto de tu blog.
No hay comentarios.:
Publicar un comentario