11 marzo 2015

Recuerda descargar tu plantilla antes de empezar con el tutorial. Ésto lo haces en: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa. De ése modo la puedes volver a instalar.

Perfil de los Autores del blog Personalizado debajo de la Entrada (2 o más Autores)

En este tutorial, voy a explicar paso a paso cómo poner el perfil de los autores personalizado y te será útil si en tu blog participan dos o más autores, y si has actualizado tu perfil de Blogger al de Google+.

Ya antes había escrito un tutorial, que es útil si el blog solo tiene un autor, así que si ése es tu caso y no lo has visto, te invito a que le eches un vistazo ;)

Al igual que el susodicho tutorial, en éste personalizamos el elemento: "perfil del autor", agregando iconos de redes sociales y manipulamos su apariencia volviéndolo más moderno y vistoso. El ancho está declarado en porcentaje por lo tanto puede adaptarse en una plantilla con diseño responsive.

El perfil del autor luce como puedes ver a continuación:

Cuadro de perfil de Karla

Para verlo en acción, échale un vistazo a la demostración ;)
Nota: hay cambios en el color del nombre y bloque superior de la cajita.

¿Listo(a) para empezar? veamos cómo lograrlo ;)

Pasos

  1. Activar la opción que hace que aparezca el perfil del autor en las entradas.
    Primero, necesitas activar la casilla que dice: "Mostrar el perfil del autor debajo de la entrada" desde las opciones de configuración de las entradas, a las que accedes yendo a "Diseño", y luego haces click en "Editar", en la sección que dice: "Entradas del blog".

    Parte de Configuracion de entradas de Blogger
    No olvides guardar el cambio al activar la casilla. Hecho lo anterior, el perfil del autor "debe aparecer" debajo de las entradas, mostrando la fotografía, el nombre, y la introducción  para cada autor, datos que se obtienen desde el perfil de Google+, como se muestra en la siguiente imagen.

    Cuadro de autor nativo de Blogger
  2. Agregar a la plantilla el CSS que necesitas para que el perfil aparezca con la "apariencia" que definimos, incluyendo los botones de redes sociales.
    Ve a Plantilla > Personalizar > Avanzado >Añadir CSS, luego, agrega el siguiente CSS y guardas el cambio en "Aplicar al blog".Tendrás que usar alguna tecla como la barra espaciadora, para que se habilite el botón que dice "Aplicar al blog" y puedas guardar lo que agregaste usando dicho botón.

    .author-profile{overflow:hidden;background:#fafafa;display:block;width:100%;position:relative;bottom:0;left:0;margin:20px 5px 0 0;padding:0 14px 20px}.descripcion{font-size:15px;display:block;margin:2px 3px 20px}.descripcion a{color:#0E7C94}.img_perfil{background:#fafafa;position:relative;z-index:2;top:20px;float:none;display:block;width:85px;height:85px;border-radius:50%;margin:0 auto;padding:3px}.author-profile:before{height:70px;width:100%;display:block;content:"";position:absolute;right:0;top:0;background:#333}.img_perfil img{border:none;width:85px;height:85px;border-radius:50%}.redes-so{width:100%;margin:0 auto 8px!important;padding:0!important;text-align:center}.so-perfil{display:inline-block;height:40px;width:185px;padding:0!important}.so-perfil li{list-style:none;float:left;border:none;margin:7px;padding:0}.so-perfil li a{background:url(http://1.bp.blogspot.com/-CRmHitffnxM/UwlzeQgT8aI/AAAAAAAAPsI/2L3UklpLbOA/s1600/redes-sociales.png) no-repeat 0 0;display:block;position:relative;width:32px;height:32px;margin:0;padding:0}.so-perfil li a.twitter{background-position:0 0}.so-perfil li a.googlep{background-position:-37px 0}.so-perfil li a.facebook{background-position:-74px 0}.so-perfil li a.pinterest{background-position:-111px 0}.so-perfil li a span{background:#2c2c2c;position:absolute;top:-50px;left:50%;margin-left:-66px;width:122px;height:auto;opacity:0;text-align:center;color:#fff;white-space:nowrap;font-size:12px;transition:all .25s ease-in-out;padding:5px}.so-perfil li a
    span:before{content:"";position:absolute;bottom:-7px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #2c2c2c}.so-perfil li a:hover span{opacity:1;top:-35px;text-decoration:none}

  3. Editar/Copiar el código del perfil del autor, para que aparezcan los botones de redes sociales respectivamente según el autor.
    Es sencillo, solo tienes que introducir dentro del código el nombre del autor donde se indica, exactamente igual como aparece en Google+, y la URL de la página de cada red social, según indico en el código. Para obtener la URL de la página de cada red social, dirígete a cada una de ellas y cópiala de la barra de direcciones del navegador.

    He separado el código necesario, primero, cuando son dos los autores y el segundo que servirá cuando son 3 o más autores.

    Código que necesitas cuando son 2 autores

    Haz click sobre el código en las partes que hay que editar, según se indica en el texto. Una vez que termines lo copias para ponerlo en tu plantilla, o si lo prefinieres cópialo todo y lo editas desde el editor HTML (ya que ahí aparecerá de colores). Como creas que será más fácil para ti.

    Donde dice: Karla Castañeda vas a poner el nombre, tal y como aparece en el perfil de Google+, de cualquiera de los dos autores del blog. Luego abajo colocas las URLs de cada red social que corresponden a ése autor, y que he resaltado de color naranja.

    Después en el bloque de código que esta debajo del comentario:<!-- Las redes sociales del autor 2 -->, sustituyes los datos que se indican y que corresponden para el otro autor del blog.

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.authorAboutMe'><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><b:if cond='data:post.authorPhoto.url'><div class='img_perfil'><img expr:src='data:post.authorPhoto.url' itemprop='image' width='50'/></div> </b:if><div><a class='g-profile nombre-autor' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a></div><span class='descripcion' itemprop='description'><data:post.authorAboutMe/></span>
    <b:if cond='data:post.author == &quot;Karla Castañeda&quot;'>
    <div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_PAGINA_DE_TWITER'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_DE_PAGINA_DE_FACEBOOK'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_DE_PAGINA_DE_GOOGLE_PLUS'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_DE_PAGINA_DE_PINTEREST'><span>Sígueme en Pinterest</span></a></li></ul></div><b:else/>
    <!-- Las redes sociales del Autor 2 -->
    <div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_DE_PAGINA_DE_TWITTER_AUTOR2'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_DE_PAGINA_DE_FACEBOOK_AUTOR2'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_DE_PAGINA_DE_GOOGLE_PLUS_AUTOR2'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_DE_PAGINA_DE_PINTEREST_AUTOR2'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if></div></b:if></b:if>


    Textualmente el código anterior podríamos traducirlo así:  Si y solo si el blog tiene habilitado el perfil del autor y si el usuario está en una página de entrada (se tienen que cumplir ambas condiciones), se mostrará la imagen del perfil, el nombre y la descripción del autor en Google+ respectivamente, si el autor es: "Karla Castañeda" (y que en tu caso sería el de uno de los dos autores), entonces se mostrarán los iconos de redes sociales de Twitter, Facebook, Google+ y pinterest con sus respectivos enlaces, si no es karla Castañeda, se mostrarán los iconos de redes sociales de Twitter, Facebook, Google+ y Pinterest con los otros enlaces configurados, en el cuadro del otro autor.

    Código que necesitas cuando son 3 autores

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.authorAboutMe'><div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><b:if cond='data:post.authorPhoto.url'><div class='img_perfil'><img expr:src='data:post.authorPhoto.url' itemprop='image' width='50'/></div> </b:if><div><a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'><span class='nombre_autor' itemprop='name'><data:post.author/></span></a></div><span class='descripcion' itemprop='description'><data:post.authorAboutMe/></span>
    <!-- Autor 1 --><b:if cond='data:post.author == &quot;
    Nombre_Autor1&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor1'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor1'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor1'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor1'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if>
    <!-- Autor 2 --><b:if cond='data:post.author == &quot;Nombre_Autor2&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor2'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor2'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor2'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor2'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if>
    <!-- Autor 3 --><b:if cond='data:post.author == &quot;Nombre_Autor3&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor3'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor3'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor3'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor3'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if></div></b:if></b:if> 


    El código anterior servirá para mostrar el perfil de 3 autores. He resaltado de distintos colores la parte que corresponde a los iconos de redes sociales para cada autor, para que puedas identificarlos fácilmente. Tienes que poner el nombre del autor donde se indica y la URL de cada red social de cada autor respectivamente. He resaltado dentro de los bloques de color gris claro (casi blanco) el texto que hay que sustituir en cada parte del código que corresponde a un autor. Por ejemplo, donde dice: Nombre_Autor1, tienes que sustituir ese texto por el nombre del primer autor (puede ser cualquiera de los tres), y el nombre debe aparecer exactamente igual como figura en Google+. Donde dice: URL_Facebook_Autor2, tienes que poner la URL de la página de Facebook del segundo autor. Donde dice: URL_Pinterest_Autor3, habrá que poner la URL de la página de Pinterest del tercer autor y así sucesivamente. Asegúrate se sustituir todos los datos que se indican y no eliminar ningún caracter ;)

    Si son más de tres autores, tienes que repetir:

    <!-- Autor X --><b:if cond='data:post.author == &quot;Nombre_Autor_X&quot;'><div class='redes-so'><ul class='so-perfil'><li><a class='twitter' href='URL_Twitter_Autor_X'><span>Sígueme en Twitter</span></a></li><li><a class='facebook' href='URL_Facebook_Autor_X'><span>Sígueme en Facebook</span></a></li><li><a class='googlep' href='URL_GooglePlus_Autor_X'><span>Sígueme en Google+</span></a></li><li><a class='pinterest' href='URL_Pinterest_Autor_X'><span>Sígueme en Pinterest</span></a></li></ul></div></b:if> 

    Antés de: </div></b:if></b:if> que aparece al final del código (para los tres autores). Puse la "X" solo para representar a un autor siguiente.
  4. Poner el código a la plantilla. Ve a Plantilla > Editar HTML, y activa el buscador del editor, haciendo click dentro del editor, cuidando no mover nada, después, pulsa las teclas Ctrl + F simultáneamente, y cuando aparezca el buscador, pon ésto en el campo: <b:if cond='data:post.authorAboutMe'> y pulsa enter, para que el editor te lleve a esa parte.

    Una vez que el editor te envíe a esa linea de código, y que en la imagen de abajo aparece con fondo amarillo, selecciona todo el código del perfil, tal y como se muestra en la imagen, y cámbialo por el código que te facilité en el paso 3, y que ya editaste (o puedes editarlo desde el editor si te parece más fácil) pero, ponlo exactamente "antes" de </b:includable>. Hacemos ésto para que el perfil del autor no aparezca en la sección: "post-footer" definida por Blogger, y que generalmente tiene fondo de color. En otras palabras "sacamos" al perfil de esa sección.

    Editor HTML de Blogger
  5. Evitar que el Tooltip aparezca en Internet Explorer 8 y versiones anteriores. Luego usando de nuevo el buscador del editor, localiza: </head>
    y "antes" de esa linea pon ésto: <!--[if lte IE 8]><style type="text/css">.so-perfil li a span{top:-9999px;left:-9999px;}</style><![endif]-->
    Esa linea es un comentario condicional exclusivo para Internet Explorer versión 8 y anteriores, ahí ponemos el CSS que necesitamos para quitar el tooltip (búrbuja que aparece al poner el puntero del ratón sobre cada icono), ya que Internet Explorer 8 no soporta la transparencia, que es fundamental para que el tooltip funcione. Haciendo ésto evitamos usar: "filter: alpha(opacity=x)" que no pasa la validación de tu código CSS, ya que solo es un hack para IE8 y versiones anteriores.
  6. Guardar los cambios. Verifica en vista previa y aunque no verás el cuadro del perfil, ya que éste aparece al ingresar a la entrada, te asegurarás de que todo se vea bien en tu plantilla, y de ser así, guardas los cambios en "Guardar plantilla".

¡Y listo! ya tendrás funcionando el cuadro del perfil que mostrará los datos de cada autor respectivamente ;)

Personalizar colores de la cajita del perfil

1. Cambiar fondo gris obscuro de la parte superior del contenedor. Localiza esta parte del CSS del paso 2: #333 y cámbialo por el color web que quieras. Para ello consulta una tabla de colores o puedes usar la extensión de colorzilla de la que ya te había hablado antes desde Google+.

2. El fondo del cuadro. (Es gris claro) Localiza esta parte en el CSS que facilito en el paso 2: #fafafa (aparece dos veces y debe quedar igual) y cámbialo por el color web que quieras.

Siéntete libre de comentar cualquier duda o sugerencia, aquí en el blog para poder ver el comentario (por favor no en las demostraciones porque no las veo)

Espero sea útil ;)

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.