Gadget compartir al final del artículo blogger modificable


A continuación les dejo el código de un Gadget para que los lectores puedan compartir los artículos en las diferentes redes sociales como facebook, twiter, pinterest, google plus, el cual pueden colocar al final del artículo en las plataformas blogger (también funciona para otras plataformas como wordpress). Lo bueno de este gadget es que se puede modificar si saben cómo crear imágenes y obtener el link de las mismas, para así reemplazarlas en el código original.



Entonces, les daré el código original con unas imágenes bastante simples (en blanco y negro), y el gadget con los botones a color de cada red social para que se haga más visto y se facilite el hecho de que los lectores puedan compartir fácilmente los artículos. Este gadget es realmente fa´cil de implementar. Es cuestión de copiar y pegar en el lugar que queramos. Pero el ejemplo de este artículo es para colocarlo al final de cada post.

Código original:

<!-- AddThis Button BEGIN --> <center><div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://i59.tinypic.com/e690lj.jpg'/></a> <a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://i62.tinypic.com/skuz4o.jpg' width='30'/></a> <a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://i61.tinypic.com/6jj60o.jpg' width='30'/></a> <a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://i59.tinypic.com/15cburc.jpg' width='30'/></a> <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://i58.tinypic.com/k04yf4.jpg' width='30'/></a> <a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='https://i57.tinypic.com/oscv2s.jpg' width='30'/></a> </div> </div></center> <script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script> <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/> <!-- AddThis Button END -->





Código modificado a color (ejemplo: imagen siguiente):



<!-- AddThis Button BEGIN --> <center><div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBudzgCW5yPNlJJH6yGlLlhtfEJ1LuBAGi9yocteeX1VaPzViTrHeAC5mey_MMn5LhqjnYzW4r9F1Z6-LR5BLF95ta-vMnnMP6U6CgusIzHaSRBF9WS-oSOsKvqzIkdBZ8ZgvblmdUgD4/s1600/compartir+edufisica.jpg'/></a> <a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHTUqBJ4s1NPem1gmVi5sFCqLb-0XJ8WzJGg9g0PixwrjzLONVVJZIbsNCz_Fk9SSWPmsUkQf6g498auG64kPcvfBNEmlQZAMSpYo_uYaqDuS_6Fh3wkYWoPrPOoKe_6hQRhcQXqpPj-o/s1600/face+2.jpg' width='30'/></a> <a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisZYZwzb7af2fD5-SuQOh8QEhWoBnz7AsAVkYXBXOyy6Gh4RG2yVLMVRKQJzcGZoDXOp_6CzeX-5zjwOXaZR84eWo7YOzRhSj0ewQZN5g0NSIIhTZ7cAhtcz2OlG-28zBLgxuphTfkzQk/s1600/twiter2.jpg' width='30'/></a> <a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEpFGdB676aysGq3ZN05nuHP_uYEVWB5VHQUL1tnvlQlGt4lQqC0ytXTXKll15HvDPmJH3bJm8K-68ueTN-_pkAC-HSLpYP4bW7Q5BJCxoeqse4iAFezqPeY_Xia-SqWElOLDMYXs-Hs/s1600/correo2.jpg' width='30'/></a> <a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CQmLnC0VhmP95_gwF0kG3Jdkp-6iXTPiBk8hZIyd0_m8Btp8cXRR7LP7ulPRNETzKw3uZU3jrudJsyjOZs-qkDb4wyAgujpyRYaWua4-EjOdtfvxVSddpP2GVMzZgyNVQFYVp2_SZFc/s1600/pinterest2.jpg' width='30'/></a> <a class='addthis_button_google_plusone_share'><img alt='Share on Google Plus' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFuX0FoH301ygPnHGvPzc1QvbQ8OIOQuOVK4FpylzSn5gBota0HyHjm6gzidKwo9PkNETMcAmNuOjI1UVJwWQ5ixA-tTMBJ79bK5BLeGxFQiwfcvxq7uVq7u2fxuRBMLVWDY0IB0B0cw/s1600/google+mas2.jpg' width='30'/></a> </div> </div></center> <script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script> <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/> <!-- AddThis Button END -->

Sea cual sea el código que escojan, deben pegarlo después de la siguiente línea de código:

<div class='post-footer'>

Entonces nos vamos a blogger, escogemos nuestro blog y nos vamos a plantilla, y allí le damos a editar html y buscamos la línea código mencionada.

NOTA: usualmente es el segunda que aparece cuando damos control+f y la buscamos. Pero si no, revierten los cambios e intentan en la siguiente.

Entonces, si quieren personalizarlo es decir cambiar el color del texto y el color o diseño de cada una de las imágenes de las redes sociales, deben crear primero por ejemplo una imagen con el color de fondo y tamaño que ustedes quieran, en un programa como photoshop.

Le dan crear nuevo y especican los tamaños en pixeles. Esta imagen de un solo color de fondo luego la pueden modificar ahí mismo o abriendo el archivo en otros programas como photoscape donde pueden agregar texto sobre esa imagen creada. Luego, cada imagen la pueden subir a una entrada en borrador de blogger para así obtener el link y reemplazarla por los links de los códigos anteriores subrayados con color azul.


¿Tienes algo que decir sobre este artículo? Compártelo con nosotros en:

siguenos en facebook sígueme en Instagram Canal de youtube siguenos en Twitter