Añade un cuadro de autor al final de tus entradas.

La presentación de un cuadro de autor al final de nuestras entradas puede darle no sólo un aspecto más personal a nuestras creaciones sino incluso un detalle más profesional.

En esta guía paso a paso te explico cómo poner tu perfil de Google+ como autor al final de tus entradas.




Ofrecer un carácter más serio y profesional para nuestros contenidos es posible: un cuadro de autor con tu perfil de Google donde poder escribir lo que desees y que aparezca al final de todas tus entradas. Es una firma que habla de tí:

Paso a Paso:

0) Como vamos a tocar la plantilla general de Blogger, primero realiza una copia de seguridad de tu plantilla con esta guía. No te llevará más de un minuto y para cualquier problema siempre puede venirte bien.

1) Ahora accede a la vista de la plantilla de Blogger siguiendo estos pasos: entras en Blogger y en el menú de la izquierda selecciona la opción "Plantilla". Te aparecerá una pantalla como la que ves a continuación:

2) Selecciona el botón "Editar HTML" y al acceder a la plantilla verás una pantalla como esta:

3) Pulsa en tu teclado la tecla "Ctrl" y la tecla "F" a la vez (Control + F) para que te salga una "cajita" para buscar código. Escribe en la cajita de búsqueda:

<div class='post-footer'>

Identifica la zona donde se encuentra la parte inferior de tu entrada, el pie de tu entrada.

IMPORTANTE: Si encuentras dos veces tu texto <div class='post-footer'> coloca el código del paso 4) las dos veces bajo cada <div class='post-footer'>


4) Ahora puedes copiar y pegar acto seguido el código que aquí te muestro:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tw-authors'>
<div class='tw-author clearfix'>
  <div class='author-image'><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvS8_rpSgwH4gnKcKyRAd0g0vaCLWW3rCzFuCIMXqrX0qByE8CR7_A6G6BFF9JXz6gqLRX4fKzSH_ago6I11s7DfSetvPbebg5VOo9HowBnJEi2UqBeButOQmkqOUkkVJAQaNI1sgC5w/s1600/images.jpg' width='70'/> </div>
<h3>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Entrada del autor'><data:post.author/></a></h3>
<div class='author-title-line'/>
<p> TU PROPIO TEXTO </p>
</div></div>
</b:if cond>

Cada parte del código compondrá la formación de tu cuadro de autor:

• <b:if cond='data:blog.pageType == &quot;item&quot;'> y su cierre </b:if cond> sirven como condicional para indicar que sólo se dibuje el cuadro de autor DENTRO DEL DETALLE de la entrada.   

• <div class='tw-authors'>  Es la llamada al estilo responsable del cuadro de autor que vas a poner en tu Blog. 

• <div class='tw-author clearfix'> El embellecedor para separar del resto del texto de tu entrada. 

•  <div class='author-image'><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvS8_rpSgwH4gnKcKyRAd0g0vaCLWW3rCzFuCIMXqrX0qByE8CR7_A6G6BFF9JXz6gqLRX4fKzSH_ago6I11s7DfSetvPbebg5VOo9HowBnJEi2UqBeButOQmkqOUkkVJAQaNI1sgC5w/s1600/images.jpg' width='70'/> </div> La llamada al estilo responsable del tamaño y forma de la imagen de tu perfil. En donde pone src='http:// puedes poner la URL a la imagen de tu perfil. Si quieres que sea la de Google+, para sacar la imagen haz "clic" derecho sobre ella y selecciona "Copiar dirección enlace" (en chrome) para conseguir esta URL. height='70' y width='70' establecen el alto y el ancho que tendrá la imagen de tu perfil. 

• <h3>Escrito por <a expr:href='data:post.authorProfileUrl' rel='author' title='Entrada del autor'><data:post.author/></a></h3>  Es recomendable para SEO que proporciones a tu título de autor una cabecera de tipo H3. Esta clase de cabeceras hará que sea importante para los robots rastreadores de los buscadores pero no más importante que el título de la entrada del Blog. <a expr:href='data:post.authorProfileUrl' rel='author' title='Entrada del autor'><data:post.author/> Extraerá del Blog el nombre del autor de la entrada. Si hay más de un autor, extraerá aquel con el que la entrada se realizó al escribirla. 

•  <div class='author-title-line'/>
  <p> TU PROPIO TEXTO </p>
  </div></div> Añadirás aquí el texto que desees asociar a tu cuadro de autor.

5) Ahora ya sólo resta añadir a tu Blog los estilos que compondrán el cuadro de autor. Para ello, volviendo a pulsar la tecla "Ctrl" y la tecla "F" simultáneamente (Control + F), en el cuadro de búsqueda que aparecerá en la parte superior derecha de la ventana de edición de código de la plantilla escribe:

 ]]></b:skin>

Si no lo encuentras, asegúrate de tener activada la opción "Expandir plantillas de artilugios".

6) Ahora JUSTO ANTES de esa etiqueta que has encontrado escribe estos estilos que se utilizan en el código que antes añadiste para que se "dibujara" el cuadro de autor:

/* Estilos para el cuadro de autor */
.tw-author {
margin: 50px 0;
padding: 20px;
background-color: #333;
margin-bottom: 20px;
}
.tw-author .author-image {
float: left;
margin-right: 30px;
margin-top: 15px;
}
.tw-author h3,.tw-author a {
color: #fff;
font-size: 13px;
}
.tw-author p {
margin: 0;
color: #fff;
margin-top: 10px;
}
.tw-authors {
float: left;
border-top: 1px solid #d2d2d2;
width: 625px;
}
.tw-author {
float: left;
}
.tw-author.clearfix h3 {
font-weight: bold;
text-transform: uppercase;
color: #fff!important;
margin: 0px;
margin-top: 10px;
}
.tw-authors p {
font-size: 13px;
}

7) Ahora configura a tu gusto cada estilo si lo precisas, te explico para qué sirve cada uno:

como norma general:

• margin: te servirá para modelar los márgenes con el tamaño en píxeles que prefieras.
• font-size: te permitirá establecer el tamaño que desees para la letra. 
• color: te permitirá introducir el color que prefieras para el elemento sobre el que actúes. Para ver los distintos colores puedes utilizar esta herramienta.
• width: te permitirá aumentar o disminuir el ancho en píxeles. 

¡Eso es todo!, ahora a disfrutar de una autoría mejorada con tu nuevo y flamante cuadro de autor. Cualquier duda dispones de los comentarios para preguntarla.