Variaciones del botón compartir de Blogger

JMiur

Agregar los íconos para compartir de Blogger sólo requiere que habilitemos la opción correspondiente en el elemento Blog y que verifiquemos que este código esté en alguna parte de la plantilla, dentro del includable llamado post:

<b:include data='post' name='shareButtons'/>

Esa sóla línea los agrega y, por defecto, está condicionada de este modo:

<div class='post-share-buttons'>

  <b:if cond='data:post.sharePostUrl'>
    <b:include data='post' name='shareButtons'/>
  </b:if>
</div>

Si no está, basta agregar eso allí donde quisiéramos mostrarlo, ya sea en el footer de las entradas o debajo de su título. El resto del código es añadido automáticamente por Blogger en todas las plantillas y los estilos también son cargados sin nuestra intervención. El resultado, será algo así:

Roudy nos aporta algo más; dice que es posible que, en lugar de mostar los íconos grises por defecto, basta agregar algo en el CSS de nuestra página para que se muestren en colores.

Como lo que vemos es una imagen de tipo sprite donde hay 20 botoncitos organizados en cuatro filas de cinco columnas, bastaría entonces cambiar la posición; por defecto de esos botones.

El estilo que pone Blogger es definido así: Ver/Ocultar [+]

.sb-email {background-position: 0 0 !important;}
.sb-blog {background-position: -21px 0 !important;}
.sb-twitter {background-position: -42px 0 !important;}
.sb-facebook {background-position: -63px 0 !important;}
.sb-buzz {background-position: -84px 0 !important;}

Así que, sabiendo que cada botón mide 21x22, podríamos "mover" la imagen y apuntar a alguna de las otras filas que en ese código es el valor 0; pondríamos entonces, esto: Ver/Ocultar [+]

.sb-email {background-position: 0 -22px !important;}
.sb-blog {background-position: -21px -22px !important;}
.sb-twitter {background-position: -42px -22px !important;}
.sb-facebook {background-position: -63px -22px !important;}
.sb-buzz {background-position: -84px -22px !important;}

donde -22px es la segunda fila, si quisiéramos mostrar la tercera pondríamos -44px y para la cuarta pondríamos -66px.

Claro que, si queremos que haya algún efecto hover, deberemos agregar las reglas, por ejemplo: Ver/Ocultar [+]

.
a.sb-email:hover {background-position: 0 -44px !important;}
a.sb-blog:hover {background-position: -21px -44px !important;}
a.sb-twitter:hover {background-position: -42px -44px !important;}
a.sb-facebook:hover {background-position: -63px -44px !important;}
a.sb-buzz:hover {background-position: -84px -44px !important;}

Otra alternativa para hover seria establecer la opacidad; esto lo podemos hacer con otras dos reglas:

a.share-button {
  opacity: .8;
  filter:alpha(opacity=80);
}
a.share-button:hover {
  opacity: 1;
  filter:alpha(opacity=100);
}

Y si se quieren más efectos, puden usarse sombras aunque aunque estos no se verán en Internet Explorer:

a.share-button:hover {
  -moz-box-shadow: 0 0 10px #2AA inset;
  -webkit-box-shadow:0 0 10px #2AA inset;
  box-shadow:0 0 10px #2AA inset;
}

Como la última fila es transparente, podemos usarla para generar botones relativamente distintos:

a.share-button:hover {
  -moz-box-shadow: 0 0 1px #FFF inset;
  -webkit-box-shadow: 0 0 1px #FFF inset;
  box-shadow: 0 0 1px #FFF inset;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
a.share-button:hover {
  -moz-box-shadow: 0 0 4px #FFF inset;
  -webkit-box-shadow: 0 0 4px #FFF inset;
  box-shadow: 0 0 4px #FFF inset;
}