Para copiar y pegar los códigos HTML y CSS en tu blog de WordPress y crear una sección de autor personalizada, sigue estos pasos:

Paso 1: Añadir el Código HTML

1. Accede a tu panel de WordPress:
   • Inicia sesión en tu sitio de WordPress.
2. Edita o crea una nueva entrada:
   • Ve a Entradas > Todas las entradas (o Añadir nueva si quieres crear una nueva).
   • Abre la entrada donde quieres agregar la sección de autor.
3. Pega el código HTML:
   • En el editor de bloques de WordPress (Gutenberg), añade un bloque de «HTML personalizado».
   • Haz clic en el icono «+» para añadir un nuevo bloque.
   • Busca y selecciona HTML personalizado.
   • Pega el siguiente código en el bloque:

<div class="author-bio"> <img src="tu-foto.jpg" alt="Foto del autor" class="author-photo"> <div class="author-info"> <h3>Tu Nombre</h3> <p>Breve biografía del autor, mencionando tus intereses, experiencia o temas que cubres en el blog.</p> <div class="author-social"> <a href="https://twitter.com/tuusuario" target="_blank">Twitter</a> | <a href="https://linkedin.com/in/tuusuario" target="_blank">LinkedIn</a> | <a href="https://instagram.com/tuusuario" target="_blank">Instagram</a> </div> </div> </div>

2. Edita los detalles:
   • Cambia "tu-foto.jpg" por la URL de tu foto de perfil.
   • Personaliza el nombre, biografía y enlaces a tus redes sociales.

Paso 2: Añadir el Código CSS

1. Accede al Personalizador de Temas:
   • En el panel de WordPress, ve a Apariencia > Personalizar.
2. Añade el CSS personalizado:
   • En el personalizador, busca y selecciona CSS adicional.
   • Pega el siguiente código CSS:

.author-bio { display: flex; align-items: center; margin-top: 20px; padding: 10px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; } .author-photo { width: 80px; height: 80px; border-radius: 50%; margin-right: 15px; } .author-info { flex: 1; } .author-info h3 { margin: 0 0 5px; font-size: 1.2em; } .author-info p { margin: 0 0 10px; } .author-social a { margin-right: 10px; color: #0073aa; text-decoration: none; } .author-social a:hover { text-decoration: underline; }

1. Guarda los cambios:
   • Haz clic en Publicar para guardar los cambios.

Paso 3: Revisa el Resultado

1. Vista previa de la entrada:
   • Vuelve a la entrada donde pegaste el HTML.
   • Haz clic en Vista previa para asegurarte de que la sección de autor se ve correctamente.
2. Publica la entrada:
   • Si todo se ve bien, publica o actualiza la entrada.

Personalización Adicional

• Puedes ajustar los colores, tamaños, y estilos del CSS según tu preferencia.
• Si deseas que esta sección aparezca automáticamente en cada entrada, considera editar el archivo de plantilla de tu tema (si tienes conocimientos avanzados o acceso a un desarrollador).

¡Listo! Ahora tendrás una sección de autor profesional al final de tus artículos en WordPress.