Marcadores Sociales (Shareaholic Slide jQuery Gadget)

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

27 thoughts on “Marcadores Sociales (Shareaholic Slide jQuery Gadget)

  • marzo 25, 2013 en 6:57 pm
    Permalink

    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.

    Responder
  • marzo 27, 2013 en 5:01 am
    Permalink

    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 😛

    Responder
    • abril 1, 2013 en 1:46 am
      Permalink

      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 🙁

      Responder
    • abril 4, 2013 en 11:54 am
      Permalink

      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 🙂

      Responder
    • abril 4, 2013 en 3:00 pm
      Permalink

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

      Saludos!

      Responder
  • abril 27, 2013 en 5:41 pm
    Permalink

    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

    Responder
  • mayo 1, 2013 en 11:59 pm
    Permalink

    No encuentro class=post-footer, ayuda

    Responder
  • mayo 2, 2013 en 2:39 am
    Permalink

    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?

    Responder
  • junio 18, 2013 en 4:41 pm
    Permalink

    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.

    Responder
  • junio 18, 2013 en 4:43 pm
    Permalink

    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.

    Responder
  • diciembre 29, 2013 en 9:49 pm
    Permalink

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

    Responder
  • diciembre 29, 2013 en 9:50 pm
    Permalink

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

    Responder
    • enero 4, 2014 en 4:04 pm
      Permalink

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

      Saludos

      Responder
  • mayo 24, 2014 en 12:08 am
    Permalink

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

    Responder

Deja un comentario

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