JMiur [E]

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;
}

38 comentarios:

Junior  

hola gracias esta muy buena la información...tengo una pregunta que no tiene que ver con el post como puedo hacer para que todos mis link que yo tengo en mi blog se habrán en una pestaña he buscado muy información pero no he encontrado algo que me funcione...

Responder
Marcos Horro Varela  

Justo estaba buscando la forma de modificarlo. ¡Muy útil!
Saludos

Responder
Unknown  

Genial! estaba pensando si se podrían cambiar por íconos propios, pruebo ésto :P

Responder
Marta  

¿Dónde colocaríamos esto exactamente?
¿Después de la etiqueta &lt/head&gt y antes de la etiqueta &ltbody&gt y encerrado dentro de una etiqueta &ltstyle type='text/css'&gt?

Responder
NMitra  

¡Gracias! cómo estos iconos para agregar un poco de su número en

Responder
JMiur  

Graciela:
También es posible usar íconos propios y mezclarlo con el código de Blogger.

Marta:
Eso va en el CSS así que, antes de </b:skin> o bienm antes de &lt:/head> dentro de una etiqueta stye tal como dices.

Responder
Unknown  

Estoy buscando la parte donde se muestran las imágenes en la plantilla, no lo reconozco, me refiero para poner las mías.

Responder
JMiur  

¿Las imágenes de los botones? Eso no está en la plantilla, es algo que carga Blogger de manera automática y dice esto:

.share-button {
background: url("/img/share_buttons.png") no-repeat scroll left center transparent !important;
}

Ese archivo puede sobrescribirse ... creo , agregando esa regla con la URL del archivo nuevo pero siempre y cuando todo tenga la misma medida.

También es posible usar los códigos de Blogger de manera parcial que es lo que hago en este blog. Fijate en esta entrada a ver si se entiende la idea.

Pueden mezclarse los botones con los de cualquier otro servicio.

Responder
Unknown  

Perfecto Jorge, es lo que buscaba, muchas gracias :P

Responder
JMiur  

Es engorroso para escribir pero, creo que vale la pena.

Responder
Unknown  

Probamos :D

Responder
Mega  

HOLA QUIERO AGREGAR EL TRANSPARENTE DONDE LO DEBO COLOCAR :S

Responder
JMiur  

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

Responder
NMitra  

cómo aumentar el campo con los botones?

Para agregar otro botón

Responder
MiOdonata ~ Bisutería Artesanal  

Genial, como siempre. Gracias

Responder
JMiur  

NMitra: Puedes intentar ponerlo al lado pero el modelo de Blogegr no admite otra cosa a menos que cambies la imagen que utiliza y cres la tuya propia.

Responder
NMitra  

gracias

Responder
Anónimo  

¿Como aplico la variacion para que los botones se vean en color y no trasparentes? No encontre esa parte del codigo

Responder
JMiur  

Las variaciones son aproximadamente las que se indican en el post; no sé a cuál te refieres con exactitud.

Responder
pvillegasy  

Hola JMiur

Cordial saludo
¿como puedo cambiar el color del footer?

Gracias

Responder
JMiur  

Agregando algo así:

.footer-outer {background-color: el_color;}

Responder
Unknown  

Una Pregunta JMiur quisiera saber si se pueden cambiar esos iconos por unos míos, es que el problema es que a cada rato en mi pagina como que se va y de pronto vienen
Esta es mi pagina:
www.Diakchimba.com

Responder
JMiur  

Puedes usar los íconos que quieras pero deberás agregar tu propio código tal como se muestra en esta entrada.

Responder
NeoAkira  

Hola nuevamente... disculpa este tutorial es algo en lo que he estado batallando U_U

no logro colocar los iconos de compartir en mis entradas...

en esta ocasion busque

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

la linea estabas sola

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

asi que le inclui el resto que comentas y aun asi no aparece..

tendra que ver con mi plantilla?


le quite los signos de <> en el comentario para ke me permitira publicarlos n_n !!

Responder
JMiur  

El condicional es innecesario así que si sólo estabe esto:
<b:include data='post' name='shareButtons'/>
se deberían mostrar.

Si ahora los condicionas, debes habilitarlos en el elemento Blog que editas en la primera pantalla de diseño.

No sé en que blog lo estás aplicando; en http://theworldneoakira.blogspot.com/
no se ve el DIV en el código fuente:
<div class='post-share-buttons'>

Responder
NeoAkira  

gracias por responder... lo estoy aplicando en este blog

http://koffuneral.blogspot.com/

Responder
Unknown  

Hola Jmiur, otra vez yo con cuestiones del blog. He leído tu post intentando solucionar el problemas que tengo en el post footer (los botones de compartir no funcionan o me dice que la página no existe) no sé si pueda ser porque he cambiado la plantilla. A ver si puede ser un problema de código. Respecto a otras dudas que te pregunté hace un tiempo las pude solucionar gracias a tus consejos, aquí te mando el post donde te agradezco. http://fabiobook.blogspot.com/2012/02/fabio-book-la-evolucion-de-un-blog.html

JMiur  

Pues no veo cuál puede ser el error, Fabio. Efectivamente, parece que ocurre eso pero, el código de esa parte es manejado internamente por Blogger así que no es accesible.

No sé por que ocurre eso.

Unknown  

gracias igualmente jmiur, seguiré investigando

Responder
Pliactom  

Tengo una duda JMiur, ¿cómo sería posible cambiar el tamaño de los iconos o remplazarlos por otros?

JMiur  

Cambiarlos, dificilmente puedas. Puedes usar otros creando tus propios códigos. Fíjate en esta entrada.

Responder
Jesus Dugarte  

Hola JMiur te quería preguntar si es posible obtener el código de los botones ya que tengo una plantilla modificada y no los tiene, el código que mencionas al principio que esta dentro del includable no es el mismo que tiene mi plantilla: ¿como podría hacer en ese caso? (este es mi blog http://duug.blogspot.com/) Saludos!

JMiur  

Todas las plantillas tienen el código básico y, normalmente, sólo hace falta agregar lo indicado en la entrada.

¿Qué dice tu plantilla?

Jesus Dugarte  

este el código que sale en mi plantilla

http://dl.dropbox.com/u/26094021/archivo.txt

supongo que es referente a esto ya que lo busque como "shareButtons"

JMiur  

El includable es normal; es l oque se coloca por defecto:

<b:includable id='shareButtons' var='post'>
.......
</b:includable>

Lo que te falta es "mostrarlo" y eso se hace como indica la entrada, ya sea con est:

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

o con esto:

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

Responder
Jesus Dugarte  

listo gracias por todo.

Responder
Vigilis VII  

Como puedo cambiar el tamaño de los botones?????

JMiur  

No se puede, tienen ese tamaño. Si quieres otros, debes usar imágenes propias.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR