Como personalizar botones de Compartir de Blogger.
lunes, marzo 02, 2015
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.
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjKh4TKsgp4Ql0wgaNZfdMEZpsuHFXepgYJ4EB2IabJI76hhjekaovsy5wkRuTnmQ1MQfjG9CfVnxWl4Bpf_DAfUck8WkskT2W50kStW8RewpppAFwBqMFn4LhoanLPggFWXo5vtzQJLS/s1600/Share+this+Post.png'/></a>
<a
class='addthis_button_facebook'><img alt='Share to Facebook' border='0'
height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wYxQuJGE-m53eA9T_gAIXUACKhQVWDv-muvZAMftcZE1WSKy6WBFtKfdQhGDHm8tD1yDHKtzBysurnN1bIVYInr8m4byAz4zzFSglpYTh7PgSbOK8hKmaTL9w3Sw1JrPqf33_lqqVZM1/s1600/Facebook+Button+Share.png'
width='30'/></a>
<a class='addthis_button_twitter'><img
alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsaGOFcHqAHWebyU2GZbXIr6gd84T4OjKj0_XX1qOBSSa94xSmLZFnxQRp4L4AL63Edm0UYtRc28H3sBzxbmGC31RBiAF0esGjTmwbegFHT8qQNu5xZSaJ3dlSFG5ZJUCGqlTxbrBwSrh_/s1600/Twitter+Button+Share.png'
width='30'/></a>
<a class='addthis_button_email'><img
alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_WUp9i_5i35qFA-g6fX4nDtKT4JfigHAMj2P8VoP878jOdEagoUQOQycxfp1QPrYJzwmW5ZQMBXudXXMC4p4nEg_NrbIW9mfJgsHmHAFT5NTNikGamtE7gMqrLy2BLEmVfYoITv-3O3fh/s1600/Email+Button+Share.png'
width='30'/></a>
<a
class='addthis_button_pinterest_share'><img alt='Pin This' border='0'
height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGolpB9okLLZo4Yxxxl6Xd6hBHsIDcLh0PQkvijyZ3of5DHtrhIBQyoSHV0UTiXRrQvDLAlXmOUhYFkCHozdFnPedQcHOBqAYjdr4kfPLDI162XV_EWVj-Kmf5zPgV5ptVHZnVvCZs8TS/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikiEX-Dsdvp7kPM7-CTkWKE5h_02sa9mcerfyJXo8te5_jMAfwAsFk48Wu95I4bwObhQFw-m-ztXhfWKmJprg0fl9Cz6TsvC7-T0TowxLbXRTULboi4G0YIzoS2GEIZZo1e9330VNnY2hc/s1600/Google+Plus+Share.png'
width='30'/></a>
<a class='addthis_button_tumblr'><img
alt='Share on Tumblr' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5N78STMLUVhkkqWOeKEuHHM9rECZtD5qr5sYLr4BgWbqtWD7CkZFZEZ7Mns4Wq8OHf_kCPB2bN3btV_DXOC5sNfCrX4GSSOiQRRtF8BaZ1rnlg7XDuQHp7BIWBztHdNPf5kz7IzvE0Mc/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjKh4TKsgp4Ql0wgaNZfdMEZpsuHFXepgYJ4EB2IabJI76hhjekaovsy5wkRuTnmQ1MQfjG9CfVnxWl4Bpf_DAfUck8WkskT2W50kStW8RewpppAFwBqMFn4LhoanLPggFWXo5vtzQJLS/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 -->
20
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.
ResponderEliminarVa que no es nada complicado y seguro te resulta bien, Un Abrazo nena !
EliminarFelicidades por este nuevo blog :) esta muy chulo!
ResponderEliminarMuchas gracias Wendy por suscribirte, aun le quedan algunos arreglos pero creo hay va jejeje.
EliminarLlevaba 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!
ResponderEliminarUn besazo!
Espero te sirva Laura !
EliminarHola Taina a por ello voyyy, y una pregunta tal cual está el tutorial saldrían debajo de la entrada ¿no?
ResponderEliminarLuego te cuento, porque no me suelen salir bien estas cosas.
Si quedarían debajo de la entrada.
EliminarHola, 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:
ResponderEliminarhttps://drive.google.com/drive/#folders/0ByPYMnMoS-yiZHBmbldUMjhFNTg
Es normal? lo voy a pegar a ver que tal.
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.
EliminarLo ponemos en práctica prontísimo. Muchas gracias por compartir.
ResponderEliminarBesos
Gracias a ti por pasarte por aqui.
EliminarGracias!! intentaremos hacerlo, muy chulo el blog
ResponderEliminarBesos Mis cosillas de cocina
Va gracias nena, seguro te queda perfecto.
EliminarMuy útil !! Estoy conociéndote un poquito más. Te felicito por la nueva imagen de la página y tu proyecto. Saludos amiga.
ResponderEliminarMuchísimas gracias Andy, un abrazo !
ResponderEliminar¡Hola! Muchas gracias por compartir este tutorial, me ha sido de gran utilidad ya que hacía tiempo buscaba personalizar mis botones de compartir.
ResponderEliminarTengo 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
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.
ResponderEliminarMuchí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.
ResponderEliminarSaludos <3
Es un placer, que tengas feliz día.
ResponderEliminar