Davermx/Email Signature Vol.1.md

## Email Signature Vol.1.md

      
    Raw
  

              Email Signature Vol.1.md
            
          
      LinkedIn  ●  
      Instagram  ●  
      Twitter 


Email Signature Easy - Vol.1  


En este Snippts crearemos una Firma de Correo con logotipo y Nombre con la finalidad de dar una vista mas profesional a tu correo electrónico.
Ventajas


Puede copiar el código y pegar en el cliente de correo de su preferencia
No es una imagen, por lo cual no tiene peso al momento de visualizarlo tu contacto.
Facilidad para editar los campos.

Desventajas


Es necesario alojar la imagen de su logo en un servicio de terceros como: Google Drive, Dropbox,  IMGUR o servidor propio.


Comenzamos 🚀


Copiamos el Codigo Signature
Creamos un nuevo archivo y lo guardamos como Signature.html
Modificamos el archivo signature.html (poner sus datos propios)


Explicando el Código  

En esta sección se divide en 2 partes el código la primera parte damos un poco de estilos en generar a la tabla y agregamos una fuente.
La segunda parte del código tenemos la estructura de la firma en la cual podrás editar y sustituir el contenido de los campos (NOMBRE, PROFESION, TEL:, WHATSAPP, EMAIL, SKYPE, WEB.), por los datos que ustedes quieren mostrar en su firma.


Código Signature  

<style>
body {
  @import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap);
}

table {
  border: none;
  width: auto;
  border-collapse: collapse;
}

td {
  text-align: left;
}
</style>
<table aling="left" border="0" cellspacing="0" cellspadding="0" border-collapse="collapse" ;>
<tr>
  <td valign="middle"
    style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 5px; border-top: 0; border-bottom: 0; border-left: 0; border-right: solid 3px #3c77ff;">
    <img id="preview-image-url" width="240"
      src="https://dl.dropboxusercontent.com/s/quu0vqgw9xw7ikb/logoDA-firm.png?dl=0">
  </td>

  <td style="padding-top: 0; padding-bottom: 0; padding-left: 10px; padding-right: 0px;">
    <table aling="left" border="0" cellspacing="0" cellspadding="0" border-collapse="collapse" ;>
      <tr>
        <td colspan="0"
          style="padding-bottom: 0px; color: #3c77ff; font-size: 34px; font-family: 'Montserrat', sans-serif;">
          <strong>David</strong>&nbsp;Aguilera &nbsp;&nbsp;
        </td>
      </tr>

      <tr>
        <td colspan="2"
          style="padding-bottom: 0px; color: #1e2940; font-size: 18px;  font-family: 'Montserrat', sans-serif;">
          <strong>Front-End Developer | Consultor TI</strong>
        </td>
      </tr>

      <tr>
        <td valign="top"
          style="vertical-align: top; color: #4C494D; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Tel:</span>&nbsp;123 456 7890&nbsp;&nbsp;&nbsp;&nbsp;<span
            style="color: #3c77ff;">WhatsApp:&nbsp;</span>098 765 4321
        </td>
      </tr>

      <tr>
        <td valign="top"
          style="vertical-align: top; color: #4C494D; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Email:&nbsp;</span><a href="mailto:info@daguilera.com.mx"
            style="color: #4C494D; text-decoration: none; font-size: 15px;">info@daguilera.com.mx</a>
          <span style="color: #3c77ff;">&nbsp;Skype:&nbsp;</span><a href="https://join.skype.com/invite/z3DJHhQvkWeD"
            style="color: #4C494D; text-decoration: none; font-siza: 15px;">davermx</a>
        </td>
      </tr>

      <tr>
        <td colspan="3"
          style="padding-top: 0px; color: #3F51B5; font-size: 14px; font-weight: 400; font-family: 'Montserrat', sans-serif;">
          <span style="color: #3c77ff;">Web</span>:&nbsp;<a href="https://daguilera.com.mx/"
            style=" color: #4C494D; text-decoration: none; font-size: 15px;">https://daguilera.com.mx</a>
        </td>
      </tr>
    </table>
  </td>
</tr>
</table>


  Clic para ver los campos a modificar
Cada campo esta explicado en 2 partes:


La primera es la vista como debe de quedar el contenido del campo.


La segunda sección es el código que se va a modificar. importante solo modificar exactamente el contenido del campo (Ejem: Nombre, Profesion, Tel:, Whatsapp, Email, Skype, Web.)


David Aguilera   


<strong>David</strong>&nbsp; Aguilera &nbsp;&nbsp;
  

Front-End Developer | Consultor TI


<strong>Front-End Developer | Consultor TI</strong>
  

Tel:  123 456 789


&nbsp;123 456 7890 &nbsp;&nbsp;&nbsp;&nbsp;
  

WhatsApp: 098 765 4321


WhatsApp:&nbsp;</span>098 765 4321
  

Email: info@daguilera.com.mx


<a href="mailto:info@daguilera.com.mx" style="color: #4C494D; text-decoration: none; font-size: 15px;">info@daguilera.com.mx</a>

* Aquí se modifica 2 veces la dirección de correo: 
1.- en mailto:
2.- en info@daguilera.comm.mx
  

 Skype: Davermx


<a href="https://join.skype.com/invite/z3DJHhQvkWeD" style="color: #4C494D; text-decoration: none; font-siza: 15px;">davermx</a>
  

Web: https://daguilera.com.mx


<a href="https://daguilera.com.mx/" style=" color: #4C494D; text-decoration: none; font-size: 15px;">https://daguilera.com.mx</a>

* Aquí se modifica 2 veces la dirección web.
1.- en href=""
2.- en https://


Copiar la Firma a tu Cliente de Correo

Una vez terminado de modificar el archivo Signature.html realizamos los siguientes pasos

Abrir el archivo Signature.html en su navegador
se debe de ver algo asi. ( con los nuevos datos )


seleccionamos toda la firma y la copiamos
abren su cliente de correo y buscan la seccion de firma.
pegamos la firma y guardamos.


Creamos un nuevo correo y se visualizara lo siguiente:

Vista Previa 🔎


Listo!!!  Ahora cuentas con un correo profesional de verdad.


Si te sirvió, picale a Stars, también puedes darle Fork o mandame un tuit y dime como podemos mejorarlo. ✌️