Como personalizar botones de Compartir de Blogger. | The Blog By Taina

Como personalizar botones de Compartir de Blogger.

2.3.15
Blogger por defecto nos da unos botones para compartir algo feos, o en lo personal a mi no me agradan mucho, y me imagino que a ti tampoco por eso estas aquí,  así que hoy vamos a aprender como eliminar esos botones y cambiarlos por otros mas lindos.


Yo he hecho algunos que si los quieres solo basta con pinchar en descargar. Pero tu puedes utilizar los que ha ti te gusten, solo necesitaras tener a la mano la URL de cada imagen.



Descarga Aquí

Ahora vamos con los pasos.

Paso 1. Lo primero que tienes que hacer es ir a >diseño, y en entradas de Blog pinchar >editar, ahora vamos a desmarcar la opción >Mostrar los botones para compartir y guardamos.
Paso 2. Vamos a platilla> editar HTML y buscamos este codigo  <div class='post-footer'>
 tal  vez encuentras  dos, el que buscamos es el segundo, ahora justo debajo de eso pegamos este otro.

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_share'><img alt='Share this Post' border='0' src='http://4.bp.blogspot.com/-7Mh18shJbBw/UR0UQJUeNWI/AAAAAAAADCU/tReZl85IJ9c/s1600/Share+this+Post.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='http://1.bp.blogspot.com/-VwUjBqjcw_A/UR0UWOX12aI/AAAAAAAADCk/NMJtDo9H32U/s1600/Facebook+Button+Share.png' width='30'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='http://4.bp.blogspot.com/-HdyrZLb5VQY/UR0UUeHYy5I/AAAAAAAADCc/FaCnOjlaQMQ/s1600/Twitter+Button+Share.png' width='30'/></a>
<a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='http://1.bp.blogspot.com/-ct8UEptg4Jo/UR0UXt9d4FI/AAAAAAAADCs/T-qjemKVoT8/s1600/Email+Button+Share.png' width='30'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='http://2.bp.blogspot.com/-J779mbKE8XQ/UR0UYzYDpSI/AAAAAAAADC0/loD-dNI0ky8/s1600/Pinterest+Button+Share.png' width='30'/></a>
<a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='http://3.bp.blogspot.com/-TRH8rIF1HjM/UiAMrWAgs_I/AAAAAAAAEXo/wIQSxjsfO-k/s1600/Google+Plus+Share.png' width='30'/></a>
<a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' height='30' src='http://1.bp.blogspot.com/-j2vj1-1Ohvw/UkRzcjoz0aI/AAAAAAAAEis/EZoaxPnjX7c/s1600/Tumblr+Icon.png' width='30'/></a>
</div>
</div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->

Todo lo que está en cafe corresponde a la URL de la imagen que quieres poner, esta la puedes cambiar por la imagen que tu quieras, lo que está marcado en azul corresponde a la medida que quieres dar a las imágenes.
NOTA: Si quieres borrar las palabras Share this, solo tienes que borrar este pedazo de código, que se encuentra en la parte superior justo debajo de 'custom_images'>
<a class='addthis_button_share'><img alt='Share this Post' border='0' src='http://4.bp.blogspot.com/-7Mh18shJbBw/UR0UQJUeNWI/AAAAAAAADCU/tReZl85IJ9c/s1600/Share+this+Post.png'/></a>

NOTA 2: Ahora si queremos cambiar de posición como (center, left o right),  solo tenemos que agregar lo que está en amarillo justo después de .
 <!-- AddThis Button BEGIN -->
<div style="text-align: center;">Todo el contenido
Y cerramos con esto </div>justo antes de <!-- AddThis Button END -->


Sabes que me ayudas mucho si lo compartes, habrá otras personas que no les gustan esos botones feos de Blogger.


¿Qué piensas?

20 comentarios:

  1. Genial! Me han desaparecido los botones de compartir de blogger y no logro que me aparezcan de nuevo. He probado otros tutoriales de este tipo pero nunca consigo que me aparezcan los botones. A ver si con el tuyo lo consigo. Gracias, un beso y felicidades por la nueva imagen.

    ResponderEliminar
    Respuestas
    1. Va que no es nada complicado y seguro te resulta bien, Un Abrazo nena !

      Eliminar
  2. Felicidades por este nuevo blog :) esta muy chulo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Wendy por suscribirte, aun le quedan algunos arreglos pero creo hay va jejeje.

      Eliminar
  3. Llevaba un montón de tiempo esperando a ver cómo se hacía porque no lo encontraba por ningún lado. Conseguí personalizar el mínimo los que vienen por defecto pero ya está. Voy a intentar el tutorial a ver que tal queda!
    Un besazo!

    ResponderEliminar
  4. Hola Taina a por ello voyyy, y una pregunta tal cual está el tutorial saldrían debajo de la entrada ¿no?
    Luego te cuento, porque no me suelen salir bien estas cosas.

    ResponderEliminar
  5. Hola, perdona que te pregunte.Cuando descargo los botones se me han copiado en Drive. Y lo que no entiendo es lo de color café, a mi en la URL, no me sale nada de facebook, twitter, etc.... Me sale algo asi como esto:

    https://drive.google.com/drive/#folders/0ByPYMnMoS-yiZHBmbldUMjhFNTg

    Es normal? lo voy a pegar a ver que tal.

    ResponderEliminar
    Respuestas
    1. Marisol lo que esta en cafe es la URL que debes sustituir por las nuevas que quieres agregar, el archivo que descargaste solo contiene la imagen en formato png, pero no las URLs, puedes subirlas a Tinypic y ahi obtenerlas. Si se te complica mándame un email.

      Eliminar
  6. Lo ponemos en práctica prontísimo. Muchas gracias por compartir.

    Besos

    ResponderEliminar
  7. Muy útil !! Estoy conociéndote un poquito más. Te felicito por la nueva imagen de la página y tu proyecto. Saludos amiga.

    ResponderEliminar
  8. ¡Hola! Muchas gracias por compartir este tutorial, me ha sido de gran utilidad ya que hacía tiempo buscaba personalizar mis botones de compartir.

    Tengo una consulta, ¿se puede quitar la cajita de fondo de los botones? Por si no entiendes a qué me refiero, te dejo una captura de cómo me quedó: http://i.imgur.com/5TuPxX4.png

    ¿Me podrás ayudar? Desde ya, muchas gracias :D

    ResponderEliminar
  9. Hola me alegra poderte ayudar, claro que si, desde la sección platilla>personalizar>opciones avanzadas>pies de pagina de entrada, selecciona color de fondo transparente, guarda y listo.

    ResponderEliminar
  10. Muchísimas gracias por responder a mi consulta. Era sencillo, pero la verdad que no lo sabía. Te lo agradezco mucho y te deseo muchos éxitos siempre.


    Saludos <3

    ResponderEliminar