25 abril 2014

Cómo Agregar Iconos de Redes Sociales a las Vistas Dinámicas de Blogger

Demostración iconos de redes en vistas dinamicas


Como ya te lo había prometido, hoy veremos la forma de agregar iconos de redes sociales a las vistas dinámicas de Blogger.

Como usuario de las vistas dinámicas, seguramente ya te habrás dado cuenta que no es posible agregar código desde el gadget HTML/Javascript, mismo que comúnmente es usado para agregar iconos de redes sociales. De todos modos, aunque se pudiera usar dicho gadget, el contenido quedarían "oculto" en una pestañita, ya que todos los gadgets que agregas, aparecen a la derecha en la página en dichas pestañas, con excepción al widget de páginas estáticas que se muestra en la barra que aparece debajo de la cabecera.

Bueno, pues pensando en tener los iconos sociales visibles cuando un usuario acceda al blog, lo que haremos entonces es usar el gadget de páginas estáticas para que se muestren, usando también un poco de CSS.

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

Sobre el tutorial

El tutorial consta de dos partes. La primera parte explica cómo agregar los enlaces de redes sociales a la lista de páginas estáticas. Es muy sencillo, pero para usuarios nuevos será de gran ayuda. Si ya lo sabes, ve directo a la segunda parte ;)

En la segunda parte explicaré la forma en que cambiamos el texto de los enlaces por iconos respectivamente. Ahora vayamos al grano y veamos paso a paso cómo lograrlo ;)


Primera parte: Agregando los enlaces de las redes sociales que usas


Pasos:

  1. Agrega el gadget de Páginas si es que no lo has hecho, yendo a la pestaña "Diseño", luego, haces click en agregar un gadget (en cualquier sección ya que de todos modos se mostrará debajo de la cabecera), y selecciónalo de la lista de gadgets disponibles.
    Opcion Gadget de paginas
  2. Luego, copia todas las direcciones web de las distintas redes sociales que usas. Para ello dirígete a cada página en cuestión, y cópiala desde la barra de direcciones del navegador. Por ejemplo, esta sería la dirección web de mi página de Twitter:

    https://twitter.com/compartidisimo
  3. Una vez que tengas todas las direcciones web de las páginas de las redes sociales que usas, y que deseas agregar a tu blog, dirígete al panel de Blogger, y haz click en la pestaña "Diseño".
  4. Después, haz click en editar en el gadget de "Páginas" luego en "Añadir página con enlace".

    Opcion para agregar enlaces en gadget de paginas


  5. Una vez que se abra el cuadro de "Dirección web", agrega una a una, todas las direcciones web de las páginas de redes sociales que ya copiaste y guárdalas. Deberás repetir el proceso para cada red social que uses. Por ejemplo en la siguiente imagen puedes ver que estoy agregando a dirección web de Twitter:

    Formato para agregar enlaces

Nota: Si por error pusiste mal una dirección web y la guardaste, ¡no te preocupes!. Aunque no puedes editarla, si puedes eliminar el enlace, y volverlo a poner ;)

Cuando termines de agregar todos los enlaces, entonces pasa a lo siguiente.

Segunda parte: Personalizar los enlaces de las páginas con iconos de redes sociales

Para reemplazar los textos de los enlaces por iconos, vamos a usar un solo archivo de imagen conteniendo todos los iconos. De ese modo hacemos la carga más eficiente, ya que enlazaremos una sola imagen en lugar de varias que necesitaríamos.

He creado esta imagen con los iconos que creo pueden ser usados, y que puedes ver a continuación:

Sprite con iconos de redes sociales

En donde de izquierda a derecha se muestran así: Inicio, Twitter, Facebook, Pinterest, Instagram, Google+, RSS, Acerca de, LinkedIn, Contacto.


El truco consiste en usar el llamado selector de hermano adyacente en CSS, de tal modo que podamos seleccionar cada elemento de la lista de páginas estáticas para poder remplazar el texto por la imagen del icono.

En tu blog, los iconos no necesariamente tienen que mostrarse en el orden que aparecen en la imagen (de izquierda a derecha), ni tampoco ponerlos todos. Lo que si hay que tener en cuenta es la posición de cada uno en la imagen, para poderlos reemplazar correctamente según corresponda.

A continuación puedes ver la posición que corresponde a cada icono en la imagen que creé, y que vas a usar para mostrar cada icono según necesites:

Icono
de:
Posición del
Icono por defecto
Posición del
Icono :hover
Inicio0 00 -35px
Twitter-35px 0-35px -35px
Facebook-70px 0-70px -35px
Instagram-140px 0-140px -35px
Pinterest-105px 0-105px -35px
Google+-175px 0-175px -35px
LinkedIn-280px 0-280px -35px
RSS-210px 0-210px -35px
Acerca de-245px 0-245px -35px
Contacto-315px 0-315px -35px


Donde dice: "Posición del Icono por defecto" se enlista la posición que ocupa en la imagen el icono que aparece por defecto. Por otro lado, "Posición del Icono :hover"corresponde a la posición del icono al poner el puntero del ratón encima del icono/imagen (del evento :hover). 


Pasos:

  1. Primero, hay que agregar el siguiente CSS independientemente de los iconos que vayas a agregar. Ésto lo haces yendo a Plantilla > Personalizar  > Avanzado > Añadir CSS.


    .tabs li{
    background:url(http://2.bp.blogspot.com/-8KguVN5ZlTQ/U1rrOLmXLGI/AAAAAAAAQMA/0655t_U6M74/s1600/iconos-compartidisimo-vista.png) no-repeat 0 0;
    margin:0 !important;
    padding:0;
    width: 35px;
    float:left;
    cursor:pointer;
    border-right: 1px solid #585858; /*color de borde debe ser igual*/
    -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;
    }
    .tabs li:first-child{
    border-left:1px solid #585858; /*color de borde debe ser igual*/
    }
    .tabs ul li a{
    display:block;
    line-height:80;
    }


    He agregado la URL de la imagen y la he resaltado de rojo. Para evitar sorpresas, te recomiendo alojarla por ti mismo desde Blogger y sustituirla. Si no sabes hacerlo, échale un vistazo a este tutorial.

    Para que pueda entenderse mejor cómo mostrar el icono respectivamente en cada enlace, vamos a imaginar que vas a mostrar los siguientes 4 enlaces que a continuación se citan, siguiendo el orden de izquierda a derecha:

    Inicio       Twitter       Facebook      Instagram

    Una vez que agregues el CSS anterior, los enlaces se verán así:

    Cómo luce icono de inicio sustituido

    Como puedes observar, los cuatro enlaces han sido reemplazados por el icono de inicio. Ésto sucede porque en el primer bloque (regla) de CSS, definimos la imagen que se mostrará en cada elemento de la lista de enlaces y que es la imagen que te facilito. 
  2. Ahora viene lo bueno: especificar la posición de la imagen a mostrar para cada icono según corresponda al enlace.

    Lo que necesitamos entonces es especificar la posición de la imagen para mostrar los iconos de Twitter, Facebook, e Instagram.  La clave está en definir el CSS que corresponde a cada enlace, de izquierda a derecha, por ello empezamos por el icono de Twitter, ya que el de inicio, quedará tal y como se muestra en la imagen, es decir, con el icono de la casita.

    Vamos a tomar nota de la posición que te puse en la tabla anterior para mostrar el icono por defecto de Twitter, y la colocamos en la propiedad "background-position", como se aprecia a continuación:

    .tabs li+li{
    background-position:-35px 0;
    }



    Si observamos el CSS anterior, a: #pages li que definimos al principio, hemos agregado el caracter "+" y enseguida hemos agregado  "li". Eso hará que apuntemos al "segundo enlace", al cual le definiremos la posición de la imagen que facilito, usando: "background-position" de ese modo, se mostrará el icono de Twitter en sustitución al de inicio que anteriormente se mostraba (el de casita).

    Para nuestro "tercer enlace" y que sería el de Facebook, agregaríamos de nuevo "+li" enseguida del anterior que pusimos, y definimos la posición que corresponde al icono de Facebook, y que puedes ver en la tabla de arriba. Entonces nos quedaría así:

    .tabs li+li+li{
    background-position:-70px 0;
    }


    Por último, tenemos que reemplazar el icono de Instagram, y que sería nuestro "cuarto enlace" de izquierda a derecha y para ello declaramos otra regla de CSS, agregando otro "+li", y especificamos la posición del icono tomando en cuenta la tabla. Nos quedaría entonces así:

    .tabs li+li+li+li{
    background-position:-140px 0;
    }


    ...y así lo harás sucesivamente para cada icono que necesites poner.


  3. ¡Muy bien! Hasta ahora hemos reemplazado todos los iconos respectivamente. Lo que nos falta entonces, es definir la posición de cada icono al poner el puntero del ratón encima de cada uno, es decir, para que se lleve a cabo lo que se conoce como evento :hover.

    Será muy sencillo porque lo único que vas a tener que hacer, es copiar cada regla de CSS que definimos para cada botón, y agregarle :hover al final del selector, luego copia la posición del botón de la tabla que facilito donde dice: "Posición icono :hover", y ponla según el icono que corresponda, incluyendo el del primer icono que es el de inicio y que agregaste en el paso 1.

    Para no enredarte mucho, mejor veamos cómo sería el CSS que haría que el botón cambie como en la demostración, al poner el puntero encima del botón de inicio:

    .tabs li:hover{
    background-position:0 -35px;
    }


    Luego para el de Twitter:

    .tabs li+li:hover{
    background-position:-35px -35px;
    }


    Para el de Facebook:

    .tabs li+li+li:hover{
    background-position:-70px -35px;
    }


    Por último para el de Instagram:

    .tabs li+li+li+li:hover{
    background-position:-140px -35px;
    }


    Una vez que agregues todo este CSS, ya tendrás funcionando los botones de Inicio, Twitter, Facebook, Instagram. Si quieres poner más hay que definir el CSS tal y como lo he explicado, para que se vea cada uno.   
  4. OPCIONAL: Mover a la derecha los iconos como se muestran en la demostración, recorrer los iconos del administrador si decides ponerlos a la derecha y eliminar el divisor que aparece antes del primer enlace.

    Para lograr todo lo anterior, agregamos el CSS que se indica, también desde el diseñador de plantillas en añadir CSS:

    Para que los iconos aparezcan a la derecha como en la demostración necesitas esto:

    #header #pages {
    float:right;
    }


    Para anular el caracter pipe "|" que se usa como divisor y que aparece antes de cada enlace (si no lo quitas va a quedar encima del borde del primer icono y se va a ver feo), necesitarás este CSS:

    #pages:before {
    content:normal!important;
    }


    Para desplazar los iconos de administrador que aparecen a la derecha en la barra y que solo son visibles para ti (solo si es que desplazas los iconos a la derecha) necesitarás este CSS:

    #header .admin-controls {
    right:380px !important; /*Valor que puedes editar según necesites*/
    }



¡Y listo!, ya tienes iconos de redes sociales, visibles en las vistas dinámicas.

Parece difícil porque se ve algo extenso el tutorial, pues lo estoy explicando paso a paso, aunque no lo es tanto. Solo lee con atención y ya verás que con paciencia lo logras. Si crees que algo expliqué mal u omití algún punto importante, no duces en comentarlo.


Notas sobre el tutorial, y otros puntos importantes
  • Hubiera sido más sencillo utilizar las llamadas Pseudoclases estructurales (li:nth-child(n)pero, no funcionan en Internet Explorer 8, navegador que aún es usado por algunos usuarios, así que, esta vez nos vamos a tener que quedar con las ganas.
  • El efecto suave del cambio de icono y que puedes apreciar en el navegador, claro, si usas uno de los buenos, bonitos y modernos, funciona en los principales navegadores "modernos" incluyendo Internet Explorer 10. 
  • Los iconos serán reemplazados correctamente en todos los navegadores incluyendo Internet Explorer 8. Es decir, se va a ver todo "decente"... en su lugar pues ;) 
  • Los bordes del icono se definieron en el CSS que facilito en el primer paso. Deben ser iguales; he puesto ahí el comentario entre: /*...*/,  y puedes editarlo según el color de fondo que tengas en la barra.


Espero sea útil ;)

Artículos recomendados:

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