24 abril 2016

Cómo poner imágenes o iconos en los botones de compartir bajo el post

como-poner-iconos-redes-sociales-para-compartir-el-post


Blogger trae por defecto los botones para compartir tus entradas al final del post, pero la verdad es que no sólo son feotes, sino que además, pasan desapercibidos por su color sosete y su tamaño mini.


Así que hoy vamos a ponerle solución, para tener unos botones personalizados que combinen con nuestro blog y atraigan la atención de los lectores. Te he preparado un tutorial completito que además incluye freebies, así que estoy segura de que te va a encantar. Empezamos!






Todos los bloggers deseamos que nuestras entradas se compartan, cuanto más mejor. Pero si no incluimos botones sociales para facilitar el que puedan compartirlas, es como si quisiéramos que nos tocara la lotería sin comprar el décimo.


La función de activar los botones, está disponible en cualquier plataforma de blogs, así que esto no supone mayor problema. El tema está en que los que trae Blogger de serie, son un pelín incómodos de mirar y causan el mismo efecto que un ventilador desconectado, vamos, que ni despeinan.

Por eso hoy toca, ponerlos bien monos para que vayan a juego con los tonos del blog y de paso, llamen la atención de las visitas para que se decidan a compartir el contenido. Este código, se puede usar con imágenes o con iconos. Y tiene otro plus importante con el que no cuentan los de Blogger, la opción de compartir en Whatsapp, que a mí me parece muy interesante, ya que se usa incluso más que las redes sociales.


 Como es domingo y hoy toca post exclusivo en el blog privado, te voy a enseñar cómo hacerlo con imágenes y además te he diseñado unos botones cuquis, para que los uses si te molan. La segunda opción, en la que usaremos iconos y css, la podrás ver si te unes a la Comunidad Demo 2.0 y te aconsejo que no te lo pierdas, porque tiene muchísimas ventajas. Te las cuento bajo el vídeo, donde también encontrarás los códigos para hacer este tutorial y los botones que he diseñado para que te los descargues como quieras. Dale al play:









Si quieres ver también el tutorial para acortar las entradas de tus posts en la página principal, ahí tienes el enlace.


BOTONES SOCIALES CON IMÁGENES BAJO EL POST




Dirígete a la Plantilla/Editar HTML (recuerda hacer copia de seguridad). Una vez dentro clica en cualquier sitio dentro de la plantilla y pulsa Ctrl+F. Cuando te salga la cajita de busqueda, pega este código  <div class='post-footer'> y dale a intro dos veces, porque nos interesa el segundo que aparece.

Bajo el segundo <div class='post-footer'> es dónde tienes que pegar este código:



<!-- Iconos sociales bajo el post -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<p>Corre la voz</p>
<a class='addthis_button_facebook'><img src='DIRECCION IMAGEN'/></a>
<a class='addthis_button_google_plusone_share'><img src='DIRECCION IMAGEN'/></a>
<a class='addthis_button_pinterest_share'><img src='DIRECCION IMAGEN'/></a>
<a class='addthis_button_twitter'><img src='DIRECCION IMAGEN'/></a>
<a class='addthis_button_whatsapp'><img src='DIRECCION IMAGEN'/></a>
<a class='addthis_button_email'><img src='DIRECCION IMAGEN'/></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'/>
<!-- Fin iconos sociales -->


Ahora vamos a darle un poquito de CSS, para que queden más equilibrados. Copia este código y pégalo en la parte CSS de tu plantilla. Mira el vídeo, para hacerlo bien:



.addthis_toolbox {
font-size: 14px;
text-transform: uppercase; 
text-align: center;
letter-spacing: 1px; 
word-spacing:25px;
}
.addthis_toolbox p{
word-spacing:25px;
}
.addthis_toolbox img:hover{
opacity: 0.8;
}




Todo lo que está en azul, es lo que puedes personalizar. Tanto la llamada que anime a los lectores a compartir como las imágenes que quieres que aparezcan como botones.

Si necesitas ajustar la medida de tus botones, añade width= '70' tras el enlace de dirección de la imagen y cambia el valor como necesites.



Y aquí tienes los botones que he diseñado, si te gustan, sírvete haciendo clic en las imágenes, que son cortesía de la casa!  

botones-redes-sociales-png-freebies

botones-redes-sociales-png-freebies

botones-redes-sociales-png-freebies




¿Te gustaría aprender a diseñar tus propios botones y tener tu blog personalizado completamente a tu gusto? Mañana te mostraré cómo conseguirlo fácilmente.





No te pierdas este tutorial para personalizar los botones de compartir el post en redes sociales. Incluye freebies, te va a encantar!Tuitéalo







Usar imágenes como botones puede quedar muy bonito y te da un gran abanico de posibilidades a la hora de personalizar tu blog. Pero ralentizan la carga de tus paginas y su calidad de imagen, no siempre es buena. En una de mis entradas anteriores, te lo explicaba con detalle al tiempo que te mostraba cómo instalar iconos, para usar en esta y otras funciones del blog.

Además el uso de iconos también te da una gran capacidad de personalizar tus botones. Si pasas el ratón por mis botones de compartir al final del post, podrás comprobar que se le puede sacar muchísimo partido y además, son mucho más ligeros. ¿Quieres saber cómo personalizar tus botones con css? únete al blog privado y accede a este y otros contenidos exclusivos. Aquí te dejo una muestra de lo que puedes conseguir:





Bueno, pues llegó la hora de despedirse ¿qué botones tienes al final del post? ¿los has personalizado ya? ¿cual es el modelo que más te ha gustado de los que he diseñado? ¿prefieres imágenes o css para tus botones? cuenta, cuenta!!




Que tengas un gran día!


¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:





16 comentarios:

  1. Muchas gracias por el tuto paisana. Ya lo hice.
    Ahora toca crear nuevos botones, que a mi eso de crear me encanta.
    Un beso ^^

    PD. No sé cómo seguir el blog, no sé si ya te lo preguté alguna vez...

    ResponderEliminar
    Respuestas
    1. De Sevilla? oleee!! y encima te encanta crear...pues a mi me encanta que te encante, porque la creatividad es una de las mejores cualidades de una persona (a mi modo de ver) así que cuando los hagas, pégame el toque, que me encantará verlos!

      En el sidebar, tienes la Guía gratuita para usar imágenes en la red, que lleva directamente a la página de suscripción y normalmente, al final de los posts, tienes otra imagen con enlace, pero por si acaso, te dejo el link directo: http://www.demorrosconel20.com/p/comunidad-demo-20.html
      También me puedes seguir por Bloglovin, si no te quieres suscribir, aunque te perderás muchas ventajas del blog privado, así que te aconsejo la primera opción.

      Un besote!

      Eliminar
  2. ¡Genial el tutorial! Y me vino justo, porque estaba buscando como loca formas de personalizar esa zona... También quería saber si ya tienes un tutorial para cambiar la cajita gris donde aparecen los botones, etiquetas y comentarios, debajo de cada entrada, por algo más lindo como lo que tú tienes >.<

    ResponderEliminar
    Respuestas
    1. Será uno de mis próximos tutoriales Daiana, así que no te preocupes, que en breve lo tienes. Me alegro muchísimo que te haya venido tan bien, besotes!

      Eliminar
  3. Un gran tutorial que ya he puesto en práctica y me encanta como va quedando!!!
    Con tu permiso seleccione unos iconos a los que he cambiado un poco el tono para mi blog.
    Muchas gracias por compartir y explicar tan requetebién este tema.
    Un saludo

    ResponderEliminar
    Respuestas
    1. Cómo me gusta ver que seguís mis tutoriales sin ningún problema. Me alegro mucho Ani de que te haya resultado sencillo y sobre todo, de que lo hayas sabido adaptar a tus tonos. Felicidades a tí, me encantan tus amigurumis, son preciosos. Un beso!

      Eliminar
  4. Por cierto!!! ahora sería muy interesante saber como ponerlo en la vista móvil...lo dejo caer por si acaso ;-))

    ResponderEliminar
  5. NO logro achicar los iconos
    en que parte agrego width= '70, por favor necesito me ayudes, lo he puesto en varios sitios y sale error, gracias

    ResponderEliminar
    Respuestas
    1. Hola Angelis, para cambiar la medida tendrías que añadir width='70' al final del la direccion de la imagen. De esta manera: img src='DIRECCION IMAGEN' width='70'/ (falta el inicio y fin del codigo <> porque Blogger no me dejaba incluirlo, pero acuerdate de añadirlo) Si no te funciona, lo mejor es que directamente redimensiones la imagen a esa medida antes de subirla y te quitas de problemas. Prueba primero con 90 o 80, por si al final lo ves demasiado pequeño y ve redimensionando según necesites. Es mucho mejor, subir el icono a la medida correcta que estar redimensionando con html, porque las imágenes tardaran mas en cargar si no redimensionas primero. Así que, no te compliques y dale la medida correcta antes de subirlo. Un saludo!

      Eliminar
  6. Muchísimas gracias por este post, te explicas genial y desde luego tus entradas ayudan muchísimo a dejar el blog con un toque más personal.
    Tengo un PROBLEMA: En relación a los enlaces y códigos todo correcto y funcional, pero lo que me paso es que se quedó los botones de compartir por debajo de los enlaces de otras entradas ( me refiero como ejemplo el que tienes puesto ESPERA AÚN HAY MÁS y los cuadraditos de las entradas ) No sé si es porque ya lo tenia puesto antes de poner los botones de compartir o que hice mal pero me gustaría tener los botones de compartir antes de esos enlaces tal como lo tienes tú. ¿Que debo hacer para cambiar eso? Un beso y muchas gracias :)

    ResponderEliminar
  7. Hola Jhennifer, supongo que será que has metido el código de los botones de compartir el post, por debajo del gadget de sugerir entradas. En la plantilla, todo tiene un orden y dependiendo de dónde coloques los elementos, se verá en un sitio u otro. Te recomiendo que uses la caja de búsqueda de la plantilla y observes dónde están colocados ambos códigos. Apunta las numeraciones de líneas que tienes a la izquierda para no liarte. Aquí tienes un tutorial que hice para el gadget de entradas sugeridas, por si te sirve para orientarte dónde tienes que colocar el código: http://www.demorrosconel20.com/2016/03/sugerir-entradas-al-final-de-tus-posts.html y también te puede venir bien este post de Oloman, en el que te explica la estructura de la plantilla de Blogger y quizás te ayude a entenderlo mejor: http://www.oloblogger.com/2016/08/guia-blogger-donde-incluir-css-html-javascript.html . Ya me cuentas, me alegro que este post te haya ayudado. Un beso!

    ResponderEliminar
  8. Respuestas
    1. Gracias a ti Esther, me alegro de que te sirvan. Un abrazo!

      Eliminar
  9. Respuestas
    1. A ti Jesús! me alegro que te haya servido, un saludo.

      Eliminar

demo