Mil Trucos Blogger

Espectaculares Marcadores Sociales para tu blog

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

En esta oportunidad compartiré con ustedes unos espectaculares marcadores sociales para Blogger, al pasar el cursor sobre el icono de la red social se torna opaco (efecto opacidad) y al hacer click en el ultimo icono de la lista se despliega una lista bastante completa de otras redes sociales.

Puedes ver el truco funcionando en el siguiente blog de pruebas


Para agregar este truco a tu blog busca en la Edición HTML (con los artilugios expandidos) la siguiente etiqueta

 <div class='post-footer-line post-footer-line-3'>

Debajo de ella pega lo siguiente:

<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>
  <li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://lh3.googleusercontent.com/-R_-TACJvUQY/T4y73dnBoTI/AAAAAAAAJH4/KWAUNXbnq8A/s57/Share%2520alt%25201.png' width='57'/></a></li>
</ul></span>
</div>
</div>

Ahora arriba de </body> pega lo siguiente:

<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/>

Con esto ya habras añadido el truco en tu blog,solo queda guardar los cambios.

 

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

39 Comentarios

  1. octubre 6, 2012    

    Que tal amigo Juviano, quiero hacerte una pregunta estube googlenado en busca de paneles deslizantes con jquery y me encontre este que parece no muy complicado http://www.funcion13.com/2012/10/01/panel-deslizable-horizontal-con-jquery/ lo podias adaptar para blogger te lo agradeceria mucho amigo 🙂

    • octubre 6, 2012    

      Man yo seguí los pasos del tutorial y me funciono xD, Perdona la intrusión Juviano xD

    • octubre 7, 2012    

      HANNIBAL T el panel utiliza codigos que en general Blogger acepta, a grandes rasgos puede comprobar que el codigo funciona en Blogger 😛

  2. Anonymous Anonymous
    octubre 8, 2012    

    Perdona compañero, tengo una pequeña duda. Me gustaria que si algun dia se cae una imagen en vez de aparecer en letras “imagen” pusiese por ejemplo “Facebook” o lo que yo quiera, dependiendo de que sea esa imagen. He buscado bastante pero no encuentro la solucion.

    • octubre 9, 2012    

      La verdad no he trabajado en dichos marcadores pero con gusto los hare 😛

  3. Anonymous Anonymous
    octubre 8, 2012    

    Pues este diseño esta muy bueno aunque el anterior no estava nada mal saludos

    • octubre 9, 2012    

      Amigo la verdad recibi un par de sugerencias por el anterior diseño asi que para complacer a mis lectores decidi cambiarlo 😛

  4. octubre 10, 2012    

    estos marcadores aparecen en un theme de blogger, muy limpio. antes lo usaba, pero lo cambie. Lo vistes? tomastes el codigo de los marcadores de ese theme?

    • octubre 10, 2012    

      Osmas si lo saque de un theme llamado Metro Simple,pero lo mejore un poco 😛

  5. octubre 22, 2012    

    ¿Cómo podría añadir el botón de menéame? …con el mismo diseño claro…

    • octubre 23, 2012    

      Pues es cuestion de diseñarlo, con gusto lo diseñare 😎

  6. octubre 26, 2012    

    Hola, es un post muy interesante. He intentado llevarlo a cabo pero en mi blog no veo por ningún lado lo de “<div class=’post-footer-line post-footer…

    Los que hay son …footer-line-1′ y …footer-line-2′

    No sé si es que no lo he visto o que no lo hay! ¿Podrías ayudarme?

    Gracias de antemano!

  7. octubre 26, 2012    

    Vale, lo encontré y funciona! Muchas gracias por el post! Ha quedado muy chuli: http://www.paywoken.blogspot.com.es/

    Saludos!

    • octubre 26, 2012    

      Paywoken tienes un blog muy lindo :twisted:, este truco se ve muy bien en tu blog.

      Saludos 😛

    • octubre 30, 2012    

      Gracias!

  8. octubre 27, 2012    

    Buenas compañero! Gracias por los marcadores!
    Yo tengo un problema y es que me salen más separados de lo que te quedan a ti en esa imagen. Como 2cm de distancia entre cada marcador. Por qué puede ser?
    Gracias!

    • octubre 27, 2012    

      Aritz en cual blog se presenta este problema?

  9. noviembre 1, 2012    

    Hola buenas, muy buen aporte.
    Me gustaría preguntar una cosa:
    he conseguido convertir uno de los marcadores para que enlace con la red social tuenti.
    El problema es que me sale la imagen original del marcador: he convertido una de twitter y pone la caracterísitca T de twitter, solo que enlaza con la red social española.
    ¿Me podría decir como modificar este problema?
    Muy gran aporte, dejo el link a mi blog por si alguien quiere comprobar cómo de bien funciona o por si a alguien le interesa leerlo: es un blog acerca de un adolescente, yo, que cuenta sus experiencias sentimentales.
    http://diariodeadolescenteenamorado.blogspot.com.es/

    • noviembre 1, 2012    

      Simon Baker solo tienes que buscar una imagen de Tuenti que sea similar al resto del pack, yo no uso Tuenti por eso no la agregue.

    • noviembre 1, 2012    

      Eso lo sé pero…¿qué tengo que modificar exactamente? ¿Dónde y como la introduzco?

    • noviembre 2, 2012    

      He visto que el marcador de Tuenti tiene la imagen de Twitter,entonces solo reemplaza esa imagen por una de Tuenti y ya.

    • noviembre 3, 2012    

      Jajajajajaja no me estoy explicando bien, me temo.
      Quiero decir que qué parte del html he de modificar, porque no encuentro dónde hace referencia a las imágenes de cada marcador.
      (Perdón por la lata que te estoy dando, Juvinao…)

    • noviembre 3, 2012    

      Es esta parte:

      <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>

      En el anterior fragmento esta el codigo completo que hace funcionar el marcador de Twitter, para modificar la imagen debes buscar la siguiente URL:

      https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.pn

    • noviembre 3, 2012    

      Muchísimas gracias, Juvinao. Ya lo tengo aplicado. Dejo el link de la imagen que usé para enlazar con Tuenti por si alguien quiere utilizarla en su blog http://www.queestuenti.com/galeria/tuenti/Que_pasa_con_la_cuenta_de_Tuenti_de_algun_fallecido.jpg

    • noviembre 4, 2012    

      Simon en hora buena 😈

  10. noviembre 4, 2012    

    Unos botones muy chulos.
    Gracias!

    • noviembre 4, 2012    

      Jelens gracias por tu comentario

  11. noviembre 9, 2012    

    Mira me pasa cosas muy raras en mi blog http://serierevolutionspain.blogspot.com.es/

    1 lo primero que tengo arriba de los iconos unos puntitos esteticamente feos no se si solo los vere yo pero o es normal y si tienes alguna solucion

    2 Esque queda mucho espacio entre donde pone comentarios y los iconos como dos espacios de teclado espero que tengas una solucion

    PD: Me encanta tu pagina recomendad al 200% =)

    PD de PD: No tengo la tecla del acento asi que no lo puedo poner perdon por las faltas de ortografia =(

    • noviembre 12, 2012    

      Florian no veo ningunos puntos en tu plantilla y por lo del acento no te preocupes yo muy poco los uso.

      Saludos.

  12. noviembre 13, 2012    

    No ya lo he quitado esque cuando lo ponia en las pestañas quedaba un hueco pero ya lo he quitado porque tarda mucho en cargar pero gracias de todos modos =)

  13. enero 28, 2013    

    una pregunta como hago para cambiarle la fuente al texto de Comparte este post

  14. febrero 11, 2013    

    Muy guapos si señor,gracias juvinao.y gracias a simos puesto tuenti 🙂

    • febrero 11, 2013    

      queria decir gracias a simon he puesto tambien tuenti,Juvinao si una vez lo he colocado vuelve a ponerse por si solo el margen de 1px,porque puede ser? lo tngo con 14px de separacion pero no me aparece así,gracias de antemano crack! el blog es este : http://socialfunkchannel.blogspot.com.es/

      También te queria felicitar el blog,a mi me es muy util.thnx

  15. febrero 11, 2013    

    Este comentario ha sido eliminado por el autor.

  16. abril 11, 2013    

    ¿¿¿y se puede poner mas botones, por ejemplo el del tumblr???

  17. Anonymous Anonymous
    abril 20, 2013    

    Mi blog es http://www.unidosporelfutbol.com/, quise agregarlo en el, pero al parecer no clickle en las imagenes… se muestran las imagenes pero no hay link no se si me entiendas? no se si dejo de funcionar el script?

    • abril 24, 2013    

      Amigo si aun tuvieras activados estos botones, tal vez pudiera encontrarte alguna solución.

      Saludos

  18. noviembre 6, 2014    

    Mi problema es que no encuentro, seguramente porque no la tengo, la línea de scrip “<div class=’post-footer-line post-footer-line
    Y tengo los botones de compartir que vienen por defecto, pero necesitaba ampliar más redes sociales a las que compartir.

    http://ambulanciasyemerg.blogspot.com.es/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo