Mil Trucos Blogger

Marcadores Sociales (Shareaholic Slide jQuery Gadget)

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

Bueno este es mi primera entrada en este gran Blog de un gran Administrador llamado “Hayder Juvinao” y me daba cosa hacerlo porque no se muy bien redactar entradas pero me he animado y alla voy.

Ya hemos visto unos cuantos marcadores, entre los cuales están: Marcadores Sociales estilo huevo para blogger, Marcadores Sociales estilo corazón para blogger en fin hay una gran veriedad para elegir y por lo cual no hay que tener excusa, en mi opinión éste marcador social que le estaré compartiendo me llama más la atención por su función…

Como vi que Juvinao lo puso en su plantilla nueva que por cierto esta muy bien… pues quise buscarlos por internet y compartirlo con todos vosotros/as para que los podaís tener por si alguno/a no los conociaís.

Éste gadget cuenta, cada vez que alguna persona publica algo a través de la herramienta, el marcador lo pueden ver perfectamente al final de esta entrada del blog de Hayder Juvinao. Aqui dejo una captura para que lo veaís.


Pues bien vamos a empezar, y lo primero sería (si no sabes de HTML, haz una copia de seguridad de la plantilla), entrar en el Editor de HTML y expandimos los artilugios..

Ahora bien, buscar lo siguiente:

]]></b:skin> 

No se olviden de presionar CTRL + F para encontrar el código más rápido, ahora pegar el siguiente CSS antes del código que mencioné anteriormente.

div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}

Hasta ahora vamos bien, lo siguiente sería buscar:

<div class='post-footer'>

Después del código encontrado pegar antes lo siguiente:

<!--Start Ssocial Bookmarks from http://www.spiceupyourblog.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {&quot;shr_class&quot;:{&quot;src&quot;:&quot;http://www.shareaholic.com/media/css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf142c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;google&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;twitter_template&quot;:&quot;Some fancy post title - http://goo.gl/dbqlx via @DeejayAfm&quot;}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
<!-- End Social Bookmarks from http://www.spiceupyourblog.com -->

Lo que está marcado en azul, es la condiciónal, que hace que los marcadores
sociales se vean sólo en las entradas, si desea que se muestre también en
el home (portada) usa las condicionales de blogger  (Tutorial CiudadDeBlogger) ahí eliges la condición que quieras. Lo que está marcado en color rojo es el nombre de mi twitter, el cual deberás reemplazar por el que queramos que en este caso el vuestro.


Todo los créditos son de Shareaholic. Espero que les guste esta entrada y que disfruten de estos marcadores sociales.

Un saludo a tod@s.

0
Shares

Relacionados...

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

27 Comentarios

  1. marzo 25, 2013    

    Gracias amigo por tu aportes, esta muy bueno, un gusto verte de nuevo por estos lados 🙂

    Saludos

    • marzo 25, 2013    

      El gusto e smio por dejarme publicar y ayudar a la gente 🙂

      Saludos!

  2. marzo 25, 2013    

    Pues para ser el primer post está muy bien. Yo me he quedado con la explicación perfectamente, gracias.
    Un saludo y espero que sigas enseñándonos.

    • marzo 26, 2013    

      Muchas gracias Maria por tu comentario de verdad.

      Un saludo 🙂

  3. marzo 27, 2013    

    EXCELENTE AMIGO!! una pregunte.. se puede hacer que al dar click en compartir se abrar en una ventana aparte y no en una nueva pestaña?… 😀 Desde ya gracias 😛

  4. marzo 28, 2013    

    A veces resulta mas fácil descargarse un archivo con iconos pre-fabricados como estos http://vectoresillustrator.org/iconos-de-redes-sociales/. Odio cuando intento programar y no me sale nada bueno!

  5. marzo 31, 2013    

    Hay algún modo de poder poner este efecto en unos botones que yo misma he creado???

    • marzo 31, 2013    

      Claro que se podria poniendo el mismo Css que haga ese efecto a tus botones se podria 😉

    • abril 1, 2013    

      Muchas gracias, ya lo conseguí de otra manera 😉 con un simple código HTML, de dos líneas conseguí el efecto!!! Lo he probado y queda perfecto (he intentado explicarlo aquí por si a alguien le podía servir pero no me deja escribir HTML 🙁

    • abril 1, 2013    

      si quieres mandamelo a mi correo y hago una entrada para compartirlo con todos.

      Correo: alframig@gmail.com

      Un saludo.

    • abril 4, 2013    

      Ya te he mandado un mail 😉 espero que a la gente le sirva de ayuda, es bastante fácil, lo complicado es poner el css que lo define en el lugar que uno quiera 🙂

    • abril 4, 2013    

      Ya lo he recibido y contestado. Pronto pondre la entrada cuando tenga algo de tiempo para compartirla.

      Saludos!

  6. abril 27, 2013    

    Hola, Necesito ayuda!!!!!!!! Desde que cambiaron el editor HTML de Blogger no logo encontrar varios códigos como este que mencionas en este tutorial, por favor ayuden me..

    No logro encontrar este código: ]]>

    Ni expandiendo todo en la planilla

  7. abril 28, 2013    

    Muy interesante. Pero ayudaria más si pudieran exponerlo en videotutoriales para hacerlo mas accesible.

    • mayo 3, 2013    

      Amigo tratare de hacerlos, pero ten en cuante que esto acarrea mucho tiempo 😕

      Saludos

  8. Anonymous Anonymous
    mayo 1, 2013    

    No encuentro class=post-footer, ayuda

    • mayo 3, 2013    

      Amigo busca algun codigo similar, como el post-footer-line-1

  9. mayo 2, 2013    

    Disculpa, pero el primer paquete de códigos no me lo reconoce ya que no se pone de colores, he echo todo al pie de la letra pero no me sale. ¿Alguien me ayuda?

    • mayo 3, 2013    

      Amigo la verdad si no dejas la URL de tu blog es muy dificil determinar cual es el problema

  10. junio 18, 2013    

    Muchas gracias por el código, me funcionó perfecto, solo que tengo una duda.
    Solamente me sale una fila de las redes sociales, cuando acerco el puntero se despliega la segunda, ¿es posible que se vean las dos inmediatamente de manera fija?.
    Gracias.

  11. junio 18, 2013    

    Muchas gracias por el código, me funcionó perfectamente, solo que tengo una duda.
    Se visualiza solamente una fila de las redes sociales, pero al acercar al puntero se despliega la segunda, ¿es posible que se vean las dos filas de manera fija sin tener que acercar el puntero?
    Gracias.

    • junio 27, 2013    

      Amigo es que la gracia del truco es justo esa, ese efecto.

      Saludos

  12. diciembre 29, 2013    

    ¿Hay alguna de manera de elegir los botones sociales con los que quieres que la gente pueda compartir, es decir, puedo elegir por ejemplo sólo 4 botones y el resto eliminarlo? cómo se haría?

  13. diciembre 29, 2013    

    ¿Hay alguna manera de poder elegir los botones de redes sociales que quieres que la gente comparta? es decir, ¿puedo quedarme sólo con 4 botones y eliminar el resto y que no aparezcan?
    Un saludo!

    • enero 4, 2014    

      Alberto pero la gracia del truco esta en que se pueden agregar muchos marcadores y no ocupa mucho espacio.

      Saludos

  14. Anonymous Anonymous
    mayo 24, 2014    

    Hice todos los pasos y lo agregué a mi blog, pero no aparece nada ¿por qué?

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