Como Personalizar botones de compartir en blogger
jueves, marzo 24, 2016
Que feliz que me hace regresar al blog. Como algunos de ustedes saben, me fui de vacaciones, y regreso supercontenta, Mexico tiene lugares hermosos, llenos de historia y cultura, pero bueno esa es otra historia.
Hoy vengo con un tutorial, que ya buena falta hacia por aquí en el blog. Este va a petición de mi amiga Marysol, que me ha pedido un tutorial para cambiar esos botones sociales para compartir entradas.
Vamos a cambiar los botones tan aburridos que blogger nos pone, y tampoco queremos los clásicos de share this, cierto +Marysol ? Así que con este tutorial tú podrás poner los botones que más te gusten o los que vayan de acuerdo con tu estilo, las posibilidades son muchas.
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'>
<aclass='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 amarillo 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 rojo corresponde a la medida que quieres dar a las imágenes, puedes mofidicarla.
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 -->
Para cambiar las URL de las imágenes que vayas a utilizar, te recomiendo utilizar esta página web postimage.org de alojamiento gratuito, es muy sencilla y carga mucho más rápido que otras que he utilizado como tinypic.
Y ya, con estos sencillos pasos tendrás tu blog un paso más personalizado. Y pues es todo, espero te sea de ayuda y me haces un grandísimo favor si compartes, no cuesta nada.
Si necesitas algún tutorial mándame un correo electrónico y veo si puedo crearlo. Va !
XO
Taína.
0