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 para gustos, están los colores,  te voy a enseñar cómo hacerlo de 2 maneras:


  • Con imágenes (te he diseñado unos botones cuquis, para que los uses si te molan). 
  • Con iconos (y te explicaré cómo personalizarlos con CSS). 

Comenzamos con los botones de imágenes. Bajo el vídeo 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? No te pierdas el Curso de Photoshop para blogueras creativas.





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





ICONOS SOCIALES CON CSS BAJO EL POST



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? Pues vamos al vídeo. Debajo tienes los códigos que necesitas para seguir el tutorial:





Este es el código, para instalar la cartera de iconos, por si no lo habias hecho aún:

<link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’ type=’text/css’/>


Ahora tendrás que buscar en la plantilla este código, <div class=’post-footer’> para incluir el que te muestro a continuación, justo bajo el segundo <div class=’post-footer’> que te encuentres:


<!-- Iconos sociales bajo el post -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<p>Corre la voz</p>
<a class='addthis_button_facebook'><i class="fa fa-facebook"></i></a>
<a class='addthis_button_google_plusone_share'><i class="fa fa-google-plus"></i></a>
<a class='addthis_button_pinterest_share'><i class="fa fa-pinterest"></i></a>
<a class='addthis_button_twitter'><i class="fa fa-twitter"></i></a>
<a class='addthis_button_whatsapp'><i class="fa fa-whatsapp"></i></a>
<a class='addthis_button_email'><i class="fa fa-envelope"></i></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 -->




Una vez que lo hayas pegado, toca personalizarlos con CSS.




EFECTO ROTACIÓN:

Si quieres que tengan efecto rotación al pasar el ratón, añade este código en el apartado CSS de la plantilla. Mira el vídeo, si tienes dudas:

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

.addthis_toolbox .custom_images{
margin-top: 25px ;
}

.addthis_toolbox i{
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow: hidden;
}

.addthis_toolbox i:hover{
padding: 10px;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
}





ICONOS CON DIFERENTES COLORES

Para que cada uno tenga un color diferente:

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

.addthis_toolbox .fa-facebook {
color: #ffbdaf;
}

.addthis_toolbox .fa-facebook:hover{
color: #b7cdc0;
}

.addthis_toolbox .fa-pinterest {
color: #b7cdc0;
}

.addthis_toolbox .fa-pinterest:hover{
color: #ffbdaf;
}

.addthis_toolbox .fa-whatsapp {
color: #ffbdaf;
}

.addthis_toolbox .fa-whatsapp:hover{
color: #b7cdc0;
}

.addthis_toolbox .fa-envelope {
color: #b7cdc0;
}

.addthis_toolbox .fa-envelope:hover{
color: #ffbdaf;
}

.addthis_toolbox .fa-twitter {
color: #ffbdaf;
}

.addthis_toolbox .fa-twitter:hover{
color: #b7cdc0;
}

.addthis_toolbox .fa-google-plus {
color: #b7cdc0;
}

.addthis_toolbox .fa-google-plus:hover{
color: #ffbdaf;
}





ICONOS ENMARCADOS

Para añadirles bordes alrededor:

.addthis_toolbox {
font-size: 14px;
text-transform: uppercase; 
text-align: center;
letter-spacing: 1px; 
word-spacing:25px;
}
.addthis_toolbox i{
color: #ffbdaf;
border: 2px solid #b7cdc0;
padding:10px;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
}

.addthis_toolbox i:hover{
color: #ffbdaf;
border: 2px solid #b7cdc0;
padding:10px;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}





ICONOS CON TEXTURAS

Para colorear el fondo con texturas:

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

.addthis_toolbox i{
color: #ffffff;
background: url(http://i65.tinypic.com/2w6gksh.jpg) repeat;
padding: 15px;
}

.addthis_toolbox i:hover{
color: #666666;
background: url(http://i63.tinypic.com/2nkt6v5.jpg) repeat;
}



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:

Comentarios

  1. ¡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
  2. 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
  3. 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
  4. 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
  5. Respuestas
    1. Gracias a ti Esther, me alegro de que te sirvan. Un abrazo!

      Eliminar
  6. muchas gracias por el post!

    ResponderEliminar
  7. Hola Raquel, ¡muchísimas gracias por compartir! al final he conseguido poner los botoncitos en mi blog :)
    Voy a seguir investigando por tu blog a ver si aparece cómo ponerlos también en la versión móvil.
    Un saludo

    ResponderEliminar
  8. WOW,gracias! Soy muy nuevo en todo esto y un poquito mayorcito, pero me entretiene, jajajaja... Hace tiempo que buscaba algo así, quería darle color a mi revista-blog, me hice unos iconos en base a tus tutos, gracias Raquel, buenísimos los post y los videos impecables. Saludotes desde Montevideo, Uruguay.

    ResponderEliminar
  9. Yo los pongo y en vez de compartir la entrada me comparte el blog, ¿sabrías decirme por qué? Gracias.

    ResponderEliminar

Publicar un comentario