10 feb. 2014

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='http://1.bp.blogspot.com/-t4LoypPxmcw/UsdhCld48VI/AAAAAAAAKlM/6CS6E-TfmzA/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='http://1.bp.blogspot.com/-t4LoypPxmcw/UsdhCld48VI/AAAAAAAAKlM/6CS6E-TfmzA/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' 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.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

49comentarios:

  1. Buenas Miguel, lo estoy intentando configurar de nuevo pero tengo el problema de que a H3 le tengo aplicado un estilo que no me puedo quitar de la entrada, en definitiva, que lo tengo que poner en H2 o H4 ¿que me recomiendas? Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Verónica!!,
      depende de la cantidad de tags de títulos que tengas. En mi caso por ejemplo (y creo que enel tuyo taén), los contenidos de entrada tienen un H1 que es la entrada en sí seguida por Diarios de la nube, los H2 que son las opciones de menú y finalmente el H3 que utilizo para este cuadro "Escrito por".

      Lo más importante es que en este "escrito por" tu enlace lleve el tu_perfil_g+?rel=author si es el perfil que utilizas para escribir todo en tu Blog.

      Los "Escrito por" de la cabecera si llevan el marcado de datos estructurados para author: http://www.diariosdelanube.com/2014/03/la-autoria-en-internet-y-su-influencia.html

      Es decir, aquí prima más el marcado de datos estructurados en la cabecera de la entrada o al final y la utilización de rel=author con el mismo perfil en todos los enlaces de "author" que el tipo de marcado de título que emplees (H1, H2 ó H3). Si usas marcado de título para ello, debe ser menos importante que el nombre de tu entrada y de tu Blog.

      No te preocupes que estoy preparando una guía con todo esto para dejar las páginas lo mejor posible para la autoría y SEO...

      Un abrazo!

      Eliminar
    2. Otra cosa, si el estilo de títulos H3 lo tienes pillado, ponle H4, lo más importante es el marcado de datos estructurados y que H1 sea el título de la entrada.

      Eliminar
  2. Lo del H4 ok. Lo del rel=author, me ocurre que para que me de ok en datos estructurados tengo que activarlo en "entradas del blog" y en ese caso me saldría autor: verónica corrales y el cuadro de autor, es decir, repetido y no se como dejar solo el cuadro de autor y que me de ok los datos estructurados para el autor solo con el cuadro. Miles de gracias por tu ayuda Miguel!!! Un abrazo

    ResponderEliminar
    Respuestas
    1. La autoría de la verificación de datos de autor de las webmaster tools no reconoce listas de entradas o listas de entrada que provengan de un feed. En realidad la autoría en una Home no tiene sentido, lo importante es la autoría por artículo.

      No pasa nada por que se repita, lo importante es tener los datos estructurados en uno de los dos puntos. En mi caso yo utilizo "mi_perfil_g+?rel=author" en el cuadro que explico en la guía y el "Por:Miguel García Sánchez-Colomer" proviene de datos estructurados.

      Pienso que si te reconoce el autor en las entradas es correcto como lo tengas (no es necesario que sea en el cuadro de autor).

      Luego comprueba que en la prueba "verificar autoría" que aparece "en medio" de la pantalla de verificación de datos estructurados te reconozca igualmente el nombre.

      Si quieres sólo los datos estructurados en el cuadro de autor, cópiate la estructura del paso 3) de esta guía: http://www.diariosdelanube.com/2014/03/los-datos-estructurados-en-blogger.html

      Pero no es necesario, puede bastar con la autoría que te reconoce a nivel de entrada tal y como lo tienes ya.

      Un saludo amiga!!!

      Eliminar
  3. Hola Miguel, he querido incorporar lo del cuadro de autor, el colocado el codigo justo bajo la linea que indicas, pero al guardar me salta error en la linea de cierre se pone de color rojo la palabra " cond "y no puedo guardar la plantilla.
    he probado quitando " cond", me guarda la plantilla, pero no se da ningun cambio.
    Que sera que estoy haciendo mal?

    ResponderEliminar
  4. Hola Silvia, eso es que has puesto mal la parte del punto 4) donde aparece el "if cond" que debe tener su cierre con b:/if cond. Repasa el código y vuélvelo a copiar para que no te de error.

    Un saludo y gracias por participar.

    ResponderEliminar
  5. Hola Miguel gracias por la respuesta, te cuento que volvi a intentarlo, y ya me aparece...pero he querido cambiarle la imagen del Yoda por una mia, he puesto mi URL pero no cambia, incluso la he eliminado es decir he dejado el espacio en blanco para que no salga ninguna imagen, igual me sigue apareciendo la imagen tuya, que puede ser?

    ResponderEliminar
  6. Hola miguel, ya he logrado poner mi logo, una pregunta mas, como se hace pra que este formato de autor salga tanto en la pagina de inicio como en las individuales, yo he puesto el codigo debajo de ambos codigos que indicas arriba ?....Otra cosa, no si si puedas hacer una entrada indicando la ubicación de los codigos por ejemplo si deseo poner los marcadores sociales bajo o sobre el titulo o debajo de los enlaces de interes, etc donde deben ir ?

    ResponderEliminar
  7. ¡Hola Silvia!,
    el if cond que pone justo al comienzo de la parte del código del paso 4 (viene cada parte de código explciada), sirve para decir que sólo salga el cuadro de autor al acceder al detalle de una entrada. Si quitas ese código y el /b:if que lo cierra, verás que te saldrá también en la página principal el cuadro de autor. Aunque para que te salga en la página principal y no incrustado en las páginas de detalle ya sabes que tienes el gadget "perfil" disponible en Blogger.

    Para lo de los botones para redes sociales tienes:

    - http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html

    - http://www.diariosdelanube.com/2013/06/crea-y-coloca-tus-botones-para-redes.html

    - http://www.diariosdelanube.com/2013/06/inserta-botones-sociales-en-el-pie-de.html

    Cualquier cosa pregunta lo que necesites.

    Un saludo y muchas gracias por participar.

    ResponderEliminar
  8. Miguel, buenos días.
    Esto también es válido para las vistas dinámicas?
    Es que al copiar en la cajita lo que tú pones, me dice que no lo encuentra.
    Estoy haciendo algo mal?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, la verdad que no lo he probado en las vistas dinámicas. Habría que ver el sitio exacto que en ellas hay que tocar para poner la caja para que se dibuje al final de cada entrada.

      Un saludo!!!

      Eliminar
  9. ¡Hola Miguel! Soy nuevo en tu blog y bueno no he logrado colocarlo.
    ¿Podrías ayudarme? De antemano gracias :)

    ResponderEliminar
    Respuestas
    1. Hola, ¿dónde te atascaste?, así vamos desde ahí en adelante y lo sacamos. Un saludo!!

      Eliminar
  10. Hola Miguel!, antes que nada muchas gracias por tus excelentes aportes.
    Me viene una duda a la mente, en mi blog las noticias salen enteras y no como un resumen para seleccionar, sabes que solución le puedo dar a este? gracias!. Mi blog es : http://realidad4k.blogspot.mx

    ResponderEliminar
    Respuestas
    1. Hola Samuel,
      Fíjate que cuando escribes una entrada en el editor de entradas de Blogger, aparece en la zona de iconos (justo encina de donde se escribe) un icono con forma de "hojita rota" que se llama "salto de página", cuando lo pulses, saldrá una línea donde se producirá "el corte" para el resumen de tus entradas.

      Donde pongas ese corte, es hasta donde se mostrará el resumen de tu entrada en la página principal.

      Prueba y si te surgen dudas, me vuelves a escribir.

      Un saludo y gracias por participar!!!

      Eliminar
  11. Hola Miguel,
    Mira lo que me dice la Web Mastertools
    "Autoría en la búsqueda web
    El marcado de la autoría ya no se admite en la búsqueda web.
    Para obtener más información sobre qué marcado puedes utilizar para mejorar los resultados de búsqueda, visita los fragmentos enriquecidos".
    No sé si es así o no, pero creo que ya tampoco sirve de nada tener identificado tu perfil en Google + con la foto. Un poco de lío. ¿Podrías confirmarmelo?
    Un abrazo

    ResponderEliminar
    Respuestas
    1. Hola Elena,
      lo que comentan las Google Webmaster Tools es tal cual, es así. La foto del autor del contenido ya no sale en los resultados de búsqueda de Google en los resultados públicos. Sin embargo, la importancia de la autoría sigue siendo interesante porque las búsquedas privadas (las que te salen por defecto cuando estás "logado" en Google a no ser que lo indiques en el icono para búsqueda pública), si muestran la imagen cuando se trata de un miembro de un círculo de tu perfil Google+. Esto quiere decir, que los usuarios que están logados en Google y que te tienen en sus círculos si mostrarán la imagen de autor y si importará que quede bien claro el marcado de autor para que te reconozcan y puedan hacer clic.

      Desde luego ha perdido la importancia que tenía pero pienso que sigue ofreciendo ventajas y que además, un cuadro de autor (al margen del proceso de autoría que antes se usaba en Google), refuerza la profesionalidad y la personalidad del texto al que acompaña.

      Un saludo!

      Eliminar
  12. Hola Miguel! Enhorabuena por tu web.
    He puesto en práctica tu artículo de hecho hace unos meses, y al igual que Paula, siempre al final de cada entrada, en la web aparece en azul cond>, en todos los post y siempre al lado del cuadro de autor, al hilo de lo que preguntaba ella, he intentado solucionarlo, pero nunca consigo quitarlo. He revisado el paso 4, y sigue igual. te dejo el enlace de la web por si quieres ver lo que digo www.whynotlondon.com

    Muchas gracias por tu tiempo y un saludo! :)

    ResponderEliminar
    Respuestas
    1. solo borren la letra COND del final del codigo que esta con color rojo y listo

      Eliminar
  13. Hola!,
    (quito el < del código que te pongo a continuación para que no de error el mensaje) justo a la derecha de "div class="post-footer">" tienes el texto "cond>" que es el que sale directamente en todos los post. Bastaría con borrar ese cond> que se os quedó por el camino.

    Un saludo!!!

    ResponderEliminar
  14. Hola. Tengo una duda, ¿en un blog con al menos dos autores se puede establecer una caja diferente para cada uno, es decir, como pegar la insignia de Google+? Si elijo una fotografía, aparece siempre igual para cualquiera de los autores? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola,
      lo puedes hacer exactamente igual, poniendo el mismo código con los enlaces de otros usuarios y su imagen. También se puede hacer automáticamente creando un bucle (loop) por código. Si el tema te interesa puedo hacer una entrada al respecto para explicarlo.

      Ya me dices.

      Un saludo!

      Eliminar
    2. Hola. Claro que sí, yo creo que me ayudaría mucho.

      Gracias

      Eliminar
    3. Ok, a ver si saco tiempo y me pongo. Os aviso en cuanto esté.

      Eliminar
    4. Se lo agradezco mucho, feliz resto de semana

      Eliminar
  15. Respuestas
    1. Hola,
      puede hacerse sin problemas. Pones justo debajo de <div class='tw-author clearfix' otra "tupla" con la misma información hasta que se cierra el div y añadir otro usuario. Incluso automáticmaente se puede hacer con un bucle. Si os interesa el tema hago una entrada al respecto.

      Ya me comentáis.

      Eliminar
  16. Hola Miguel, me ha pasado como a Silvia. Al colocar el codigo justo me aparece un error en la linea de cierre y se pone roja la palabra "cond". He copiado varias veces el código y el error no desaparece. También he probado quitando los espacios y nada... ):

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Antes del cierre del que es que en los comentarios no se puede) y me dices si te ha funcionado, por favor.

      Muchas gracias!

      Eliminar
  17. Hola Miguel, he estado buscando por la plantilla el código del paso 3 pero no aparece por ninguna parte. ¿Alguna idea para poder arreglarlo?

    ResponderEliminar
    Respuestas
    1. Es que cada plantilla es un mundo cuando no se trata de las estándar de Blogger.

      Si quieres Mándame el enlace a tu sitio web en otro comentario y lo miro cuando pueda.

      Muchas gracias!

      Eliminar
  18. http://beyondtheanimus.blogspot.com/ esta es la dirección y la plantilla que tengo en uso es la "Travel". Gracias a ti por la ayuda. Un saludo.

    ResponderEliminar
    Respuestas
    1. Pues tienes el post-footer. Haz una cosa, en modo edición en tu plantilla de Blogger, en el propio editor (con el ratón después de haber hecho clic dentro del editor), pulsa CONTROL y F a la vez y te saldrá una pequeña caja de búsqueda arriba a la derecha del editor. Allí escribe lo que pone en el paso 3, tiene que encontrarlo seguro.

      Un saludo!

      Eliminar
    2. Lo he vuelto a mirar pero, como dije en el primer comentario no aparece... o soy yo que no lo veo...

      Eliminar
    3. Hola, yo lo he visto en tu código. Buscalo como te he explicado antes, está seguro.

      Un saludo!!!

      Eliminar
  19. Así lo he buscado en varios exploradores diferentes y no aparece, ni siquiera borrando poco a poco el código aparece algo parecido... Ya no sé como buscarlo.

    ResponderEliminar
    Respuestas
    1. Pásame tu web y miro a ver en el código HTML para decirte dónde. Lo malo que viene de una plantilla y el código en la plantilla es distinto.

      Paciencia que lo encontramos. ¿Cuál es tu web?

      Eliminar
    2. http://beyondtheanimus.blogspot.com.es/

      Eliminar
  20. ¿Y para llamar la fotografía desde el perfil de Google+ ya que son varios autores, no se va a poner la misma entrada a cada uno?

    ResponderEliminar
    Respuestas
    1. Ese código es más complejo porque tienes que ir a buscar a todos los admin. Me lo apunto para preparar una guía y te aviso para que lo veas cuando la termine. El cuadro de autor de Google, por defecto sirve para eso, es "sacar su código HTML fuera" y ponerlo en la plantilla.

      Un saludo!

      Eliminar
  21. hola miguel!, he estado buscando varios tutoriales y este es uno de los más completos pero tengo un gran duda, como lograr colocar la descripción de mis autores, ya que en mi blog al menos somos 5

    ResponderEliminar
    Respuestas
    1. Trataré de hacer un código que sirva para más de un autor y así hacer una guía. No obstante, puedes copiar y pegar cada div de "author-image" y de "author-profile" por cada uno de los autores que participen en la entrada.

      Un saludo!

      Eliminar
  22. Buenos dias. He conseguido poner una imagen y un texto, pero querria que la imagen estuviera a la izquierda del mismo y, en cambio, me sale encima (tambiés a la izquierda, pero encima). Debo decir que he aprovechado donde dice "Publicado por "autor"" tal como salia antes. No he añadido ningún código para esto.
    Seria cuestion de bajar un poco la imagen. Como lo puedo hacer? Si ayuda, dejo la dirección de mi bloc:
    http://encatalaiprou.blogspot.com/
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola,
      una manera rápida y sencilla de hacerlo es ir directamente dentro de tu plantilla donde pone (quito la apertura y cierre de etiqueta < y > porque si no, no me deja escribirte el comentario) bajo el div "author-image" la etiqueta img alt="" class="avatar avatar-70 photo" y le añades un "align=left", quedaría así (tú le añades los < y >) con el align=left:

      img align="left" alt="" class="avatar avatar-70 photo" height="40" src="https://lh3.googleusercontent.com/-K6cclrLxSno/Tntm6CSNzlI/AAAAAAAAAAQ/Pc7uEIRICrE/w140-h134-p/estelada.gif" width="40"

      Un saludo y muchas gracias por participar.

      Eliminar
    2. Oye, funciona! Es "casi" lo que queria. Se podria dejar un pequeño espacio entre la imagen y el comienzo del texto? Con ello estaria perfecto. De todos modos, muchísimas gracias.

      Eliminar
    3. Si quieres simplificarlo al máximo, ponle unos "espacios en blanco" después del gif. Si no, añade style='margin-right: 5px;' antes del cierre de la etiqueta /img. Eso añade un margen a la derecha de 5 píxeles.

      Un saludo!

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.