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.
39 comentarios
HANNIBAL T · octubre 6, 2012 a las 1:39 am
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 🙂
Andres Ardila · octubre 6, 2012 a las 3:31 pm
Man yo seguí los pasos del tutorial y me funciono xD, Perdona la intrusión Juviano xD
Juvinao · octubre 7, 2012 a las 4:56 pm
HANNIBAL T el panel utiliza codigos que en general Blogger acepta, a grandes rasgos puede comprobar que el codigo funciona en Blogger 😛
Anonymous · octubre 8, 2012 a las 8:24 am
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.
Juvinao · octubre 9, 2012 a las 8:32 pm
La verdad no he trabajado en dichos marcadores pero con gusto los hare 😛
Anonymous · octubre 8, 2012 a las 8:51 pm
Pues este diseño esta muy bueno aunque el anterior no estava nada mal saludos
Juvinao · octubre 9, 2012 a las 8:35 pm
Amigo la verdad recibi un par de sugerencias por el anterior diseño asi que para complacer a mis lectores decidi cambiarlo 😛
Osman Leiva · octubre 10, 2012 a las 7:22 pm
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?
Juvinao · octubre 10, 2012 a las 8:52 pm
Osmas si lo saque de un theme llamado Metro Simple,pero lo mejore un poco 😛
BoogerdBlog · octubre 22, 2012 a las 9:13 pm
¿Cómo podría añadir el botón de menéame? …con el mismo diseño claro…
Juvinao · octubre 23, 2012 a las 1:21 am
Pues es cuestion de diseñarlo, con gusto lo diseñare 😎
Paywoken Artista · octubre 26, 2012 a las 12:32 am
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!
Paywoken Artista · octubre 26, 2012 a las 1:43 am
Vale, lo encontré y funciona! Muchas gracias por el post! Ha quedado muy chuli: http://www.paywoken.blogspot.com.es/
Saludos!
Juvinao · octubre 26, 2012 a las 7:40 pm
Paywoken tienes un blog muy lindo :twisted:, este truco se ve muy bien en tu blog.
Saludos 😛
Paywoken Artista · octubre 30, 2012 a las 6:34 pm
Gracias!
Aritz · octubre 27, 2012 a las 11:39 am
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!
Juvinao · octubre 27, 2012 a las 10:22 pm
Aritz en cual blog se presenta este problema?
Simon Baker · noviembre 1, 2012 a las 4:47 pm
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/
Juvinao · noviembre 1, 2012 a las 7:22 pm
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.
Simon Baker · noviembre 1, 2012 a las 11:24 pm
Eso lo sé pero…¿qué tengo que modificar exactamente? ¿Dónde y como la introduzco?
Juvinao · noviembre 2, 2012 a las 4:47 pm
He visto que el marcador de Tuenti tiene la imagen de Twitter,entonces solo reemplaza esa imagen por una de Tuenti y ya.
Simon Baker · noviembre 3, 2012 a las 11:52 am
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…)
Juvinao · noviembre 3, 2012 a las 4:37 pm
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
Simon Baker · noviembre 3, 2012 a las 5:33 pm
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
Juvinao · noviembre 4, 2012 a las 4:07 pm
Simon en hora buena 😈
Jelens · noviembre 4, 2012 a las 2:33 pm
Unos botones muy chulos.
Gracias!
Juvinao · noviembre 4, 2012 a las 4:10 pm
Jelens gracias por tu comentario
Florian Danciu · noviembre 9, 2012 a las 8:00 pm
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 =(
Juvinao · noviembre 12, 2012 a las 8:20 pm
Florian no veo ningunos puntos en tu plantilla y por lo del acento no te preocupes yo muy poco los uso.
Saludos.
Florian Danciu · noviembre 13, 2012 a las 9:36 pm
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 =)
Alejandro Adolfo Guerra Cetrone · enero 28, 2013 a las 9:45 pm
una pregunta como hago para cambiarle la fuente al texto de Comparte este post
Viktor Filosofia Funk · febrero 11, 2013 a las 2:14 am
Muy guapos si señor,gracias juvinao.y gracias a simos puesto tuenti 🙂
Viktor Filosofia Funk · febrero 11, 2013 a las 4:10 pm
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
Viktor Filosofia Funk · febrero 11, 2013 a las 5:19 pm
Este comentario ha sido eliminado por el autor.
Francisco · abril 11, 2013 a las 7:16 am
¿¿¿y se puede poner mas botones, por ejemplo el del tumblr???
Hayder Juvinao · abril 14, 2013 a las 9:52 pm
Claro que si solo añade el código y ya, guíate por este tutorial
http://www.miltrucosblogger.info/2012/08/agrega-tus-propios-marcadores-sociales.html
Anonymous · abril 20, 2013 a las 1:07 am
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?
Hayder Juvinao · abril 24, 2013 a las 12:45 am
Amigo si aun tuvieras activados estos botones, tal vez pudiera encontrarte alguna solución.
Saludos
ROBERTO ROBERT · noviembre 6, 2014 a las 6:53 pm
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/