Agregar tu firma debajo de tus posts en blogger

Si usas blogger y deseas agregar tu firma debajo de todos tus posts, puedes hacerlo de 2 maneras: La primera es agregar el código de tu firma en un elemento HTML y situar dicho gadget debajo de tus posts.La segunda es colocar el código de tu firma directo en tu plantilla. La segunda opción es lo más recomendable, agregar el código directamente en la plantilla, ya que la primera hará que cargue más tu página y por consiguiente demore un poco más.

Antes de empezar a añadir este código a tu blog, primero debes tener la imagen de tu firma, para ello puedes:


1) Dibujarlo en un papel y luego escanearlo.


2) Puedes dibujarlo en MS Paint / Adobe Photoshop ó cualquier otro editor de imágenes.


3) Ó bien para que te resulte muchísimo más fácil, es crear tu firma con generadores. Para ello visita esta entrada para que puedas hacer uso de estos generadores de firmas de forma gratuita y online. Son muy personalizables en cuanto al texto, tamaño, color, forma, etc. de la firma que quieras crear.


Teniendo ya tu firma hecha y almacenada en tu pc, debes subirla a un hosting, para que obtengas la URL de la imagen de tu firma. Si no tienes un hosting ó un lugar donde guardar tus archivos, imágenes, texto, etc., entonces recomiendo visites esta entrada para crear un hosting gratuito y seguro. En caso de que tengas ya un hosting, no habría problema ya que lo único que necesitamos es la URL de tu firma.


Una vez hecho todo esto, procedemos a insertar tu firma en la plantilla. Este se situará al final de todos tus posts. Entonces los pasos a seguir son:


1) Entramos a blogger > Diseño > Edición de HTML > Expandir plantillas de artilugios:

2) Ahora buscamos el siguiente código en la plantilla:

<data:post.body/>

3) Posiblemente lo encuentres 2 veces. Pero en la primera, justo debajo de ella agrega este código:

<br /><img src="ENLACE DE TU FIRMA AQUI" />

4) Quedando entonces de la siguiente forma en la plantilla:

Agrandar imagen




5) Ahora en el código de la imagen anterior reemplaza lo que está en rojo por la URL de la imagen de tu firma:

<br /><img src="ENLACE DE TU FIRMA AQUI" />

6) Ahora guarda los cambios y listo. Eso sería todo, abre cualquier publicación de tu página y verás al final de ella, tu firma.


Si en caso desees agregarlo en un gadget, entonces usa el mismo código y agrégalo en un elementoHTML/Javascript y sitúalo debajo de tus posts en Diseño > Elementos de la página.


***Nota***
Por defecto la imagen se ubicará al lado izquierdo, así como lo muestra la primera imagen de este post. Si deseas alinearlos, ya sea centrado ó bien a la derecha, entonces reemplazas este código (que es el de la imagen de tu firma):

<br /><img src="ENLACE DE TU FIRMA AQUI" />

por este:

<br /><div align="center"><img src="ENLACE DE TU FIRMA AQUI" /></div>

(Este es para que tu imagen quede centrado, se ha añadido lo que está en verde)


Ó bien lo puedes reemplazar por:

<br /><div align="right"><img src="ENLACE DE TU FIRMA AQUI" /></div>

(Esto es si lo deseas a la derecha)




Ahora si vez como resultado que la imagen de tu firma tiene un borde, por decir que luzca así:

Si deseas eliminarlo, entonces busca en tu plantilla un código similar a este:

.post img {
border:1px solid #cccccc;
padding:2px;
}

Como vez esto hace que la imagen tenga un borde de 1 píxeles y de color gris: #ccc
Entonces lo que haremos es cambiar el valor 1px, por 0px en el border. Quedando entonces así:

.post img {
border:0px solid #cccccc;
padding:2px;
}

Con eso ya habrás eliminado el borde. 




Si en caso no te dió efecto, entonces busca esta parte de tu plantilla y elimina lo que está resaltado de amarillo:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Con eso los bordes y la sombra de las imágenes se habrán eliminado.

Imprimir artículo