Agregar firma a las entradas de nuestro Blogger

AGREGAR A LAS ENTRADA DEL BLOG TU FIRMA PERSONALIZADA

Blogger, que pertenece a Google, permite crear y publicar contenidos sin necesidad de escribir un código o instalar algún programa, tan solo hace falta tener una cuenta gmail, empezar a escribir sobre el tema referente al que vaya dirigido el blog y listo. En unos sencillos pasos cualquiera puede tener un blog con contenidos y pertenecer a la comunidad Blogger.    

Esta plataforma permite modificar el diseño de nuestro blog añadiendo diferentes temas predeterminados por Blogger o descargando plantillas para darle un toque distintivo a los que vienen por defecto en el blog. No solo podemos modificar el diseño del blog, sino que puedes cambiar muchos de los parámetros que vienen como por ejemplo el diseño de la entrada.

1º. Para añadir una firma personalizada automáticamente en cada entrada del blog vamos primero a dirigirnos a nuestra página de Blogger donde disponemos de todos los ajustes disponibles de nuestro blog vista general, entradas, páginas...etc.

Visión general Blogger

2º. Vamos a ir al ajuste de Configuración -> Entradas y comentarios. En la sección Entradas vemos que tenemos una opción llamada Plantilla de las entradas. La cual si le damos a la interrogación nos dice que añaden textos o códigos predeterminados cada vez que crees alguna entrada, como es eso lo que queremos, vamos a darle a Añadir. 

Añadir firma predeterminada

3º. Vamos añadir nuestro código HTML para que cada vez que hagamos una entrada nueva aparezca ya nuestra firma automáticamente. Para crear este código hay una manera super sencilla sin necesidad de saber este lenguaje. Para ello vamos a crear una entrada nueva de nuestro blog y:

1. Añadir imagen que queremos de avatar y configuramos el tamaño y alineación.
2. Escribir Autor: Tu nombre y le añadimos un enlace que este redirigido a nuestra página de autor de blogger.
3. Añadimos una descripción de lo que somos y hacemos.
4. Podemos añadir iconos que tengan enlaces a nuestros diferentes perfiles sociales.

Caja autor

Avatar: para el avatar le he dado una alineación a la izquierda, un ancho de 75px y una altura de 100px
Autor: Al nombre y apellidos le he añadido un Enlace que va dirigido a la ficha autor de mi blog.
Descripción: le he cambiado el formato a la letra,el color y el estilo.
Iconos: tienen un tamaño de 30x30px, los he cogido de Google Imágenes y podéis añadir enlaces que vayan a cada una de las páginas sociales de youtube, twitter y google plus.
Adicional: he añadido una etiqueta llamada table para crear una tabla con una fila y una columna para añadir un fondo y un borde a nuestra firma del blog.

Para ver el código solo hace falta darle a la opción HTML que esta en la esquina superior izquierda de las entradas del blog, para que veáis vuestro código y podáis copiarlo. 

Opción HTML

Os dejo mi código html explicado para que modifiquéis a vuestro gusto la caja de autor si queréis uno parecido al que he hecho yo en este tutorial.

<table bgcolor="71af4e" border="1" background="">
<tbody>
<tr>
<td><br />
<span style="clear: left; float: left; margin-bottom: 1em;"><img border="0" height="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnPpPSPGk0Vb0jdJ3Avvs1GPR3GG1H5oI4qBRASWXpV-NUzEeGgGBj4-AKb9nyhbusRuRS7otnFNuTHtT2eyoIvLzILtvN8nanuMtBvE7WDe08q4uy3TRWHS5AWAxN8b2Vd9-8WOv8Whh/s200/avatar.png" style="margin-left: 10px; margin-right: 10px;" width="75px" /></span>
<br />
<div style="text-align: left;">
<span style="color: white; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Autor:</span><span style="color: yellow; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"> <span style="background-color: color: white;">Tu nombre y apellidos</span></span></div>
<span style="color: white;"><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><a href="http://thejotainformatica.blogspot.com.es/" target="_blank"></a></span><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><i>Aquí ponemos una descripción sobre ti, a que te dedicas, que haces, información referida sobre el blog. Aquí puedes poner todo lo que quieras, siempre referido a ti o al blog.</i></span></span>
<br />

<div class="separator" style="clear: both; text-align: center;">

<img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_CTArp9u_LDPqSzVprbd04kGawiE1lBUe21xC3qoH3nGjNssBtrhmwqt4V-lPdeQmLANviTUMqkh1hqwW3iarmdodAGuWn7AkVS-Y83PY-6_zKLwE0Th26agPPNQJaH9UqMwwRn54yimP/s1600/youtube.png" width="30" />

<img border="0" heigth="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzneXahVeh30D9WMJnR4m_FALT7m422TJu6QM4HkXdca0OPg_Gv1U303bAM0QqwGJzUynqkz8VtAjCoPTy1-p-AeQxDN6qkcFsBfcn3PBB7bRUZklYa5qBByx1Rv8jS8TiODj9HqPV2pE/s1600/twitter.png" style="cursor: move;" width="30" />

<img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyv_KaKfFBLm034D-rdpUK761hqPJBqOTFpvhM1Ek_vAv9GocZkpywLzj90kKW6rNkMJXbTL0Odo4qeVkBMkT2c3OpAFx5yFn8rxpSG_pp241dnaAknRFN9EpK139MfoSO9vfqIdXx9TX_/s1600/google.png" width="30" />
</div>
<br />
</td>
</tr>
</tbody>
</table>

Explicación:

 <table bgcolor="71af4e" border="1" background=""> -> en bgcolor="color de fondo en código HTML" y border="borde" background="imagen del fondo"
heigth="ALTURA" width="ANCHURA"
En color azul os he puesto lo que podéis modificar.
En color naranja esta puesto para guiaros las imágenes, para que veáis el ancho y el alto de cada imagen como el avatar.png y los iconos de las redes sociales.

<tbody> El cuerpo de la tabla

<tr> -> Fila de la tabla
<td> -> Celda de la tabla

text-align: center; Alineación de las imágenes de las redes sociales. Si queremos que este hacia la derecha (right), centro (center) e izquierda (left).

4º. Una vez tengamos nuestro código modificado y a nuestro gusto, lo que vamos hacer es copiar y llevarlo a Configuración -> Entradas y comentarios y añadirlo a la plantilla de entradas. Guardamos configuración y ahora al crear entradas aparecerá nuestra firma del blog automáticamente.

Copiamos el código HTML

Lo pegamos en la Plantilla de las entradas y guardar configuración.

Ya tenemos nuestra caja de autor puesta para que cada vez que añadimos una entrada nueva aparezca. Escribimos la información del tema de nuestro blog y va bajando la caja de autor para que quede al final de la página.

Entrada nueva con caja de autor o firma personalizada.

Si os gusta no olvidéis compartir.
Seguidnos en nuestras diferentes redes sociales ^^
Gracias! ;)