Iconos sociales al final de un post

¡Hola blogger!
Hoy te traigo un tutorial para blogger, que no es el más fácil del mundo, pero si uno que hará que tengamos más visitas en nuestro blog, porque si le facilitas a los seguidores que comparten el contenido llegarás a más gente.

En el tutorial de hoy aprenderás a poner los iconos sociales al final del post, os dejo unos códigos básicos, pero que cada una puede personalizar a su manera.

iconos sociales al final de un post
Como podéis apreciar en la imagen la primera forma es la que se suele tener por defecto. La segunda es la que vais a tener si copiáis el código sin ninguna modificación, es decir tal y como os lo pongo yo. Y el tercero será como vosotros queráis, en este caso es el que he puesto yo.

Para poner los iconos sociales al final de un post para compartir, vamos a blogger, plantilla y html.


Le damos a buscar con Cntrl + F y buscamos: <div class='post-footer'>

Nos saldrán 2, el que nosotros buscamos es el segundo. Justo despues de lo que hemos buscado vamos a pegar:


<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_share'><img alt='Share this Pos' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMsokg42n1hk_SyM9sB1VVGrG2tjvZ9Xy-OiP-YMvxPJyOmgpY8XooUp1DvnrABzgmwcZYLH5MwZZgajVRHAM80slC-aCgVE2xnlCalXyFh7Lk_X7BCxWvX0rVbhtlZNgXKtNB1vyaIvz/s1600/COMPARTE.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='50' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFAGrfrYa9ICcrmm9F7N7dY0k3980Tmc2xubf3jWdQaaBsrKQ0rASqwtmbISENDrkVTc6u_NfsgmBSsiVs0Ei89D_0s_CSW5e4DDgSYpUWoZH7aP7zPGkH3vQ2GK2YgYs_8bYXXo-6gY73/s1600/icono-facebook.png' width='50'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='50' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhej1ibst3lP1fS8_keKAU7dU7tf0X4NN04kubGw7NK7zDjHMDH7FvlogkZv_y4aEfBkYtsUuMJ8mVU8VF7S87i6slFhKmHIzZEtWPnyg_aCQwjQ0Mq7QXTlzwAsWjC2io5MCtyDSGGGMqO/s1600/icono-twitter.png' width='50'/></a>
<a class='addthis_button_email'><img alt='Email This' border='0' height='50' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7_ZWN9eRdDRQ5INJtFcf7zMuZhiDvXywMAq6Wb5UanwcFmtLnL3M6ZtUrZ14T0P0x61ztwypyjvMjVLsjA8TYHaV776g6VAEgSdvEn22CP4HNMOCYLAaox68gT-yfknNrZPrLMnhRFhJ/s1600/icono-correo.png' width='50'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='50' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQYDAYGGTF6k9f4xNcVxF1AB2LMMUeIRAbJ0ggUSKb6vJ9A5AkuRUDmKbF9h5XDW0lvzA1IgWt9lJKe5sT7z26EMr3ppk-i3isMGLg8J4CrCMd8ls8n7OGLu_E2O5601Xuod9KFdZXQvs/s1600/icono-pinterest.png' width='50'/></a>
<a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='50' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEhdpt-vLjDhydh52CJNOB89wf2CEfsS8gtGv4O-NuFSPDnrd_XqkXtvq7qCOTmYMJ3iWNh0RIYVqbGPlNQFdOEWQgT4mWux8HrQUAvoHuRDuRJfzISDMMX3rphaSVwfVxNTGHGW-ZYPsi/s1600/icono-google%252B.png' width='50'/></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 -->


Lo que esta en rojo es la imagen del icono, si no os gusta podeis sustituirlo por cualquiera que te guste. En https://www.iconfinder.com/iconsets/significon-social podéis encontrar muchos iconos gratuitos.

Para poner uno nuevo podéis crear una entrada nueva de pruebas y hay subís los iconos que os gustan. Después copiáis la url de cada imagen y las sustituis por esta.

Si los iconos os quedan grandes o pequeños solo tenéis que sustituir el numero 50 donde pone height.

Una vez que hayamos terminado con este código nos toca otro.

Ahora vamos a buscar ]]></b:skin>   , antes de este códido pegamos lo siguiente:

/* Post Footer
----------------------------------------------- */
.post-footer {
border-top: 1px solid #000000;
margin: 20px -2px 0;
padding: 20px 10px;
color: #666666;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
line-height: 1.6;
font-size: 95%;
text-align: center;
}


Guardamos todo y listo.

¿Que te parece este tutorial para conseguir más visitas?

Suscribete

melyssa

16 comentarios:

  1. Gracias por los codigos, un saludo y te sigo por #BeeTag

    ResponderEliminar
  2. La verdad es que los que vienen por defecto resultan muy aburridos y quiero algo más vistoso, así que gracias a tu tutorial, sabiendo qué parte tengo que modificar del HTML me diseñaré unos que me gusten y cambiaré los actuales. ¡Muchas gracias!

    ResponderEliminar
  3. Nosotras estamos en proceso de cambio así que este tutorial nos viene genial!

    Un besito

    ResponderEliminar
  4. Te sigo por el tag de Facebook #Beetag te espero en el mío. Un beso

    ResponderEliminar
  5. Muchas gracias. Como siempre muy util.

    Www.tutukiexpress.blogspot.com

    ResponderEliminar
  6. Hola ya te seguía de antes, pero me gustó mucho este post, estuve mirando el link para ver otras figuras para los links y dice "página perdida en el espacio" :(

    Bee saludos!

    ResponderEliminar
  7. Un post muy bueno para los que tienen Blogger. Un beso.

    ResponderEliminar
  8. Gracias a todas por vuestros comentarios.

    ResponderEliminar
  9. Me lo apunto para el proximo cambio que realice en mi blog :)

    ResponderEliminar
  10. Muchas gracias! Funciona de maravilla. Así quedó el mío:
    http://sweetbeautyreviews.blogspot.mx/ :)

    ResponderEliminar
  11. ¡Genial! He creado mis propios iconos y el tuto funciona a la perfección Melyssa. Lo único que yo he insertado dos iconos distintos: uno para Instagram y otro para Bloglovin y no parecen funcionar por ahora, ¿sabrías cómo solventarlo? Un abrazo y feliz semana.

    ResponderEliminar
    Respuestas
    1. Lo intentamos, ¿Has guardado la imagen en formato pgn? ¿La has subido al blog a alguna entrada de pruebas para coger la url? Pegame aquí el enlace o mandamelo por privi y lo vemos, besos

      Eliminar