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.


27 comentarios

Hayder Juvinao · marzo 25, 2013 a las 3:33 pm

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

Saludos

    Alberto Franco · marzo 25, 2013 a las 3:55 pm

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

    Saludos!

María A. Marín · marzo 25, 2013 a las 6:57 pm

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.

Carlos Enrique Chamorro Matos · marzo 27, 2013 a las 5:01 am

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 😛

Vectores Iconos · marzo 28, 2013 a las 1:24 pm

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!

Akra aka Geisha · marzo 31, 2013 a las 6:14 am

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

    Alberto Franco · marzo 31, 2013 a las 2:27 pm

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

    Akra aka Geisha · abril 1, 2013 a las 1:46 am

    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 🙁

    Alberto Franco · abril 1, 2013 a las 4:21 pm

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

    Correo: alframig@gmail.com

    Un saludo.

    Akra aka Geisha · abril 4, 2013 a las 11:54 am

    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 🙂

    Alberto Franco · abril 4, 2013 a las 3:00 pm

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

    Saludos!

David Sánchez · abril 27, 2013 a las 5:41 pm

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

Abg. José R. Nina C. · abril 28, 2013 a las 1:11 pm

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

    Hayder Juvinao · mayo 3, 2013 a las 7:10 pm

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

    Saludos

Anonymous · mayo 1, 2013 a las 11:59 pm

No encuentro class=post-footer, ayuda

Haztex · mayo 2, 2013 a las 2:39 am

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?

    Hayder Juvinao · mayo 3, 2013 a las 7:17 pm

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

Campeon Drake · junio 18, 2013 a las 4:41 pm

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.

Campeon Drake · junio 18, 2013 a las 4:43 pm

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.

    Hayder Juvinao · junio 27, 2013 a las 8:17 pm

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

    Saludos

Alberto Estrada · diciembre 29, 2013 a las 9:49 pm

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

Alberto Estrada · diciembre 29, 2013 a las 9:50 pm

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

    Hayder Juvinao · enero 4, 2014 a las 4:04 pm

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

    Saludos

Anonymous · mayo 24, 2014 a las 12:08 am

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

Responder a Campeon Drake Cancelar la respuesta

Marcador de posición del avatar

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