Crear e insertar una firma en tu blog


Hola de nuevo!! Comenzamos el nuevo año con un nuevo tutorial, de estos fáciles y útiles. Lo ha dejado Melchor, seguro, que es mi Rey favorito. Como duda existencial que tengo... y que alguna vez he comentado con mis amigas... ¿a alguna le gusta Gaspar? No sé, tengo la sensación de que es el Rey marginado. Normalmente cuando  les preguntas a los niños te dicen que su Rey es Melchor o Baltasar. Todavía no he encontrado a un niño que me diga que su Rey es Gaspar (y trabajo con niños...) Cuando voy a la Cabalgata le gritan y tal... pero no es lo mismo... no sé, tengo esa sensación (pobre Gaspar) Me podéis gritar abajo, en los comentarios, diciéndome: ¡¡ehh, que mi Rey es Gaspar!! Después de estos minutos musicales... vamos a lo que vamos.




Hoy quiero enseñaros a crear vuestra propia firma y a instalarla en vuestro blogs de forma predeterminada. Parece complicado, no? Pues os digo que podéis tardar menos de 10 minutos. Además es el deseo que pidió Romi, aquí, en la fuente de los deseos de Creative Mindly

Como siempre, todas mis historias comienzan una noche de trasteo por internet. El deseo de Romi fue que le ayudara a insertar la firma de forma permanente, pero yo he querido ir más allá y echaros una mano, también, con el diseño de vuestras firmas. 


Antes de insertar una firma, es importante tener una firma que insertar. Así que vamos a aprender a hacer firmas bonitas y sencillas en 3 minutos (puede ser que tardéis más... porque como veréis hay muchas fuentes entre las que elegir y si sois indecisas... pues le echaréis un rato más)

Vamos a comenzar con el tutorial. En primer lugar tenéis que ir a esta página: www.mylivesignature.com. La verdad es que a primera vista no parece una gran página... pero no debemos quedarnos con el exterior... porque os vais a sorprender. Siempre intento utilizar páginas en las que no sea necesario registrarse, y esta vez no va a ser distinto. Más fácil no puede ser. Esto es una señal... manos a la obra!!! A seguir los pasos:

Una vez hecho lo anterior, vamos siguiendo los pasos que nos indica la página. No hay pérdida.

Si guardamos la firma, como os he dicho en el tutorial, nos servirá para añadirla a la entrada blogger como una imagen normal. Es una opción muy válida y, para algunas, seguro que os es más cómodo. Si esto es lo que queréis... ya habéis terminado. Pero si lo que buscáis es que vuestra firma aparezca siempre, sin que la tengáis que poner vosotros, en vuestra entrada, entonces seguid leyendo. 
Una vez que hayamos terminado de diseñar nuestra firma nos aparecerá la vista previa de la misma. Antes, en este paso, hemos guardado la imagen, pero ahora no lo vamos a hacer. No guardamos la imagen, sino que seguimos lo siguientes pasos. Lo que decía, terminamos la firma y sale la vista previa. Justo debajo encontraréis tres opciones:
  • Want us to animate this signature?
  • Want download this signature?
  • Want to use this signature? Nosotros vamos a pinchar sobre esta opción. 


Después de pinchar en want to use this signature? nos aparecerá otra página con otra dos opciones. Pinchamos en Generate HTML

El programa, que al parecer es muy majo y quiere que quedemos muy satisfechos, nos va a dar, de nuevo, dos opciones, aquí es donde tendremos que elegir la que más nos guste o convenga. Yo os recomiendo la primera opción, solo la firma. Es más sencilla y nos va a servir perfectamente para lo que queremos hacer. 

Una vez elegida la opción aparecerá, debajo de la vista previa, un recuadro con el código HTML. Ahora mismo, justo en este momento no la vamos a usar, pero dejad la ventana abierta  (como a Peter Pan) porque volveremos en un momento. 

Ahora llega el momento de meternos en el html de nuestro blog. No tengáis miedo, solo vamos a pegar lo que hemos copiado. Si en algún momento nos aburrimos, solo tendremos que borrar el código. No hay peligro. 

Vamos a nuestro menú de blogger, pinchamos en plantilla. Nos saldrá lo que veis más abajo. Seleccionamos edición HTML. Nos saldrá la siguiente pantallita. Pues bien, pinchamos en la casilla de expandir plantillas de artilugios



Pegamos en el buscador lo siguiente:

data:post.body/>

Al pegar este código en el buscador, este nos llevará directamente al lugar correcto. Se marcará lo que hemos buscado de un color.


Bien, ya estamos cerca del final. Volvemos a la página donde hemos dejado el código de nuestra firma. Lo seleccionamos, lo copiamos y lo pegamos justo después del código que hemos buscado. Las puntitas del final del código anterior y las del código nuevo que hemos pegado deben quedar juntas (como si se dieran un beso) 

Antes de guardar la plantilla pinchamos en vista previa, para asegurarnos que todo está bien. Podemos dejarlo así, tal cual, sin tocar nada más. Pero si queréis que la firma os quede perfecta podéis hacer una cosita más.

Como veréis en nuestro código aparecen las siguientes letras y símbolos:  href="....." Este código nos indica que ahí va un enlace. Es decir, hace que  la imagen tenga un link, un enlace. En este caso si alguien pincha en nuestra firma le llevaría a la web en la que hemos generado la firma (el programa lo hace de forma predeterminada). Pero lo podemos cambiar. Y ahora tomo yo el relevo del programa y os doy  dos opciones:
  1. Quitar el link: para ello borramos lo que hay dentro de las comillas. Dejando solo esto: href="" 
  2. Poner un link: sustituimos lo de dentro de las comillas por la dirección que nosotros queramos.
Volvemos a dar a vista previa para comprobar que todo está bien. Si es así, ya podemos guardar la plantilla definitivamente y tendremos nuestra firma siempre al final de nuestra entrada. Ya no hará falta que la añadamos nosotros mismos. 


Puede suceder que, nosotros ya tengamos una firma, una imagen y nos encanta y no queremos cambiar. Bien...no hay problema. Tengo soluciones para todos los problemas. Podéis seguir añadiéndola como imagen en vuestras entradas (es fácil y rápido) pero también la podéis poner de forma permanente. 
  • Lo primero que tienes que hacer es subir la imagen de tu firma a picasa, por ejemplo. 
  • Seguimos los mismos pasos anteriores:
plantilla + edición HTML+ expandir plantillas de artigulios + buscamos: data:post.body/>
  • Justo después de ese código pegamos el siguiente código (los piquitos tienen que quedar juntos):
<a href="DIRECCIÓN-LINK" target="_blank"><img src="URL DE LA IMAGEN" style="border: 0 !important; background: transparent;"/></a>

Ahora queda sustituir las palabras en negrita por los código correctos. Como ya os he dicho más arriba tenéis dos opciones para la dirección- link:

  1. Quitar el link: para ello borramos lo que hay dentro de las comillas. Dejando solo esto: href="" 
  2. Poner un link: sustituimos lo de dentro de las comillas por la dirección que nosotros queramos.
Para colocar la URL de la imagen solo tenéis que ir al lugar donde hayáis subido la foto, pinchar con el botón derecho y seleccionar COPIAR URL DE LA IMAGEN. 



Pegáis eso mismo en el lugar donde poner URL DE LA IMAGENComprobáis con vista previa que todo está bien. Si es así, guardáis y punto.




Actualización después de varias peticiones:



Centrar la firma:



Una vez que hayáis seguido todos los pasos... tenéis que añadir lo siguiente: justo después de  data:post.body/> ponéis el siguiente código: 

<center> y al final del todo ponéis </center>

Tiene que quedaros  algo así :

data:post.body/><center><a href="DIRECCIÓN-LINK" target="_blank"><img src="URL DE LA IMAGEN" style="border: 0 !important; background: transparent;"/></a></center>

Os recuerdo que luego tenéis que sustituir lo que está en negrita por las direcciones correctas (como os he explicado más arriba)

cursos para mejorar tu blog
MEGA PACK DISEÑA TODO Y MÁS PACK DISEÑA BONITO Curso diseño corporativo pack emprendedor
75€
+INFO 
27,99€
+INFO 
25€
+INFO
43€
+INFO
catálogo completo 
de cursos online
Y esto ha sido todo por hoy. No so quejaréis... os dejo mucho trabajo. Ya sabéis que si tenéis dudas me las preguntáis en los comentarios o en Facebook. Os responderé lo antes posible (empieza mi vida normal y dedicaré mil horas al día a mi trabajo) 

Un beso muy grande y que terminéis muy requetebien las navidades y un consejo para las de Pamplona (no vayáis al Mercadona todavía...debe de ser una batalla campal...).
N E W S L E T T E R


NO TE VAYAS SIN DESCARGAR 
EL EBOOK GRATIS PARA EMPEZAR A DISEÑAR

SI TE HA GUSTADO ¡COMPÁRTELO!



Hola de nuevo!! Comenzamos el nuevo año con un nuevo tutorial, de estos fáciles y útiles. Lo ha dejado Melchor, seguro, que es mi Rey favorito. Como duda existencial que tengo... y que alguna vez he comentado con mis amigas... ¿a alguna le gusta Gaspar? No sé, tengo la sensación de que es el Rey marginado. Normalmente cuando  les preguntas a los niños te dicen que su Rey es Melchor o Baltasar. Todavía no he encontrado a un niño que me diga que su Rey es Gaspar (y trabajo con niños...) Cuando voy a la Cabalgata le gritan y tal... pero no es lo mismo... no sé, tengo esa sensación (pobre Gaspar) Me podéis gritar abajo, en los comentarios, diciéndome: ¡¡ehh, que mi Rey es Gaspar!! Después de estos minutos musicales... vamos a lo que vamos.




Hoy quiero enseñaros a crear vuestra propia firma y a instalarla en vuestro blogs de forma predeterminada. Parece complicado, no? Pues os digo que podéis tardar menos de 10 minutos. Además es el deseo que pidió Romi, aquí, en la fuente de los deseos de Creative Mindly

Como siempre, todas mis historias comienzan una noche de trasteo por internet. El deseo de Romi fue que le ayudara a insertar la firma de forma permanente, pero yo he querido ir más allá y echaros una mano, también, con el diseño de vuestras firmas. 


Antes de insertar una firma, es importante tener una firma que insertar. Así que vamos a aprender a hacer firmas bonitas y sencillas en 3 minutos (puede ser que tardéis más... porque como veréis hay muchas fuentes entre las que elegir y si sois indecisas... pues le echaréis un rato más)

Vamos a comenzar con el tutorial. En primer lugar tenéis que ir a esta página: www.mylivesignature.com. La verdad es que a primera vista no parece una gran página... pero no debemos quedarnos con el exterior... porque os vais a sorprender. Siempre intento utilizar páginas en las que no sea necesario registrarse, y esta vez no va a ser distinto. Más fácil no puede ser. Esto es una señal... manos a la obra!!! A seguir los pasos:

Una vez hecho lo anterior, vamos siguiendo los pasos que nos indica la página. No hay pérdida.

Si guardamos la firma, como os he dicho en el tutorial, nos servirá para añadirla a la entrada blogger como una imagen normal. Es una opción muy válida y, para algunas, seguro que os es más cómodo. Si esto es lo que queréis... ya habéis terminado. Pero si lo que buscáis es que vuestra firma aparezca siempre, sin que la tengáis que poner vosotros, en vuestra entrada, entonces seguid leyendo. 
Una vez que hayamos terminado de diseñar nuestra firma nos aparecerá la vista previa de la misma. Antes, en este paso, hemos guardado la imagen, pero ahora no lo vamos a hacer. No guardamos la imagen, sino que seguimos lo siguientes pasos. Lo que decía, terminamos la firma y sale la vista previa. Justo debajo encontraréis tres opciones:
  • Want us to animate this signature?
  • Want download this signature?
  • Want to use this signature? Nosotros vamos a pinchar sobre esta opción. 


Después de pinchar en want to use this signature? nos aparecerá otra página con otra dos opciones. Pinchamos en Generate HTML

El programa, que al parecer es muy majo y quiere que quedemos muy satisfechos, nos va a dar, de nuevo, dos opciones, aquí es donde tendremos que elegir la que más nos guste o convenga. Yo os recomiendo la primera opción, solo la firma. Es más sencilla y nos va a servir perfectamente para lo que queremos hacer. 

Una vez elegida la opción aparecerá, debajo de la vista previa, un recuadro con el código HTML. Ahora mismo, justo en este momento no la vamos a usar, pero dejad la ventana abierta  (como a Peter Pan) porque volveremos en un momento. 

Ahora llega el momento de meternos en el html de nuestro blog. No tengáis miedo, solo vamos a pegar lo que hemos copiado. Si en algún momento nos aburrimos, solo tendremos que borrar el código. No hay peligro. 

Vamos a nuestro menú de blogger, pinchamos en plantilla. Nos saldrá lo que veis más abajo. Seleccionamos edición HTML. Nos saldrá la siguiente pantallita. Pues bien, pinchamos en la casilla de expandir plantillas de artilugios



Pegamos en el buscador lo siguiente:

data:post.body/>

Al pegar este código en el buscador, este nos llevará directamente al lugar correcto. Se marcará lo que hemos buscado de un color.


Bien, ya estamos cerca del final. Volvemos a la página donde hemos dejado el código de nuestra firma. Lo seleccionamos, lo copiamos y lo pegamos justo después del código que hemos buscado. Las puntitas del final del código anterior y las del código nuevo que hemos pegado deben quedar juntas (como si se dieran un beso) 

Antes de guardar la plantilla pinchamos en vista previa, para asegurarnos que todo está bien. Podemos dejarlo así, tal cual, sin tocar nada más. Pero si queréis que la firma os quede perfecta podéis hacer una cosita más.

Como veréis en nuestro código aparecen las siguientes letras y símbolos:  href="....." Este código nos indica que ahí va un enlace. Es decir, hace que  la imagen tenga un link, un enlace. En este caso si alguien pincha en nuestra firma le llevaría a la web en la que hemos generado la firma (el programa lo hace de forma predeterminada). Pero lo podemos cambiar. Y ahora tomo yo el relevo del programa y os doy  dos opciones:
  1. Quitar el link: para ello borramos lo que hay dentro de las comillas. Dejando solo esto: href="" 
  2. Poner un link: sustituimos lo de dentro de las comillas por la dirección que nosotros queramos.
Volvemos a dar a vista previa para comprobar que todo está bien. Si es así, ya podemos guardar la plantilla definitivamente y tendremos nuestra firma siempre al final de nuestra entrada. Ya no hará falta que la añadamos nosotros mismos. 


Puede suceder que, nosotros ya tengamos una firma, una imagen y nos encanta y no queremos cambiar. Bien...no hay problema. Tengo soluciones para todos los problemas. Podéis seguir añadiéndola como imagen en vuestras entradas (es fácil y rápido) pero también la podéis poner de forma permanente. 
  • Lo primero que tienes que hacer es subir la imagen de tu firma a picasa, por ejemplo. 
  • Seguimos los mismos pasos anteriores:
plantilla + edición HTML+ expandir plantillas de artigulios + buscamos: data:post.body/>
  • Justo después de ese código pegamos el siguiente código (los piquitos tienen que quedar juntos):
<a href="DIRECCIÓN-LINK" target="_blank"><img src="URL DE LA IMAGEN" style="border: 0 !important; background: transparent;"/></a>

Ahora queda sustituir las palabras en negrita por los código correctos. Como ya os he dicho más arriba tenéis dos opciones para la dirección- link:

  1. Quitar el link: para ello borramos lo que hay dentro de las comillas. Dejando solo esto: href="" 
  2. Poner un link: sustituimos lo de dentro de las comillas por la dirección que nosotros queramos.
Para colocar la URL de la imagen solo tenéis que ir al lugar donde hayáis subido la foto, pinchar con el botón derecho y seleccionar COPIAR URL DE LA IMAGEN. 



Pegáis eso mismo en el lugar donde poner URL DE LA IMAGENComprobáis con vista previa que todo está bien. Si es así, guardáis y punto.




Actualización después de varias peticiones:



Centrar la firma:



Una vez que hayáis seguido todos los pasos... tenéis que añadir lo siguiente: justo después de  data:post.body/> ponéis el siguiente código: 

<center> y al final del todo ponéis </center>

Tiene que quedaros  algo así :

data:post.body/><center><a href="DIRECCIÓN-LINK" target="_blank"><img src="URL DE LA IMAGEN" style="border: 0 !important; background: transparent;"/></a></center>

Os recuerdo que luego tenéis que sustituir lo que está en negrita por las direcciones correctas (como os he explicado más arriba)

cursos para mejorar tu blog
MEGA PACK DISEÑA TODO Y MÁS PACK DISEÑA BONITO Curso diseño corporativo pack emprendedor
75€
+INFO 
27,99€
+INFO 
25€
+INFO
43€
+INFO
catálogo completo 
de cursos online
Y esto ha sido todo por hoy. No so quejaréis... os dejo mucho trabajo. Ya sabéis que si tenéis dudas me las preguntáis en los comentarios o en Facebook. Os responderé lo antes posible (empieza mi vida normal y dedicaré mil horas al día a mi trabajo) 

Un beso muy grande y que terminéis muy requetebien las navidades y un consejo para las de Pamplona (no vayáis al Mercadona todavía...debe de ser una batalla campal...).
N E W S L E T T E R


NO TE VAYAS SIN DESCARGAR 
EL EBOOK GRATIS PARA EMPEZAR A DISEÑAR

SI TE HA GUSTADO ¡COMPÁRTELO!


Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: