miércoles, 18 de enero de 2017

Poner Redes sociales estilo minimalista al final de cada post en blogger 2017



Un post más en Bloggin Red, respondiendo a un seguidor del blog quién gentilmente pidió saber como colocar los iconos sociales que justamente uso en mi blog al final del post podrás verlos el demo.


 
EL TUTORIAL

1. Empecemos es elemental y fácil de hacer, lo primero será ir a Plantilla > editar HTML y buscar el siguiente código </body> justo encima de él pegaremos lo siguiente:
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/>

2. Hecho lo anterior ahora vamos a la parte más incómoda y por la cual muchas personas dicen que no funciona es cuestión de paciencia probar y saber  buscar ya que cada plantilla es diferente, debemos buscar el siguiente código en nuestra plantilla <div class='post-footer'> justo debajo de él pegarás el siguiente código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
                            <style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
</style>
                            
<div class='addthis_toolbox'>
 
<div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
<div class='custom_images'>
<span class='fade'><ul>
 
  <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
  <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://lh4.googleusercontent.com/-OBxyCfQlXV4/T4ywonzZx6I/AAAAAAAAJHI/UBRTcapYwCw/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>
  <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://lh6.googleusercontent.com/-DkPVHUpO5Mc/T4y73abYX4I/AAAAAAAAJH0/1xfolEU-Y_k/s57/Google%2520Blogger.png' width='57'/></a></li>
  <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://lh4.googleusercontent.com/-CxGRg2HeAXc/T4y73bmCVAI/AAAAAAAAJHw/gaA6Y7GwQZU/s57/Mail%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://lh6.googleusercontent.com/-z9ucAlSwZ1o/T4y-uaIEpNI/AAAAAAAAJIc/YL6sPfqvFkk/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
 
</ul></span>
 
</div>
    
</div>
 </b:if>
  
Si en el peor de los casos no te da busca la siguiente línea y pega el mismo anterior código justo debajo <div class='post-footer-line post-footer-line-3'> recuerda paciencia ya que si ves que sirve en mi blog servirá en el tuyo.


3. Hecho lo anterior sólo queda guardar y verificar que todo esté bien.


EXPLICACIÓN COLORES CÓDIGO

- Lo que tenemos en Naranja es el título pequeño que llevará el gadget alusivo a que nuestros lectores compartan el contenido ¡Fácil!.

- Lo que tenemos en Azul son todos los links de cada uno de los iconos sociales recuerda que los puedes reemplazar sin problema alguno.


Es todo en este pequeño post muy fácil, recuerda comentar para dudas ocasionales.

Hasta la próxima BloggeRs,

2 comentarios:

  1. Hola Andrés,
    Gracias por la pronta publicación del post.
    De los iconos que has puesto, necesito incorporar el de Instagram y el de Pinterest. No consigo encontrar los iconos en las src que has puesto ni por internet. Indicame por favor donde estan, y el código que he de introducir para que sean efectivas.
    Ademas, de las que has puesto, quiero quitar un par, que supongo eliminando el código que corresponde a dicho icono social, ya no sale y seria suficiente.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Xavi, puedes usar photoshop para crear un icono basado en uno de lo de este gadget sobre´poniéndolo luego puedes subir la imagen creada a tinypic.com (ALOJADOR DE IMÁGENES) Sacas el link y l reemplazas en el que gustas, pero, de nada servirá, porque como puede ver en el código del paso uno tenemos un SCRIPT aunque cambies el icono y alguien de click llevará a compartir inicialmente en la red social que reemplazaste porque así está como parámetro en el SCript inicial lo que sería el caso es primero modificar el link de compartir de la red a reemplazar por el del cual quieres y listo así tendría sentido y funcionaría...

      Saludos,

      Eliminar

SÍGUENOS EN: