01 abril 2014

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 del Autor Debajo de las Entradas Personalizado incluyendo Botones de Redes Sociales

Probablemente sepas que Blogger facilita que los usuarios que han actualizado el perfil de Blogger al de Google+, agregar fácilmente el elemento: "Perfil del autor", para que aparezca debajo de cada entrada.

Hacer que aparezca es muy sencillo, solo tienes que marcar la casilla de la respectiva opción, yendo a Diseño, luego acceder a la opción desde: "Editar", en la sección que corresponde a las entradas del blog.

Este elemento mostrará la foto que tengas agregada en tu perfil de Google+, el nombre que pusiste,  además, el texto que tengas en la sección de Introducción, ya que Blogger utiliza etiquetas propias que obtienen esos datos del perfil. 

Lo que haremos en este tutorial

Vamos a agregar botones de redes sociales al perfil del autor que Blogger facilita, como ya te lo había comentado desde Google+  y también personalizar la apariencia, ya que este elemento se ve muy simple.

El aspecto que tendrá, es el que puedes ver a continuación. Claro, el cuadro del perfil va a verse más bonito con tu foto ;)

Cuadro del perfil del autor


¿Prefieres verlo en acción?, pues échale un vistazo a la demostración.


El archivo de imagen contiene todos los iconos: "Twitter, Facebook, Google+, y Pinterest", lo que hace la carga más eficiente, ya que en lugar de enlazar 4 imágenes separadas, estaremos enlazando solo una.

El estilo es plano, minimalista y seguramente te recordará al cuadro del autor en Google+ al ver una publicación (esa es la idea).

Los colores son sólidos, dando un aspecto fresco y moderno. Como el ancho está definido en porcentaje, éste se adaptará al ancho de la columna principal, así que puede usarse en una plantilla responsive (diseño de respuesta). 

¿Te gusta cómo se ve?  Entonces veamos cómo lograrlo ;)

Pasos

  1. Activa la casilla de la opción: "Mostrar el perfil debajo de la entrada" desde las opciones de configuración de las entradas, a las que accedes si pinchas en "Diseño", y luego haces click en "Editar", en la sección que dice: "Entradas del blog".

    Opciones de configuracion de las entradas
    La imagen arriba muestra parte de las opciones de configuración de la entrada
  2. Ve a Plantilla > Personalizar > Avanzado >Añadir CSS, luego, agrega el siguiente CSS y guardas el cambio en "Aplicar al blog". (Si no te queda claro cómo agregar el CSS visita esta entrada: Agregar CSS desde el diseñador de plantillas).

    .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:14px;display:block;margin:2px 3px 15px}
    .descripcion a{color:#0E7C94}
    .img_perfil{background:#fafafa;position:relative;z-index:2;top:20px;float:none;display:block;width:85px;height:85px;-moz-border-radius:50%;-webkit-border-radius:50%;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:#020202}
    .img_perfil img{border:none;width:85px;height:85px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}
    a.nombre-autor{display:table;margin:30px auto 14px;font-size:125%;text-transform:uppercase}.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:120px;height:auto;opacity:0;filter:alpha(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;display:none\0/}
    .so-perfil li a:hover span{opacity:1;filter:alpha(opacity=100);top:-35px;text-decoration:none}


  3. Luego, 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. 
  4. Ya que activaste el buscador del editor, pones en el campo esta linea de código:<b:if cond='data:post.authorAboutMe'> y pulsa "Enter", de ese modo el editor nos llevará a la primera linea de código que hace que aparezca el perfil del autor.
  5. 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 está debajo de dicha imagen:

    Código del cuadro del autor visto desde el editor

    CÓDIGO
    <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><div class="redes-so"><ul class='so-perfil'><li><a class='twitter' href='#URL_DE_PAGINA_DE_TWITTER'><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></div></b:if></b:if>

  6. En el código anterior, pon la dirección web (URL) de cada página de red social respectivamente, tal y como se indica en el texto resaltado de rojo. Para ello localiza el texto que indica dónde poner la URL de cada red, que son estas:

    #URL_DE_PAGINA_DE_TWITTER que cambiarás por la dirección web de tu página en Twitter.
    #URL_DE_PAGINA_DE_FACEBOOK que cambiarás por la dirección web de tu página en Facebook.
    #URL_DE_PAGINA_DE_GOOGLE_PLUS que cambiarás por la dirección web de tu página de Google+.
    #URL_DE_PAGINA_DE_PINTEREST que cambiarás por la dirección web de tu página de Pinterest.

    Nota: Ten cuidado de no quitar la comilla (') que aparece antes y después de donde va la URL de cada página de red social; si la quitas, te va a marcar error el editor. Para Obtener la dirección web de cada página, tienes que ir a la página respectiva de cada red social, y copiarla desde la barra de direcciones de tu navegador. 
  7. Una vez que pongas todas las URLs respectivamente, verifica en vista previa que todo luzca bien y si es así, guarda los cambios.
¿Fácil verdad? Si quieres cambiar los colores, échale un vistazo a las siguientes indicaciones:


Personalizar colores

1. Cambiar fondo negro. Localiza esta parte del CSS del paso 2: #020202 y cámbialo por el color HTML que quieras. Para ello puedes consultar esta tabla de colores.

2. El fondo del cuadro. (Es gris claro) Localiza esta parte #fafafa (aparece dos veces y debe quedar igual) y cámbialo por el color que quieras. Para ello consulta una tabla de colores HTML.


Notas Finales importantes

  • La imagen se ve redonda ya que usamos una propiedad de CSS que lo hace, y funciona en navegadores modernos. Para el caso de Internet Explorer, funciona en IE9 en adelante. Actualmente tienen la versión 11. En el caso de Internet Explorer versión 8 y 7, la imagen del perfil se va a ver cuadrada, ya que no soporta la propiedad que usamos para hacer que la imagen se vea redonda (border-radius).
  • El fondo negro en la parte superior del cuadro, no es visible en Internet Explorer versión 7.
  • La "animación del tooltip" funciona en IE10 en adelante y el resto de navegadores modernos.
  • Excepto por las lineas con algunos hacks para asegurar el soporte en más versiones de navegadores, por ejemplo: "filter:alpha(opacity=0)" para que funcione la transparencia en Internet Explorer 8, todo el CSS es válido. 


Información útil y Referencias.

Si quieres aprender la técnica para hacer aparecer el tooltip animado, échale un vistazo a esta entrada de Codrops que explica cómo hacerlo.

Última revisión y/o actualización: 00/00/00.

Artículos recomendados:

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