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.
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?
----------------------------------------------- */
.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;
}
¿Que te parece este tutorial para conseguir más visitas?
Gracias por los codigos, un saludo y te sigo por #BeeTag
ResponderEliminarLa 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!
ResponderEliminarNosotras estamos en proceso de cambio asà que este tutorial nos viene genial!
ResponderEliminarUn besito
Te sigo por el tag de Facebook #Beetag te espero en el mÃo. Un beso
ResponderEliminarHola! Te sigo por el #BEETag :)
ResponderEliminarTe sigo por el #BeeTag!
ResponderEliminarBesos
Muchas gracias. Como siempre muy util.
ResponderEliminarWww.tutukiexpress.blogspot.com
Hola! Te sigo por el #BEETag :)
ResponderEliminarTe sigo por el #BeeTag ♥
ResponderEliminarHola 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" :(
ResponderEliminarBee saludos!
Un post muy bueno para los que tienen Blogger. Un beso.
ResponderEliminarGracias a todas por vuestros comentarios.
ResponderEliminarMe lo apunto para el proximo cambio que realice en mi blog :)
ResponderEliminarMuchas gracias! Funciona de maravilla. Asà quedó el mÃo:
ResponderEliminarhttp://sweetbeautyreviews.blogspot.mx/ :)
¡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.
ResponderEliminarLo 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