Personalizar los botones para compartir de Blogger | Oloblogger No hace mucho comenté lo de la incorporación del botón Pinterest en el gadget de botones sociales de Blogger y en aquel momento recordé que...

5 de marzo de 2014

Personalizar los botones para compartir de Blogger

No hace mucho comenté lo de la incorporación del botón Pinterest en el gadget de botones sociales de Blogger y en aquel momento recordé que tenía pendiente (entre otras muchas cosas), explicaros la manera en que se pueden personalizar esos botones para cambiar un poco su aspecto.

Los botones originales están construidos mediante CSS sprites y por eso técnicamente es fácil cambiarlos mediante la simple sustitución de esa imagen que sirve de base. No obstante, como Blogger aplica automáticamente su propio CSS, también será necesario ajustar un poco esas reglas.


Por otra parte está el botón +1 que se añade de manera distinta, por lo que veremos asimismo cómo cambiar su código para que estéticamente sea del mismo estilo que los otros.

Veamos paso a paso todo esto y al final el código para hacerlo de una sola vez.


Diseñar una imagen con los nuevos botones


Esta es la parte en la que la maña de cada cual marcará el resultado final. Se trata de construir una sola imagen que contenga de forma ordenada las imágenes individuales de todos los botones.

En un principio lo más cómodo sería tomar la imagen de la izquierda que es la que usa Blogger, cambiar su contenido respetando los límites para cada botón y por último, sustituir la original por la nuestra. Este es el caso sencillo, pero para ver más casos ya voy a empezar a destrozar cosas.

De entrada no las voy a hacer de 18px como las originales, sino de 24px. Tendrán fondo transparente y en lugar de tres imágenes por botón voy a usar sólo dos, una para el estado normal en tonos de gris y otra a color para cuando se pase el puntero por encima.

Lo básico es ser cuidadosos y que todas las imágenes estén ubicadas exactamente dentro de un cuadrado imaginario de 24x24px (en este ejemplo) y que cada uno esté bien acoplado con sus adyacentes sin dejar ni un píxel de más o de menos.

Para más información ver este otro artículo sobre cómo hacer Rollover con CSS y sprites y este otro sobre Generadores de sprites.

¿Que de momento no queréis calentaros la cabeza con esto? Pues nada, usad esta imagen de la izquierda que es la que yo voy a utilizar en el ejemplo.



Añadir estilo para sobreescribir el de Blogger

Para el estilo de sus botones, Blogger mete automáticamente CSS cuando carga cada página, razón por la que no es visible en la plantilla y no lo podemos modificar, pero lo que sí podemos hacer es añadir nuestro propio CSS e incluir !important dónde sea necesario para que nuestras reglas tengan prioridad.

Hay muchas que no hay que modificar y como al final del post incluyo las necesarias, no voy a hacer aquí una relación exhaustiva y sólo voy a destacar la que incorpora el sprite. Es esta y ya incluye la nueva imagen que os mostré antes:

.share-button {
width: 24px !important;
height: 24px !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBtcgD2wIiTOiQ7f_kZX6qqVFZP3SSFo_2_zHt-29NJO0GxLZc6ESIOvuKIPrB6dVSF0M1imwR4T34ZJUtzmzHeT7f-5bbjXyoZoZE0z5VI1wsbXrAD0ZPm2hHEgLY9IQR-ZKR8jw8wE/s1600/sprite-redes24.png) no-repeat left !important;
overflow: hidden;
margin: 2px !important;
position: relative;
}
.goog-inline-block {
vertical-align: top !important;
}

Nótese que he tenido que redimensionar a 24px y que he incorporado (opción) un pequeño margen para que los botones no queden todos pegados.


Cambiar el código del botón+1


Como supongo que lo que todos queremos es guardar una estética uniforme y el +1 siempre desentona un poco con el resto, será necesario modificar en la plantilla el código del gadget que genera este botón en concreto para así hacerlos todos homogéneos.

Para ello editamos el gadget con id='shareButtons' y cambiamos lo que a continuación veis marcado en verde por lo siguiente. Con el cambio dejamos también el código original inutilizado con símbolos de comentarios por si más adelante queremos volver a cómo estaba.

<b:if cond='data:top.showDummy'><a class='goog-inline-block share-button sb-google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Google+' target='_blank'><span class='share-button-link-text'><data:top.shareToGoogleMsg/></span></a><!--<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>--></b:if>


Con eso el botón pasará de ser un +1 a un simple enlace que abre una ventana emergente para compartir en Google+, que es precisamente lo mismo que hacen el resto de botones de las otras redes (más información sobre URL's para compartir en redes sociales).


Un ejemplo completo


Si queréis ver cómo queda esto antes de lanzaros a crear vuestros propios botones o incluso si estos del ejemplo os gustan, podéis hacer el siguiente cambio en vuestra plantilla.

Buscáis la línea <b:includable id='shareButtons' var='post'> y localizáis su cierre </b:includable >, seleccionais todo el includable con las dos anteriores etiquetas de apertura y cierre inclusive y las sustituis por esto otro. Y si no queréis copiar y pegar tanto, pues simplemente seguir las indicaciones de los comentarios marcados en verde para cambiar el final del gadget y a continuación añadid el estilo.

<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showDummy'><!-- CODIGO AÑADIDO --><a class='goog-inline-block share-button sb-google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' title='Compartir en Google+' target='_blank'><span class='share-button-link-text'><data:top.shareToGoogleMsg/></span></a><!-- FIN CODIGO AÑADIDO E INICIO CODIGO ANULADO <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>--></b:if>
<style>
.post-share-buttons {text-align: center;width: 100%;}
.share-button {width: 24px !important;height: 24px !important;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBtcgD2wIiTOiQ7f_kZX6qqVFZP3SSFo_2_zHt-29NJO0GxLZc6ESIOvuKIPrB6dVSF0M1imwR4T34ZJUtzmzHeT7f-5bbjXyoZoZE0z5VI1wsbXrAD0ZPm2hHEgLY9IQR-ZKR8jw8wE/s1600/sprite-redes24.png) no-repeat left !important;overflow: hidden;margin: 2px !important;position: relative;}
a.sb-email {background-position: 0 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-blog {background-position: -24px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-twitter {background-position: -48px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-facebook {background-position: -72px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-pinterest {background-position: -96px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a.sb-google {background-position: -120px 0 !important;-moz-transition:all .5s;-webkit-transition:all .5s;transition:all .5s;}
a:hover.sb-email {background-position: 0 -24px !important;}
a:hover.sb-blog {background-position: -24px -24px !important;}
a:hover.sb-twitter {background-position: -48px -24px !important;}
a:hover.sb-facebook {background-position: -72px -24px !important;}
a:hover.sb-pinterest {background-position: -96px -24px !important;}
a:hover.sb-google {background-position: -120px -24px !important;}
</style>
</b:includable>

He puesto el CSS necesario a continuación del gadget para una más fácil sustitución, pero también podéis ponerlo entre las etiquetas skin (sin las etiquetas style en ese caso).

Si lo probáis veréis que también incluí un pequeño efecto para el hover con transition y si no, pues aquí abajo tendéis una demo del resultado pero con los enlaces anulados.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

70 comentarios :

  1. Saludos Oloman.... Gracias por el datico.. creo que cambiare el que tengo a este... ya que los mios son giratorios.... jejejejeje

    Por otro lado y Abusando de tu Gentileza .. me gustaria saber la ruta para cambiarle de color al foter de mi Blog... es de un color gris.. pero se lo quiero poner negro para que haga contraste con las cajas de mis post... de antemano un Saludo y un Abrazo Y gracias por seguir compartiendo !!!!

    ResponderEliminar
  2. Tengo una pregunta sobre el botón de Google+. Sinceramente para mí resulta más llamativo (y sobre todo más práctico que insertar el javascript que ralentiza la carga del blog) tenerlos en esa presentación de imagen para compartir, ¿pero cual ayuda más al SEO? ¿La versión en botón de +1 o la versión de compartir? toco el tema por que había leído en este post de miltrucosblogger http://www.miltrucosblogger.info/2013/08/google-una-poderosa-herramienta-seo.html hace ya algún tiempo que habla sobre ese botoncito que mejoraba el SEO pero no me quedó claro si era necesario dejarlo en el botón o dejarlo como link para compartir.

    ResponderEliminar
    Respuestas
    1. Yo pienso que la versión original con el +1,pues lo de compartir no suma +1 mas que en el propio post compartido en Google Plus, no en el artículo original

      Eliminar
  3. Hola, la verdad es que llevo tiempo con ganas de darle estilo a esos botones... me viene de lujo el post. Pero soy ultra fan de tener el +1 a mano y el resto del nuevo estilo está muy bien, pensé no seguir la segunda parte del post.

    He modificado:
    div class='goog-inline-block dummy-container'
    lo he dejado en
    div class='goog-block dummy-container'

    El estilo entre los skin, como dices.

    El resultado es aceptable, los botones modificados como propones y el +1, debajo.
    ¿Crees que terminará dando problemas por actualizaciones de Blogger?

    Un saludo y muchísimas Gracias!!!

    ResponderEliminar
    Respuestas
    1. Creo que no. Si acaso si incorporan algún nuevo botón, pero pienso que sería fácil de actualizar eso.

      Eliminar
  4. Quitando que me he asustado por la cantidad de código (yo estoy adentrándome en este mundo y ya me gusta meterme en berenjenales...) me ha parecido un post interesantísimo e intentaré "jugar" con ello cuando tenga tiempo en mi blog. ¡Mil gracias!

    ResponderEliminar
    Respuestas
    1. Creo que sí me pasé porque realmente con lo marcado en verde y lo que hay entre ello, es suficiente. Bueno, eso y el estilo que viene después.

      Eliminar
  5. Muchas gracias!, queda genial, pero ahora no veo las etiquetas 0_0

    ResponderEliminar
    Respuestas
    1. Pero eso no tiene nada que ver con el código que yo puse. Posiblemente lo borraste accidentalmente en esta u otra modificación. Prueba a ver si lo arreglas con esto

      Eliminar
  6. Hola Oloman, yo te pedí ayuda ayer por fb, para agregarle fade a los tooltips y bueno, agregué el script y el estilo, pero no funcionó. quizás tenga que ver que donde va el tooltip hay enlaces, que no están en el ejemplo de Vagabundia, así que tuve que inventar. Gracias por responder Oloman, es un agregado estético, no es necesario. Saludos

    ResponderEliminar
    Respuestas
    1. Preguntaste por el script y te localicé uno operativo, pero no estoy familiarizado con ese truco y no sé cómo funciona si no me pongo a estudiarlo, cosa que ahora mismo no puedo hacer.

      Eliminar
  7. Saludos Oloman.. ya solucione lo del color en mi footer del blog.. lo raro es que me aparecia con el nombre de Lower no se por que... queria preguntarte si hay algun buscador tipo google para ponerle a mi blog y como quitar el que tengo?.. desde ya muchas gracias.. un Abrazo !!!!!

    ResponderEliminar
    Respuestas
    1. El que yo uso es el que viene como gadget "buscador" y ese usa el mismo motor que Google.

      Eliminar
  8. Hola Oloman!
    Otra forma sería quitar el código de los botones nativos, y agregar los propios, de ese modo nos ahorraríamos algunos bytes. El problema o limitación es que habría que quitar el código de los botones cada vez que se ingrese al editor, de otro modo terminamos por tener un montón código innecesario.

    Saludos ;)

    ResponderEliminar
    Respuestas
    1. Sí, claro Karla, pero pensé que dejando el código original sería más fácil añadir esta modificación. Saludos.

      Eliminar
  9. Hola Oloman,

    Yo llevo tiempo usando esto, y el botón de Facebook tiende a darme problemas. A veces me comparte mi logo y no las imágenes de facebook, otras decide compartir como extratcto de la entrada un texto que nada tiene que ver, tal vez uno escrito en un gadget. He probado tu código tal cual y sigue saliéndome lo mismo ¿sabrías a qué se debe?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Es un poco caótico Facebook para eso de las imágenes que acompaña, pero ayuda que la primera imagen del post sea de más de 400px de ancho y que rellenes la "descripción de búsqueda" en cada post. Eso fuerza un poco las cosas.

      Eliminar
  10. Genial este post Oloman, encontré lo que buscaba, pero estoy perdidísima. No sé nada de html... Entonces me pierdo en tu explicación: dices que si queremos tal cual los botones tenemos que copiar el CCS del último recuadro, ¿es así?, pero no entiendo con qué se reemplaza el texto en color verde... Perdona mi ignorancia, pero lo termino de comprender y no quiero meter la pata. Aprovecho para preguntarte también cómo se tendría que poner, antes de estos botones, la palabra "Compartir".
    Gracias de antemano,

    ResponderEliminar
    Respuestas
    1. Demorado pero contesto.
      El código es para ponerlo tal cual y lo que digo es que si no quieres cambiar el gadget entero que entonces te fijes en las marcas verdes. No hay que cambiar nada ahí; son sólo unas referencias. O sea, gadget entero sustituido por el que hay de serie.

      Para añadir la palabra Compartir, lo más fácil es teclearla tras la primera línea, tras el includable, aunque deberías meterla entre marcas de párrafo para que no se te complique el formato: <p>Compartir</p>

      Eliminar
  11. Oloman! perodna pero me he perdido en tu explicación, donde se supone que se copia el primer codigo que está debajo del titulo "Añadir estilo para sobreescribir el de Blogger" ???

    ResponderEliminar
    Respuestas
    1. Esa parte es la de CSS, así que va en la plantilla, entre las etiquetas SKIN.

      Eliminar
  12. Y si ademas quisiera añadirle antes de los botones algún comentario como "comparte esta noticia" o algo parecido ¿como se podría hacer?, gracias

    ResponderEliminar
    Respuestas
    1. Eso es fácil. Añade esto a tu CSS:
      post-share-buttons:before {
      content: "Compartir\00A0";
      }
      Luego ya cambias la palabra Compartir por lo que quieras

      Eliminar
  13. Oloman! tengo varias preguntas:

    1.Como hago para alinear los botones al lado izquierdo.

    2. Como cambiarle el mensaje que se muestra al pasar el cursor sobre los botones como por ejemplo: "Compartir en Twitter" a "Share on Twitter"

    3. Como quitar el boton de Blogger ?

    ResponderEliminar
  14. 1) .post-share-buttons {text-align: left;width: 100%;}
    2) Los trozos de código que tienen este formato son los que hacen que aparezcan esos rótulos, que realmente son los "title":
    expr:title='data:top.emailThisMsg'
    Si cambias eso dejándolo simplemente en title='Mensaje que quieres', pues ya lo tienes
    3) Lo más fácil es ocultarlo usando su selector. Tendrías que añadir al CSS lo siguiente:
    a.sb-blog {display: none;}

    ResponderEliminar
  15. Buenas noches, quisiera saber si los botones originales de blogger al final de la entrada (twitter - Facebook y google) se pueden agrandar un poco, solo agrandarlos, saludos

    ResponderEliminar
    Respuestas
    1. No. Sólo agrandarlos no. Habría que cambiar igualmente el dibujo de fondo que configura el aspecto de los botones para hacerlos más grandes, así que sería lo mismo que se explica aquí.

      Eliminar
  16. Oloman gracias por los post. pero tengo una duda. aplico todo tal cual y como dices pero el efecto y los botones no son visibles en google chrome y si en los demas navegadores .

    que hago mal ?
    si me ayudaras seria genial

    ResponderEliminar
    Respuestas
    1. ¿En qué blog lo pusiste, Miguel? Es para verlo.

      Eliminar
  17. Anónimo8/8/14, 3:52

    Hola Oloman, es la primera vez que te pido ayuda:
    Me gustaria eliminar de los botones "pinterest", "enviar por correo electronico"y "escribir un blog" y dejar visible y mas grandes SOLAMENTE los botones "twitter", "facebook" y "Google+", es posible?
    Estare muy agradecido si me explicas. Gracias

    ResponderEliminar
    Respuestas
    1. Si los quisieras iguales sería sólo cuestión de ocultar con CSS los que no quieres, pero si además los quieres de mayor tamaño lo más práctico es que desde el escritorio marques que NO quieres esos botones y que luego pongas a mano otros. Estos o estos otros seguro que te sirven.

      Eliminar
  18. Genial la entrada! Ya sido súper útil!
    Te hago una pregunta, a mi me quedan muy separados de la entrada (una fotografía y salto de línea). Me gustaría que se vieran justo debajo de la foto, como podría hacerlo?
    Muchísimas gracias!!

    ResponderEliminar
    Respuestas
    1. ¿En qué blog lo tienes así? Si es en Tener-Cultura no veo que haya tanto espacio.

      Eliminar
    2. En mytfotografiacreativa.
      Gracias!! 😊

      Eliminar
    3. OK. Aquí cambia el 20px del margin y ponlo a cero:
      .post-footer {
      margin: 20px -2px 0;
      padding: 5px 10px;
      color: #666666;
      ...

      Y si todavía quieres "subirlos" un poco más, añade esto otro a tu CSS:
      span.post-icons {
      display: none;
      }

      Eliminar
  19. De repente me han desaparecido las imágenes de los botones, aunque pasando el ratón las encuentra, pero no hay imagen.....

    ResponderEliminar
    Respuestas
    1. Se ha roto el enlace y lo he cambiado en el código:
      https://dl.dropboxusercontent.com/u/57549161/Imagenes/sprite-redes24.png (ROTO)
      http://4.bp.blogspot.com/-UKVaH5Nkc2s/UwizNGFng1I/AAAAAAAAOgc/69D47XdF9NA/s1600/sprite-redes24.png (BUENO)

      Eliminar
    2. Gracias por el aviso. Accidentalmente dejé una dirección de DropBox que no correspondía y este servicio me ha anulado la carpeta pública por exceso de tráfico. No sabía qué fichero era el culpable pero con seguridad este era uno de ellos ;)

      Eliminar
  20. MUY BUENO ME SIRVIO MUCHO!

    ResponderEliminar
  21. Hola de nuevo Oloman!
    Sigo batallando con el tutorial... XD Me aparecen letras sobre los iconos, y me gustaría que desaparecieran. He intentado trastear borrando el expr:title pero sólo encuentro uno y siguen apareciendome mensajes sobre los iconos.
    Por otro lado, no se porqué, el último icono aparece separado del resto un pelín.
    Muchísimas gracias!!!
    www.mytfotografiacreativa.blogspot.com

    ResponderEliminar
    Respuestas
    1. Davinia, prueba a cambiar este -9999px por un valor positivo, tal que así:
      .share-button-link-text {
      display: block;
      text-indent: 9999px;
      }

      Eliminar
  22. Yo no encuentro en el html de mi blog la línea ""
    Podrías ayudarme por favor ?
    Mi blog es http://ambulanciasyemerg.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No salió la línea que querías referenciar Roberto. No pongas los símbolos < ni > para que se vea o pásalo por esta herramienta antes de pasar el código al comentario.

      Eliminar
  23. Hey bastante util, peroo.. a mi me gustaría tener los botones como los que usas tu hasta abajo de la entrada, como lo has conseguido?

    ResponderEliminar
    Respuestas
    1. Estos que se explican aquí son los que utilizo actualmente Iván.

      Eliminar
    2. Gracias, después de comentar los encontré sin tener que buscar tanto, ya hasta me los instalé.

      Eliminar
  24. Hola. Por favor, ¿cómo hago para que solo queden en las entradas, y no en la página principal? Mil gracias. Quedaron muy bonitos. Mi blog es: www.monialus.com.ar

    ResponderEliminar
    Respuestas
    1. Hola Moni. Eso lo consigues metiendo todo el código que forma los botones, dentro de una condición.

      En este enlace tienes cómo funciona eso de las condiciones y en este otro una guía con las distintas condiciones que puedes usar.

      Eliminar
  25. Gracias Oloman, me sirvio mucho gracias eres grande.

    ResponderEliminar
  26. Muchas gracias Oloman. Me ha funcionado perfectamente en mis dos blogs, estoy encantada!
    Gracias por tanta ayuda.
    Saludos,
    Anne.

    ResponderEliminar
  27. Hola Oloman :).
    He añadido el CSS y aparecen las imágenes de los botones a medias con las imágenes que deberían tener con el hover, ¿entiendes? Aparecen mitad de color y mitad gris. ¿Qué podría hacer para arreglarlo?

    Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Tendría que verlo Michele y no sé en que blog los tienes puestos ahora mismo...

      Eliminar
  28. Qué tal Oloman,

    ¿Sabes si se puede modificar el contenido del botón de Twitter para agregarle la cuenta del blog al final de la url? Me refiero a que sea tipo "vía @OrgullosoCitadi", por ejemplo.

    Saludos y gracias por compartir conocimiento.

    ResponderEliminar
    Respuestas
    1. Pues no lo sé seguro, pero a priori no veo en este gadget un lugar idóneo para poder añadir eso y que funcione. En otro tipo de botones, evidentemente sí se podría.

      Eliminar
    2. A mí me pasa lo mismo. Te dejo un ejemplo de entrada: http://anilsaa.blogspot.com.ar/2015/07/tetete.html

      Eliminar
    3. Migue, en tu caso el fallo es porque no has usado este código que publiqué, sino otro parecido. Hay valores que están cambiados. Prueba a usar este, por favor.

      Eliminar
  29. Hola que tal? Gracias por tu aporte, como harías para que se mostrara tambien en la version móvil?
    Gracias de antemano.

    ResponderEliminar
  30. Hola de nuevo,
    Llevo dos días destrozándome el cerebro para intentar comprender porque tu código funciona bien en Chrome pero en Safari no. El ultimo icono (el de G+) se desplaza hacia arriba.
    Alguna idea?
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Goosie. Dos preguntas, dos respuestas.

      Las versiones móviles estándar de Blogger no son modificables. Sólo puedes ajustar el formato en la opción "Personalizada" o si no las usas porque tienes un diseño RWD.

      Sobre lo de Safari yo acabo de probar viendo este mismo post en ese navegador y no observo problema alguno, así que más bien la causa debe estar en tu CSS. Algo puede estar interfiriendo, quizás una clase o selector que usaste con el mismo nombre.

      Eliminar
  31. Hola Oloman,
    Gracias por tus respuestas, lo del móvil ya lo tengo solucionado, pero lo de los iconos no hay forma, he creado un blog vacío sin nada (con dos tonterías ) y he añadido los botones para así comprobar si el código de mi otro blog no le gustaba a los botones, efectivamente, en Chrome perfecto pero en Safari el ultimo botón se desplaza hacia arriba. Es algo rarísimo, lo he repasado mil veces, por favor, echa un vistazo al blog. http://goosiepruebasdeblog.blogspot.com.es/
    Así mismo te he puesto como admin del blog por si quieres ver el código.
    Un saludo y gracias de nuevo.

    ResponderEliminar
  32. Hola de nuevo, yo mismo me respondo, he encontrado el código que no le gusta a Safari, es este
    data:top.shareToGoogleMsg , lo he cambiado por data:top.blogThisMsg y funciona perfecto.
    Esperando que le sirva a alguien,
    Un saludo a todos.

    ResponderEliminar
    Respuestas
    1. OK Goosie. Perfecto entonces y gracias por el apunte.

      Eliminar
  33. Excelente post, muchas gracias Oloman.

    ResponderEliminar
  34. Anónimo2/3/16, 0:17

    Hola Oloman.
    Copiamos el codigo pero encima de todo del blogg al lado izquierdo nos aparece esto : -->
    como podriamos hacer para quitarlo?
    Muchas gracias
    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola. Lo veo, pero eso no tiene nada que ver con los botones.

      Si buscas en tu plantilla, esos símbolos aparecen justo después de <body... Buscad esa referencia y encontraréis muy cerca esos dos guiones con el signo mayor que.

      Eliminar
  35. Hola Oloman! Gracias por este post. La verdad es que buscaba cómo cambiar esos botones (no tengo ni idea de html) y me ha ido genial! ahora se ven mejor! El único problema es que no enlazan para poder compartir el artículo. Te dejo mi blog por si pudieras echarle un ojo: https://lasrecetitasdehellen.blogspot.com.es/
    Gracias y un saludo!

    ResponderEliminar
    Respuestas
    1. Hola Hellen. Sólo funciona el de G+ por lo que sospecho que pueden pasar un par de cosas.
      Una es que no realizaras bien todos los cambios que explico en el tutorial.
      La otra es que no estén habilitados los botones estándar de Blogger. Eso se hace desde Diseño > Bloque Entradas del Blog > Editar

      Eliminar
  36. Guauuu! Me van de fábula y ha sido muy fácil. Qué grande eres, Oloman!

    ResponderEliminar