Newsletter

PERSONALIZA LOS BOTONES DE COMPARTIR AL FINAL DE CADA POST

30 de mayo de 2016

Hola Lectores, el tutorial de hoy es quizá uno de los más importantes que les traigo ya que se trata de los botones que permiten que nuestros lectores compartan nuestro contenido. Siempre les digo la importancia de tener un blog bonito y agradable a la vista, y es por eso que en el momento de diseñar el blog se debe tomar todo en cuenta y hoy el punto focal esta en estos botones nada bonitos "en mi opinión" que nos ofrece blogger.

Si quieren aprender a cambiar los botones que están al final de sus posts por alguno de los que les traigo entonces sigan leyendo.

1) Para empezar deben ocultar los botones que trae blogger por defecto y para ello te diriges a:

Diseño ➡ Entradas del blog ➡ Editar y una vez allí desmarca la casilla que está al lado de los botones, así:




2) Ahora para instalar los botones nuevos tienes que ir a Plantilla ➡ Editar HTML. Haces clic en cualquier lugar del código y presiona CTRL+F. Una vez se despliegue el buscador copia dentro de él el siguiente código:


<div class='post-footer'>

Esta es la parte de código que se encarga de editar el pie de los posts.

Importante: hay dos líneas de código con ese nombre, debes buscar la segunda línea, ¡sino no se te verán los iconos!


Una vez encuentres la segunda línea de <div class='post-footer'> debes buscar post-footer-line-1, y justo después pega el siguiente código:

Código:


<center> <!-- Si quieres que los botones estén centrados, sino quita esta línea -->
<div class='addthis_toolbox'>
<div class='custom_images'>

     <a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://2.bp.blogspot.com/-dXGNeedMJA8/VztUK5V0X9I/AAAAAAAADs0/FViRb47f6eYDYR8zHMumCHNJClIe94BEQCLcB/s1600/01.png' width='30'/></a>

   <a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://1.bp.blogspot.com/-hzpxqPP8crg/VztULnP_MEI/AAAAAAAADs4/nfwIFJWkNWc8DKqgl9WHoK8ak-kjkdcowCLcB/s1600/02.png' width='30'/></a>

   <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://4.bp.blogspot.com/-b8Kkdo8tB_0/VztUM4axMnI/AAAAAAAADs8/hqY3M4a_O2UHOkV0cBblziMeZEYBvU7AwCLcB/s1600/03.png' width='30'/></a>

   <a class='addthis_button_google_plusone_share at300b'><img alt='Share This' border='0' height='30src='https://3.bp.blogspot.com/-tv5h-h8jqtc/VztUORjdU1I/AAAAAAAADtA/PB8RIPScSjwI31UKfT98JdV9IRXq55ePQCLcB/s1600/04.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'/>
   </center> <!-- Si quieres que los botones estén centrados, sino quita esta línea -->

<!-- FINAL botones para compartir en redes sociales -->

Si seguiste correctamente los pasos tendrás algo así




Cambios:

 Lo que está en Azul: es para centrar los botones, lo puedes cambiar por left si lo quieres a la izquierda o right si lo quieres a la derecha.

 Lo que está en Verde: Son las direcciones de las imágenes de los botones. Si no sabes como obtener la URL de una imagen, en esta entrada te enseño cómo.

 Lo que está en Rojo: es el tamaño de las imágenes.

Al colocar el código tal cual te lo muestro te quedará con los siguientes botones:

¿Y si quiero unos Iconos diferentes?

Acá les dejo unos cuantos iconos sociales para que descargues y utilices los que más te gusten:




DESCARGAR



DESCARGAR


¿Te gustó el tutorial? ¿Te parece útil? Si es así no dudes en compartirlo.

ANTES DE QUE TE VAYAS: Mira en mi menú la opción Calendario, allí está el calendario del mes de junio con todas las entradas que publicaré. No dudes en visitarlo. Ahora sí, hasta pronto :)

12 comentarios:

  1. ¡Hoola! Cuando busco eso en lo de editar HTML me sale que no hay resultados D: Es una pena porque me encantaría cambiarlo. Me gustaría mucho que explicaras algún día como poner en la parte derecha esos botones de redes sociales

    Un besote

    ResponderEliminar
    Respuestas
    1. ¿Qué es lo que no encuentras? el código que tienes que buscar?
      Asegúrate de que no hay espacio antes o después del código.

      Eliminar
  2. Eres asdfghjkl maravillosa! No sabía que eso se podía hacer pero has puesto unos botones tan bonitos y lo has explicado tan bien que seguro que pruebo a hacerlo en cuanto saque un ratito. Me encantó la entrada, te quedó genial y te expresaste de una manera sencilla. Mil gracias por el tuto

    Miles de besos bonita ♥

    ResponderEliminar
  3. Hola! Muchas gracias por el tuto, me vino genial! Tengo una pregunta, ¿cómo hago para poner "compartir este post" sobre los botones de compartir?

    ResponderEliminar
  4. CHAMAAAA que bello tu Blog! Me encanto!

    ResponderEliminar
  5. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  6. LA PRIMERA VEZ QUE LO INSTALE ME SALIO SIN CAMBIARLE LOS LINKS DE LOS ICONOS PORQUE QUERÍA PROBAR, PERO LUEGO LOS QUITE PORQUE QUERÍA CAMBIARLE DICHOS LINKS, Y COMO ME SALIO ME ALEGRE PUES ES ALGO QUE DESDE HACE TIEMPO HE QUERIDO PERZONALIZAR. PERO RESULTA QUE CUANDO LE CAMBIO LOS LINKS DE LOS ICONOS YA NO ME SALE Y VUELVO HACERLO COMO TU LO EXPLICAS EN EL POST SIN CAMBIARLE NADA Y TAMPOCO SE VEN. NO SE QUE PASO, ME HABIA ALEGRADO MUCHO. TE DEJO MI BLOG SI GUSTAS VERLO http://armandocolina.blogspot.com/ TE MANDO UN FUERTE ABRAZO TAMBIEN SOY DE VENEZUELA.

    ResponderEliminar
    Respuestas
    1. Hola Armando. Asegúrate de estar colocando el código en la segunda línea de <div class='post-footer' puede ser este el motivo de que no se vean los iconos. Si tu problema persiste escríbeme a mi correo (está en la barra lateral) y trataré de ayudarte. Saludos ^^

      Eliminar
    2. Si ya te envie un correo explicandote...

      Eliminar
  7. HOLA GRACIAS POR EL TIP.. me sirvio de gran ayuda. pero los botones los quiero poner a la izquierda y al moemnto de cambiar CENTER POR RIGHT no puedo me ayudarias...

    ResponderEliminar
  8. Hola buenas lo estoy haciendo como mandas y no me sale nada

    ResponderEliminar
  9. Hola Ros, muchas gracias por tu ayuda!! ... te dejo mi blog para que veas lo bonito que ha quedado gracias a tu tutuorial !!! http://laislaatomica.blogspot.com.br/

    ResponderEliminar