En este tutorial, aprenderás a insertar bloques de código en tus artículos de Blogger de manera que sean fácilmente legibles y copiable por tus lectores. Te mostraremos cómo utilizar HTML y CSS para formatear tu código con un fondo oscuro y una fuente monoespaciada, creando una presentación profesional que no solo mejora la estética de tu blog, sino que también facilita la comprensión y reutilización del código por parte de tus usuarios. Sigue estos pasos para destacar tu código en tus publicaciones y proporcionar una mejor experiencia a tus lectores.
Paso 1: Preparar las Imágenes
- Logo: Asegúrate de tener el logo de tu empresa en un formato compatible (JPG, PNG, etc.).
- Foto de la Persona: La foto debe estar en un formato compatible y de un tamaño adecuado.
Subir las Imágenes a un Servidor:
- Puedes usar servicios de almacenamiento en la nube como Google Drive, Dropbox, o servicios específicos de alojamiento de imágenes como Imgur, TinyPic, o tu propio servidor web.
- Obtener la URL de las Imágenes: Una vez subidas las imágenes, obtén el enlace directo a cada imagen. Este enlace se usará en el código HTML.
Paso 2: Crear el Código HTML
Aquí tienes un ejemplo básico de código HTML para una firma de correo electrónico que incluye imágenes:
<div class="signature-container">
<table>
<tr>
<td>
<img src="URL_DEL_LOGO" alt="Logo de la Empresa" width="100" class="signature-image">
</td>
<td>
<div>
<img src="URL_DE_LA_FOTO" alt="Foto de la Persona" width="60" height="60" class="signature-image">
<strong>Nombre Apellido</strong><br>
Cargo en la Empresa<br>
<div class="contact-info">
<img src="ICONO_TEL" alt="Teléfono" width="16" height="16">
<span>+123 456 789</span><br>
<img src="ICONO_EMAIL" alt="Email" width="16" height="16">
<span><a href="mailto:email@ejemplo.com">email@ejemplo.com</a></span><br>
<img src="ICONO_TWITTER" alt="Twitter" width="16" height="16">
<span><a href="https://twitter.com/tuusuario">Twitter</a></span><br>
<img src="ICONO_FACEBOOK" alt="Facebook" width="16" height="16">
<span><a href="https://facebook.com/tuusuario">Facebook</a></span><br>
<a href="https://www.tusitio.com">www.tusitio.com</a><br>
<a href="https://www.otroutil.com">www.otroutil.com</a>
</div>
</div>
</td>
</tr>
</table>
<p style="font-size: 12px; color: #666;">
Este mensaje es confidencial y está destinado únicamente a la persona o entidad a la que está dirigido. Si no es el destinatario, por favor notifique al remitente y elimine este mensaje de inmediato.
</p>
</div>Paso 3: Reemplazar los Enlaces
- URL_DEL_LOGO: Reemplázalo con el enlace directo a tu logo.
- URL_DE_LA_FOTO: Reemplázalo con el enlace directo a la foto de la persona.
- ICONO_TEL, ICONO_EMAIL, ICONO_TWITTER, ICONO_FACEBOOK: Reemplázalos con los enlaces a los íconos correspondientes.
- Nombre Apellido, Cargo en la Empresa, Teléfono, Email, Twitter, Facebook, www.tusitio.com, www.otroutil.com: Completa con la información real.
Paso 5: Guardar el código
- Abre un bloc de notas y copia el código, posteriormente guardarlo con extensión html, por ejemplo: firma.html
Paso 6: Agregar firma en Outlook
- Ubica el archivo que acabas de guardar y dale doble clic para que se abra con vista en cualquier navegador
- Copia todo el contenido
Abre la configuración de firma de Outlook, en Archivo -> Opciones -> Correo -> Firma
Pega el contenido en el campo de firma y guarda los cambios.
Paso 7: Probar y Ajustar
- Prueba la Firma: Envía un correo electrónico de prueba para asegurarte de que todo se ve correctamente.
- Ajusta el Diseño: Según sea necesario, ajusta el tamaño de las imágenes, fuentes y colores en el código CSS para que se ajuste a tus preferencias.
