Botones para compartir que se detienen y flotan al bajar la página

17 de junio de 2012 419 comentarios ,

Resulta cada vez es más importante que nuestras entradas sean valoradas y compartidas en las redes sociales, así que para muchos mantener visibles los botones para compartir es indispensable.
Y una buena forma de mostrar siempre los botones es hacerlos flotantes, de manera que el lector pueda seguir viéndolos aun cuando baje el scroll de la página.

Lo que hace este script de jQuery es que cuando un elemento, en este caso los botones, lleguen "al tope" de la página se quedarán flotando en una posición fija.
Puedes ver aquí mismo el resultado, baja el scroll de la página, y los botones que están a continuación se quedarán flotando. Si vuelves a la parte de arriba entonces los botones regresarán a su lugar.

  • votar



Esta barra de botones la pondremos debajo del título de las entradas, la barra incluye los botones de Facebook, Twitter, Google+, Bitácoras, y Pinterest.

Lo primero es entrar en Plantilla | Edición de HTML y marcar la casilla Expandir plantillas de artilugios. Pegamos antes de </head> el script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $flotarbotones = $("#botonesflotantes"),
$window = $(window),
offset = $flotarbotones.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$flotarbotones.css({'position' : 'fixed', 'width' : '650px', 'top' : '0px'});
} else {
$flotarbotones.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>
Ahora antes de ]]></b:skin> pegamos los estilos de la barra:
#botonesflotantes {
width: 650px; /* Ancho de la barra */
height: 18px;
padding: 8px 0 10px 0;
position: absolute;
background: #eee; /* Color de fondo */
border: 1px solid #E6E6E6; /* Borde */
border-radius:5px;
z-index: 99;
}
.botonesflotantes {
margin-left: 5px !important; /* Distancia de los botones desde la izquierda */
}
.botonesflotantes li {
float: left;
margin-left: 5px;
list-style:none;
}
Por último, debajo de <div class='post-header'> agrega el siguiente código:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px 0 35px 0;clear:both;'>
<div id='botonesflotantes'>
<ul class='botonesflotantes'>

<!-- Botón de Facebook -->
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<!-- Botón de Twitter -->
<li><a class='twitter-share-button' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<!-- Botón de Google+ -->
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<!-- Botón de Bitácoras -->
<li><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/mini/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:0px;' title='Votar este artículo en Bitacoras.com'/></a></li>

<!-- Botón de Pinterest -->
<li><a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>
Si quieres que los botones estén al final de la entrada entonces el código anterior pégalo antes o después de <div class='post-footer'>

Verás que en el primer código aparece en color verde el ancho de la barra, y también aparece en los estilos, si cambias el tamaño deberás hacerlo en ambos. Toma en cuenta que son varios botones, por lo que no se recomienda hacerla más angosta, de lo contrario algunos botones se bajarán. En caso de que decidas hacerla más angosta entonces quizá sea necesario eliminar algún botón.

En el último código verás a cuál botón corresponde cada código, por si quisieras quitar alguno de ellos.

Si la barra quedara encimada al texto de las entradas entonces cambia el 35px por un valor más alto.
Los botones se verán únicamente al ingresar a las entradas individuales, de otra forma los botones se encimarían unos con otros al bajar la página.


419 comentarios en:

" Botones para compartir que se detienen y flotan al bajar la página "

  1. Hola Potro!! Hacia mucho que no me daba una vuelta por tu blog. Muy bueno este post, lo voy a probar en mi blog. Saludos!

    ResponderEliminar
    Respuestas
    1. Qué gusto verte de nuevo por estos lares :)

      Eliminar
    2. que combinacion se usa para encontrar una palabra dentro de la plantilla o para activar el buscador de palabras en la plantilla ayudame potro gracias

      Eliminar
    3. Si usas Windows es CTRL + F, si usas Mac es CMD + F

      Eliminar
    4. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    5. Tuve que eliminar el comentario por el aviso que está al final de la página :(
      Saludos.

      Eliminar
  2. Hola amigo potro, Bueno, de nuevo, Yo, Freddy,

    ¡Guau!

    Está Bonito, ¡Ya lo voy a poner!

    ¡Gracias Amigo Potro!

    ¡Saludos!

    ResponderEliminar
  3. SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! Es justo lo que quería, lo estaba buscando hace un montón SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!! SOS EL MEJOR!!!

    ResponderEliminar
  4. Jeje en Way2bloggin publicaron hoy lo mismo

    ResponderEliminar
  5. Impresionante entrada, sin duda la mejor en varias semanas

    Gracias Potro, Un saludo. :D

    ResponderEliminar
    Respuestas
    1. Gracias Valentin, me alegro que sea de tu agrado, ojalá y también les pueda ser útil.
      Saludos.

      Eliminar
  6. ¡Quedó perfecto en mi blog! Muchas gracias por todo Potro, es genial.

    ResponderEliminar
    Respuestas
    1. Genial PukitChan, gracias por confirmar que todo ha salido bien. Saludos.

      Eliminar
    2. Hola... Saludos desde P.R. Entre a tu pagina PukitChan pero no me salio para verlo en su acción... Me podrías decir donde lo instalaste para yo instalarlo igual... Me encanta la idea... Gracias...

      Eliminar
  7. hola potro quisiera que me digeras como quitar el boton de like de mis entradas, es el boton que aparese debajito del titulo de la entrada pues lo quiero quitar porque ya puse este y este me gusta mas que el otro. pero solo el que esta debajo del titulo los botones flotantes de la izquierda tambien me agradan :D
    muchas gracias potro

    ResponderEliminar
    Respuestas
    1. Hola Augusto, mira el código que pertenece al botón de Facebook, ese código búscalo en tu plantilla y elimínalo. Debe estar cerca de donde has puesto estos botones.

      Eliminar
    2. Hola Potro,ya con esta es la segunda vez que paso hoy,te deje un comentario,en la entrada del código del banner para que enlazen el blog..:-)

      Tengo una duda...que tantos videos puede soportar un Blog de Blogger? Eso trae algún problema?

      Quiero saber porque los otros dos que tengo son de música.
      La misma pregunta igual con la cantidad de imágenes que soporta un Blog.

      Esto de esta entrada me gusta .
      Eres el mejor! Dank.

      Eliminar
    3. ok potro intentare gracias por la ayuda. aunque si me pudieras para el post de donde saque el boton me seria mas util :D
      gracias

      Eliminar
    4. Hola JFBluePlanet, nunca he sabido de alguna limitante en cuanto a los videos. En imágenes tienes un espacio de 1GB

      Saludos.

      Eliminar
  8. Simplemente genial, pero me gustaría hacerlo con los botones sociales de mi blog, me ayudas???

    ResponderEliminar
    Respuestas
    1. No sé cuáles sean los botones de tu blog, pero sólo es cuestión de agregar antes de </ul> el código de cada botón, cada uno encerrado entre <li> y </li>

      Eliminar
  9. Excelente tu Post, Felicidades men!
    Oyes sabes como poner publicidad superior con opcion cerrar como la de Bitacoras.com?
    Click para ver ejemplo

    ResponderEliminar
    Respuestas
    1. Quizá con una caja de aviso como esta:
      http://ciudadblogger.com/2011/09/caja-de-aviso-para-el-blog-con-opcion.html

      Eliminar
  10. Hola Potro.
    Muy curioso lo de los botones ;)
    Saludos.

    ResponderEliminar
  11. Qué interesante! Quizás lo ponga en práctica :)

    ResponderEliminar
  12. se ve bueno...pero porque la de facebook no lo pones como boton para cuando le des like salga un cuadro de comentar,ese seria mucho mejor que solo darle like!!

    ResponderEliminar
  13. el boton de facebbok seria mejor si le pusieras cuandoi al darle like salga el cuadro de comentario y dejar algo ahi,ese seria mucho mejor!!

    ResponderEliminar
    Respuestas
    1. La base ahí está, ya será de cada quién que le cambie o agregue los códigos que más les gusten o los botones que necesiten.

      Eliminar
  14. Como siempre Potro, SOS EL MEJOR, SOS UN POTRO!.

    ResponderEliminar
  15. como siempre muchas gracias mi blog esta hecho a base de tu ayuda.

    ResponderEliminar
  16. yo siempre he querido esta funcion pero en un gadget con un chat, osea

    el chat sale al final de todos los gadgets del sidebar, y cuando el post sea largo que el gadget baje con el chat y cuando vuelva al tope se quede en el mismo lugar es posible esto?

    ResponderEliminar
    Respuestas
    1. Después veremos cómo aplicarlo a cualquier gadget del blog. Saludos.

      Eliminar
  17. Hola Potro, excelente truco, es bueno volver de nuevo a Internet, excelente truco.

    ResponderEliminar
    Respuestas
    1. También es bueno verte de nuevo por aquí, que estés bien :)

      Eliminar
  18. Amigo, excelentes recursos para Blogger, pero tengo una pregunta, de pronto sabe como hago para implementarlo en Joomla.

    ResponderEliminar
    Respuestas
    1. Nunca he usado esa plataforma así que no podría decirte cuál es el procedimiento ahí.

      Eliminar
  19. Hola potro ! Se que no es de esta entrada pero me dirías como poner unos botones de reacción, por ejemplo en este blog http://sintonialiteraria.blogspot.com abajo de cada entrada está el botón de que te hablo, espero tus respuesta, Gracias

    ResponderEliminar
    Respuestas
    1. Haz click en el elemento Entradas del blog, ahí puedes activar el gadget de Reacciones.

      Eliminar
  20. Potro, en mi blog no funciona.. ojala me puedas ayudar.. Gracias!

    ResponderEliminar
    Respuestas
    1. Quizá es porque tienes ya la última versión de jQuery, así que no es necesario agregarla, además, esa versión la tienes al menos dos veces y sólo debe estar una vez:
      http://ciudadblogger.com/2011/10/jquery-sus-versiones-y-el-conflito.html

      Eliminar
    2. Ya elimine las versiones repetidas que tenia y aún así no funciona.. lastmia me había encantado el truco.

      De igual forma, gracias y un saludo

      Eliminar
    3. Es una lástima, aun así, si después te animas a intentarlo otra vez déjalo puesto para que pueda darme una idea más clara de qué pueda estar pasando.
      Saludos :)

      Eliminar
    4. Genial Potro, deje todo en la plantilla, cuando tengas tiempo le hechas un ojo :)

      Entiendo que recibes muchas peticiones de ayuda, mi reconocimiento para ti viejo. Muchas gracias :D

      Eliminar
    5. Pues ni ayer ni hoy lo veo puesto completo, pero prueba cambiar de lugar el script de jQuery, ponlo después de <head> para que lo lea antes que los plugins.

      Eliminar
  21. Excelso, justo pasaba por acá a buscar esos botones, CB es como una botica, hay de todo y para todos :D

    Un abrazo Potro!

    ResponderEliminar
  22. ¡Hey Potro! ¿No existe algún lugar como CiudadBlogger pero para Tumblr que me puedas recomendar? Gracias :)

    ResponderEliminar
    Respuestas
    1. Ni idea Erick, una vez abrí una cuenta en Tumblr y ese mismo día la dejé de usar, así que no estoy enterado qué tantas páginas estén dedicadas a esa plataforma.

      Eliminar
  23. Hey Saludos #Potro.. Necesito una ayuda, Tengo un blogger.. peroo Quisiera ponerlo como este "http://www.blazergraph.com/" y Que cuando le de a un Boton... que pondree Reenvie a Mi Pagina de Facebook de "DIseños Graficos" peroo!.. No ENcuentro una Plantilla Asi que solo le ponga una Imagen de Informacion y De Diseños.. y el Boton de Reenviar.. peroo me Encantaria Otro Color no Negro. Para Hacer la Diferencia.. SI puedes contestarme muhcas Gracias..

    kemilgraph@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola KemilGraphz, si el blog será sólo como una presentación sin contenido quizá la forma menos complicado es algo como esto:
      http://ciudadblogger.com/2011/11/poner-en-el-blog-aviso-en-construccion.html

      Ahí podrías poner la info que deseas y el botón.

      Eliminar
  24. buenas Potro muy buenos post, te pido ayuda sobre una duda en mi blog, quiero eliminar el fondo de la cabezera y el fondo de la atribución sin tener que eliminar los fondos de los gadgets, me puedes decir como hacerlo? Si quieres te dejo un correo para que me expliques. Te dejo la url del blog: http://lacajadance.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Agrega en el CSS lo siguientes estilos:
      .footer-fauxborder-left, .header-outer {background:none !important;}

      Saludos.

      Eliminar
    2. Muchas gracias por todo :) Eres de lo mejor :)

      Eliminar
  25. http://naricarts.blogspot.com/
    haber que te parese

    ResponderEliminar
  26. gracias potro era lo ideal que necesitaba hermano siempre me salva de una!!

    ResponderEliminar
  27. oye potro no habra uno como este aparece luego luego a entrar http://i.imgur.com/JwKPl.png

    ResponderEliminar
    Respuestas
    1. Desde hace unas semanas iba a publicar un script similar (más completo que el de la imagen) pero es de pago, por esa razón ya no lo pude publicar :/

      Eliminar
    2. PERO NO HAY OTRO MAS PARECIDO QUE AIGAS SUBIDO ES QUE ASI ES MAS FACIL CONSEGUIR LIKESS

      Eliminar
    3. Que yo tenga no, no conozco alguno parecido.

      Eliminar
  28. Hola potro me gustaria saber si me puedes responder una pequeña duda lo que pasa es que en mi blog tengo incluida la opcion de "responder" los comentarios pero al picarle responder simplemente no pasa nada como si no estuviera activado o algo asi mi plantilla es personalizada osea no por defecto de blogger alguna soluccion que tengas mi amigo?

    ResponderEliminar
    Respuestas
    1. Hola Redzer HD, mira esta entrada de Karla, quizá lo que ella propone pueda ayudarte:
      http://www.compartidisimo.com/2012/02/no-funciona-el-enlace-de-responder-de.html

      Eliminar
    2. Potro sabia que no me desepcionarias , muchas gracias ya solucione el problema , siempre sigo tu blg increibles tutoriales que haces Gracias

      Eliminar
  29. Cuando le doy un clic en "Me gusta" no la registra y sigue marcando 0, ¿a qué crees que se deba? aquí te dejo el sitio, está en construcción:

    http://kryptog.blogspot.mx/2012/06/google-senala-que-han-crecido-las.html

    Saludos, buena página!.

    ResponderEliminar
    Respuestas
    1. A ciencia cierta no sé, pero puedes probar poner un script que evite la redirección, tal vez algo de eso tenga que ver:
      http://www.oloblogger.com/2012/03/redireccion-de-dominios-por-paises.html

      Eliminar
  30. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  31. de lo mas grande que e visto hasta la fecha potrillo :D my heroe

    ResponderEliminar
  32. Holas tanto tiempo je~... Grande como siempre Potro, me llevo los botones para mi blog ;)
    Saludos~

    ResponderEliminar
  33. Hola.
    No sabia como ponerme en contacto con vosotros, así que aquí estoy.
    Tengo una duda sobre un antiguo tutorial: http://ciudadblogger.com/2011/07/quitar-el-leer-mas-automatico-en-las.html
    Cuando dices que tengo que eliminar algo... ¿que tengo que eliminar en concreto? y después tan solo tengo que poner "" ¿y ya?

    Gracias y siento si esto por aquí no se puede postear.

    ResponderEliminar
    Respuestas
    1. Hola Luis, deja la pregunta en esa entrada, aun cuando sea antigua se siguen respondiendo los comentarios en cada una de ellas.
      Saludos.

      Eliminar
  34. hola potro, tengo un problemita, mira este es mi blog, tiene plantilla nueva, triple "w" frasesimagenes(punto)com, varias cosas sobre esta plantilla, quiciera cambiar, la primera, es que no se como se puede dar "todas las entradas tienen comentarios" ya que parece ser que sólo las nueva sme habilita la cajita de comentarios, y eso es un problema,después no me aparecen los botones de redes sociales debajo del títlo de entrada, y además quiciera quitar el gadget principal y ponerlo abajo de los post, gracias potro

    ResponderEliminar
    Respuestas
    1. Hola Álvaro, he entrado a tu blog pero he visto que sólo tienes habilitados los comentarios de Facebook, por lo tanto ninguna opción de los comentarios de Blogger servirá ya que es un sistema independiente.
      En cuanto a lo de los botones, ¿cuáles son los botones que has puesto y no te aparecen?
      Del gadget, ¿te refieres al slider de arriba? Si es así entonces tendrías que quitar con mucho cuidado desde <div id='content-slider'> hasta donde termine todo el código del slider, luego ubicarlo donde desees, por ejemplo debajo de:
      <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
      </b:section>

      Eliminar
    2. hola potro, gracias por tu respuesta, mi blog sólo tiene comentarios facebook en vez del codigo de blogger, pero usa el código de comentarios de blogger, para que se deslice la caja de comentarios (facebook) el tema es que hay muchísimos post, que tienen esa opción anulada, y sólo manualmente la puedo activar (una por una) me preguntaba si hay forma de hacerlo en bloque, por otra parte, los botones que he pusto son los de esta entrada tuya, y no salen díme porque??

      Eliminar
    3. Estimado, he podido quitar el gadget prinicpal(el de arriba) y cuando lo pego en donde tu me aconsejás, me salta un error con un código, díme que puedo hacer?

      Eliminar
    4. Hola de nuevo Álvaro. Cuando redactes tus entradas selecciona la opción de habilitar los comentarios, pero sí tendrás que hacerlo manualmente me temo.
      En cuanto a este código, habría que ver cuál error te salta, lo más probable es que el código no esté bien colocado, o que al ponerlo hayas eliminado por error algún otro.
      Saludos.

      Eliminar
    5. estimado, gracias por tus prontas respuestas, hace años que te sigo, y he aprendido mucho, pero me está doliendo mucho la cabeza intentando agregar los botones de compartir facebook, twitter, google+, pinecest, (o algo así, jeje) sé que es un tema del blog, creo que algún ccnflicto con las librerias jquery y la otra espartacus o algo de eso, yo no entiendo tanto como vos, pero leí algunos post tuyos, díme como puedo solucionar el tema de los botones de compartir al inicio del post???

      Eliminar
    6. Tendría que ver puestos los botones Álvaro, pero lo que sí veo, es que en tu plantilla el último código tendrás ponerlo arriba o debajo de:
      <div class='post-entry-body'>

      Buen fin de semana!

      Eliminar
    7. Estimado, muchísimas gracias por fin he logrado instalarlos en esta plantilla, te felicito como siempre sos el mejor y de gran ayuda para todos los bloggers, ahora tengo otra consulta, he instalado una plantilla nueva en otro sitio, el tema es que me encanta la plantilla pero es para ver videos de youtube, yo la quiero para ver imágenes y habría que modificarle algunas cositas, te dejo el link, y tu me dices como hago, (yo ya le quité algunas de las cosa que supuse podrían no servir, pero no pude avanzar más de como está.) LINK: (3w)facebookmuro(punto)com/
      Dime cómo hacer para que las imágenes se vean tanto en la página principal, como en las entradas, gracias !!

      Eliminar
    8. No conozco esa plantilla, pero también he entrado y no veo nada en las entradas :/

      Eliminar
    9. bueno muchas gracias potro tratare de buscar otra plantilla entonces.

      Eliminar
  35. Hola potro como andas? todo bien?
    Hay forma de hacer esto con un gadget? por ejemplo tu gadget de "archivo del blog" que vaya bajando a medida que la pagina va bajando??
    o es muy complicado?

    ResponderEliminar
    Respuestas
    1. Hola Lucas, sí se puede, sólo agrega el primer código, luego donde dice #botonesflotantes cámbialo por el ID del gadget al que se lo quieres hacer, por ejemplo, si fuera para el gadget de Archivo entonces sería #BlogArchive1

      Eliminar
    2. Funciona!!! muchisimas gracias :)

      Eliminar
  36. Ya lo he incorporado a mis blogs sin problemas, gracia a que lo has explicado muy bien. Muchas gracias por toda la ayuda que nos prestas y por tus explicaciones sencillas y entendibles.

    ResponderEliminar
  37. Gracias EL Potro, por hacer un tutorial de lo que te pedí ;)
    Ahora haré unos cuantos clics en tu publicidad :D

    ResponderEliminar
  38. Hola potro primero enorabuena por este post esta muy bien y aora tengo dos dudas y no se donde ponerlas te las dejo aqui:
    1:Mi primera dudas es si me podrias recomendar algun gadget que aga mas interactivo mi blog y con el gane mas visitas cada dia y tambien que la gente pinche mas en mis anuncios xD
    2: y la segunda es sobre mis anuncios hay algo que se pueda hacer para que los cuadrados donde salen mis anuncion no quede hay ese borde que sobre del cuadrado no se si me explico bien pero es que si eligo el anuncio mas grande que cabe en un cuadrado de ese me sobre siempre un cachito y quereria saber si se puede poner los anuncios de los tamaños que yo quiera sin ser los que me da blooger o se puede reducir esos cuadras
    Gracias

    ResponderEliminar
    Respuestas
    1. No hay gadgets mágicos, para tener más visitas el contenido de tu blog debe gustar, ahí no hay gadget que pueda interferir :)
      Lo de los anuncios no, no hay tamaños personalizados. En la página de AdSense puedes crear los anuncios según las medidas que ofrecen, pero no hay alguno al que se le pueda meter las medidas que uno quiera :/
      Saludos.

      Eliminar
  39. Hola Potro, mira no se si me podrias brindar tu ayuda... He seguido todos los pasos pero no me sale nada!!!! =/ ayudame porfa

    ResponderEliminar
    Respuestas
    1. Me encantaría ayudarte pero sino me dices en cuál blog lo has puesto no puedo hacerlo :(

      Eliminar
  40. hola amigo, fíjate que he hecho todo tal y como dices y no me a tirado nada sigue como si nada.

    ResponderEliminar
    Respuestas
    1. Hola Steven Nuñez, necesitaría verlo puesto todo en tu blog para saber porqué no se ve.

      Eliminar
  41. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Renato, he tenido que eliminar el comentario por el aviso que está al final de la página.
      No vi que tuvieras puesto los botones así que no pude ver cómo es que te aparecía el resultado.
      Saludos.

      Eliminar
  42. Hola Potro deseo contactarme contigo para comprarte un enlace en tu blog, mi correo es gerardoarambulo@gmail.com, muchas gracias ;).

    ResponderEliminar
    Respuestas
    1. Hola Gerardo™, por el momento no hay venta de espacios publicitarios abiertos a todo el público, si más adelante se habilitan aparecerá el banner indicándolo :)
      Saludos y gracias por tu interés.

      Eliminar
  43. oye potro hoy que dropbox eliminara la carpeta publica apartir del 1 de julio, tu sabes de algun hostin donde pueda guardar los swf y los script?

    ResponderEliminar
    Respuestas
    1. Hola Neomontoya, en la página de Dropbox así como en sus distintas redes sociales no hay ningún comunicado que afirme lo que mencionas, así que no debes preocuparte.
      Saludos.

      Eliminar
  44. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Es lo malo de cuando se usan plantillas muy personalizadas, que los códigos no coinciden con los tutoriales que encuentras por la red.
      En tu caso quizá debas poner el último código debajo de <div class='article-meta-autor'>

      Eliminar
    2. Gracias potro! ahi si me sirvio y se ven bastante bien...gracias!

      Eliminar
  45. Hola Potro, como no es difícil notarlo soy nuevo en el tema de modificar los códigos, excelentes tus entradas y antes que nada un súper agradecimiento.

    Tengo un par de preguntas (si se puede y no es mucho pedir) respecto a esta entrada:

    1. ¿se podría incluir esta barra de botones en el encabezado del blog?
    2. ¿se podría dejar siempre visible el encabezado del blog? (Título, descripción, pestañas y en dado caso esta barra)

    Gracias de antemano por la respuesta

    ResponderEliminar
    Respuestas
    1. Hola Excel Colombia, se puede poner en cualquier lado, pero no en cualquier lado funcionará para compartir las entradas del blog. Para que éstos botones sean capaces de leer los datos d ela entrada como el título, enlace, etc. es necesario que estén dentro del área de las entradas.

      Saludos.

      Eliminar
  46. Hola, Potro. Me gustaría que no quedase tanto espacio entre el título de la entrada y los botones. ¿Qué debo modificar?

    ResponderEliminar
    Respuestas
    1. Hola Fran, quita el clear:both; que está en el último código.

      Eliminar
  47. Como podría hacer que un menú muestre el mismo efecto que estos botones, osea que se detiene y flota al bajar la página?

    ResponderEliminar
    Respuestas
    1. Hola EL Potro, lo he probado con la Pagelist y no me funciona:
      http://grupoblogin3.blogspot.com

      Eliminar
    2. Si a los otros scripts les has aplicado el parche del noConflict también aplícaselo a este.

      Eliminar
    3. Ahora baja pero hay dos problemas:
      1. Que cuando baja los otros gadgets no se sobrepongan
      2. Que cuando subas otra vez hacia arriba se ponga el menú de páginas donde estaba originalmente, no como ahora que se pone más abajo.
      Saludos

      Eliminar
    4. Guiate con los códigos de esta entrada, si es necesario agrega estilos como los de aquí pero con el ID de tu gadget y con las medidas que tiene. Juega con los distintos valores hasta que quede como deseas.
      Saludos.

      Eliminar
  48. Potro, qué gusto visitarte y encontrar siempre información nueva y útil, un abrazo desde Guatemala.

    ResponderEliminar
  49. Hola Potro otra pesada atascada. Lo he puesto en mi blog y me gusta como queda, pero... ¿cómo puedo bajar un poco todo porque me tapa el año de la fecha que tengo tipo calendario? ¿cómo puedo poner los botones para que se vean centrados y no a la izquierda? ¿cómo separar el botón de FB y Twitt. para que la distancia sea la misma que los otros?

    Gracias como siempre. Un abrazo:)

    ResponderEliminar
    Respuestas
    1. Hola m.p.moreno, mira las anotaciones de los estilos, ahí dice cómo moverlo desde la izquierda en caso de que lo quieras mover más al centro.
      No hay ninguna distancia estipulada entre los botones, la distancia que ves de cada uno es el ancho de cada botón, desgraciadamente cada botón tiene un ancho distinto, y el de Twitter especialmente suele ser el mayor de todos, así que eso depende de los botones en sí.
      Lo primero que preguntas no pude verlo en tu blog, pero en la entrada se menciona dónde modificar en caso de que la parte del contenido de la entrada se encime.

      Saludos.

      Eliminar
  50. potro el botón de facebook se me desapareció igual veo que paso en este post :(
    me toco quitarlo :(
    que paso?

    ResponderEliminar
    Respuestas
    1. Yo los sigo viendo sin problema. Recuerda que los botones los proporcionan servicios externos así que puede ser normal que de vez en cuando no carguen algunos, o no carguen de inmediato, pero al menos ahora aquí mismo yo los veo todos sin ningún problema.

      Eliminar
  51. Vaya, todo mi gozo... me han dejado de funcionar el gadget del traductor y el del archivo del blog, ambos los tenía expandibles ¿qué puedo hacer?

    ResponderEliminar
    Respuestas
    1. Usa un parche en el script de jQuery, ya que no es compatible con Scriptaculous:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
  52. la verdad que el potro si que es un potro!

    ResponderEliminar
  53. ¡SOS! Algo grave ha ocurrido en mi plantilla porque han volado casi todas las personalizaciones que había aplicado, incluso esta que me había quedado bien, sólo me faltaban unos toques de CSS. Tengo copia de la plantilla actualizada, pero no sé como ponerla, tampoco quiero hacer más pruebas por mi cuenta, no, ya no.
    Como siempre esperando tu ayuda. ¡GRACIAS!

    ResponderEliminar
    Respuestas
    1. Hola m.p.moreno, puede ser que sin querer hayas cambiado de plantilla, o que hayas dado click en "Restablecer plantillas de artilugios". Si tienes una copia sólo súbela como cualquier plantilla, si lo prefieres primero practica en un blog de pruebas.

      Eliminar
  54. Gracias Potro, está muy bien echo, pero no me funciona el botón de bitacoras.

    ResponderEliminar
    Respuestas
    1. ¿A qué te refieres con que no funciona? ¿no aparece o qué sucede? ¿en cuál blog lo has puesto?

      Eliminar
    2. Primero no funcionaba, pero ahora no aparece ya ha echo algunos estragos en el blog. (Como que no vaya el silder). Lo he puesto en http://www.vvalcoi.com/

      Eliminar
    3. Veo los dos primeros códigos pero no el última. Revisa si tienes dos veces la línea que hay que buscar, si es así entonces pon el código en la otra, en la que no la has puesto.

      Eliminar
    4. El código está en la única línea que hay. Sigue sin funcionar. ¿Crees que el problema con el silder se debe a esto? ¿son ambas cosas incompatibles?

      Eliminar
    5. No, es por la plantilla que usas. Pon el último código arriba de:
      <div class='postmeta-primary'>

      Eliminar
    6. Gracias, la barra ya se ve. Pero el silder sigue igual

      Eliminar
    7. Quizá porque tienes dos versiones de jQuery y debes tener sólo una. Deja sólo esta línea:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

      Después de:
      <head>

      Eliminar
    8. Era eso, pero ahora los botones no bajan.

      Eliminar
    9. Quizá es por otros scripts que tienes de jQuery, veo que tienes varios ahí, no sé si ocupas todos, pero quizá es por eso. O tal vez necesitas aplicarle también a este script el parche de noConflict:
      http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

      Eliminar
    10. Igual, no se aprecia ningún cambio.

      Eliminar
    11. He pensado que como cada día le veo más problemas. Voy a quitar esos botones y a colocar unos diferentes. Gracias por tu ayuda.

      Eliminar
    12. Entonces debe ser que no es compatible con los demás scripts que tienes.

      Eliminar
    13. Vale, es "lo malo" de cuando se usan muchos scripts en la plantilla, aun así siempre se podrán poner botones normales que no requieran nada de esto.

      Eliminar
  55. Lo que estaba buscando! GRACIAS. No se casi nada de códigos pero con tus explicaciones lo hago a la perfección. Gracias nuevamente.

    ResponderEliminar
  56. Podrías hacer una entrada sobre esto: http://www.codigos-qr.com/2011/12/03/qr-tooltips-for-jquery/

    ResponderEliminar
  57. Hola potro que tal, otra vez molestando, sabrás la razón por la que no me suma los me gusta de facebook?, había puesto el botón tipo taringa y me había gustado, pero no me sumaba los me gusta, pensé que lo había hecho mal y lo quite y puse este para ver si lo lograba, pero me paso lo mismo, hay uan razón técnica o me equivoque.

    este es mi blog

    http://5ppythaim.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Parece que anda fallando el botón, hace un par de días un usuario reportaba un problema igual y de pronto sin hacer nada le han aparecido de nuevo todos los likes. Debe ser problema de Facebook quizás.

      Eliminar
  58. Hola Potro!, yo he intentado poner el código de facebook en la sidebar, pero no me funciona, no estoy seguro pero tiene que ver estos caracteres '". he intentado cambiarios por las " pero sigue sin funcionar.

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Peter, ¿te refieres a estos botones?
      Cualquier botón que sea para compartir entradas deben estar colocados dentro del área de las entradas, de otra forma no podrían leer los datos como el título, enlace, resumen, etc.

      Eliminar
  59. Hola Potro! Hace tiempo leo tu blog y tus tutoriales son geniales, desde ya muchs gracais por todo tu esfuerzo!
    Ahora bien, tengo una duda con respectoa estos botones deslizantes, hay forma de ponerlos verticales y a un costado del blog? O sea, en este ejemplo aparecen horizontales y se desplazan hacia arriba a medida que bajamos el scroll, pero seria posible poner esta barra o alguna otra a la izquiera por ejemplo, y que esté vertical (parada) ??

    ResponderEliminar
    Respuestas
    1. Hola CyberPunker, más adelante haré una entrada sobre ello, con el mismo efecto pero los botones en vertical fuera de la entrada ;)

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
  60. Ah ok, entonces es problema de facebook, gracias potro, pensé que la había regado otra vez... gracias!!!

    ResponderEliminar
    Respuestas
    1. Eso me supongo yo porque de otra manera no me explico porqué algunas veces funciona y otras no :/

      Eliminar
  61. Perdona las molestias, pero como se conseguiría que hubiese menos espacio entre los botones? Gracias

    Salu2

    ResponderEliminar
    Respuestas
    1. Hola Valentín, como mencionaba en otro comentario más arriba, no hay ninguna distancia estipulada entre los botones, la distancia que ves de cada uno es el ancho de cada botón, desgraciadamente cada botón tiene un ancho distinto, y el de Twitter especialmente suele ser el mayor de todos, así que eso depende de los botones en sí.

      Eliminar
  62. Y si no fuera una lista... si no una tabla... y el codigo fuera este:

    <div id="header-links">
    <table>
    <tr>
    <td>Feed</td>
    <td>SiteMap</td>
    <td>Contacto</td>
    <td>Acerca De</td>
    </tr>
    </table>
    </div>

    y los estilos estos:

    #header-links table {
    background-color:#444;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    position:fixed;
    height:38px;
    width:auto;
    margin:15px 0 0 460px;
    z-index:99;
    }

    #header-links td {
    color:#F0F0F0;
    font-family:"Century Gothic";
    font-size:16px;
    padding:0 5px 0 5px;
    }

    Cual seria el javascript????

    MUCHAS GRACIAS...

    ResponderEliminar
    Respuestas
    1. El script es el mismo, lo único que cambiaría sería donde dice #botonesflotantes por #header-links

      Eliminar
  63. A que se debe que al darle Like en el boton aparece error :(, puedes entrar y verificar ya que recién lo puse, Saludos!

    ResponderEliminar
    Respuestas
    1. No me ha dado error, pero me pide confirmar el "like", si le das click en Confirmar aparece el like de forma normal.

      Eliminar
  64. Buenos dias Potro, mira puse el codigo correcto pero no me sale, ojala me puedas ayuda, mi blog es: http://eagol.blogspot.com/

    ResponderEliminar
    Respuestas
    1. No conozco esa plantilla Harrys pero prueba poner el último código entre </header> y <section>

      Eliminar
  65. Primero Potro, muchas gracias!, estan muy buenos estos botones, me funcionaron muy bien pero me quedo un error pequeño, creo solucionable, no me quedaron ordenados como tu muestra, si no que uno quedo mas cercano que otro e incluso alguno mas separado, no centradito como a ti te quedaron.
    Te dejo en enlace para que lo veas http://www.mundomanualidades.info/2012/06/entretenidos-cuadritos-infantiles.html saludos!

    ResponderEliminar
    Respuestas
    1. Gracias Ignacio, así es como debe verse, quizá sólo tengas que reducir un poco el ancho del contenedor para que al final no quede mucho espacio sobrante.
      Saludos!

      Eliminar
  66. Hola El Potro, se podría hacer una cabecera como el de esta web: http://www.eyeos.org/es/
    ?
    Saludos

    ResponderEliminar
    Respuestas
    1. Supongo que sí aunque nunca lo he intentado así que no sabría decirte qué procedimiento seguir :/

      Eliminar
  67. Potro, una pregunta, ¿Que código podría agregar para que la barra se detenga al terminar el post?

    ResponderEliminar
  68. Hola, he insertado los codigos tal y como se especifica pero los botones no se ven y he leido cada uno de los comentarios intentando cambiar y actualizar jQuery y cambiando levemente los codigos y no funciona, mi plantilla es sencilla. Espero ver si me puedes ayudar o tienes alguna solucion. gracias por adelantado y sino que opcion similar me podrias sugerir.

    ResponderEliminar
    Respuestas
    1. Hola CineNews, los botones se ven al ingresar a un post, ¿ya has entrado a uno para verlos?
      ¿Cuál es el nombre del blog donde los has puesto?

      Eliminar
    2. si como dije ya intente y de hecho al darle vista previa me da la posibilidad de entrar a los post, y una vez que entro no hay nada, y ya intente arriesgarme dandole guardar pero no me permite guardar me pone fail. gracias por el interes y espero me puedas sugerir. mi blog es http://cinenewscine.blogspot.com

      Eliminar
    3. No veo puesto el código en el blog, sin estar puesto no puedo saber qué sucede. Si te da error al guardar entonces no está bien colocado.

      Eliminar
    4. Hola Potro nuevamente, volví a colocar los codigos en donde se indica y poniendo el ultimo código de los botones debajo de post-header/line 1 o algo asi en lugar de header en mi caso y ya lo pude guardar y se ve perfectamente, ya solo me falta modificar cosas como fondo tamaño etc. gracias por el interés y por el motivar a intertarlo de nuevo. Gracias. espero saludarte otra vez.

      Eliminar
    5. Gracias por avisar, me alegro que ya todo esté saliendo bien. Saludos!

      Eliminar
  69. Muchas gracias potro eres un GENIO me funcionó!!! y a ver si te haces fan de mi web!! Sería un Honor

    ResponderEliminar
    Respuestas
    1. Gracias Harrys, qué gusto que te haya salido bien. Saludos.

      Eliminar
  70. Esta bueno el post. pero me parece que le falta un botón para compartir (Share) el like suma.. pero tiene mas difusión el share. saludos

    ResponderEliminar
    Respuestas
    1. El código es completamente personalizable por lo que le puedes quitar o poner los botones que quieras ;)

      Eliminar
  71. oie potro, cambie de plantilla por lo que dijiste de problemas con muchos scripts, pero resulta que lo puse pero no aparece para nada la barra :(, auqnue solo lo queria para que le dieran like al post.

    ResponderEliminar
    Respuestas
    1. No veo puesto el código en el blog.

      Eliminar
    2. hahah, no te digo que no se miraba, lo quite, a que cres que se deba?

      Eliminar
    3. Sin verlo puesto no puedo decirte, pueden ser varias cosas, por eso siempre hay que dejarlo puesto, ya sea que se vea mal, o que no se vea.

      Eliminar
  72. Hola Potro estoy agradecido por cada uno de tus aportes que son muy buenos y mejoran cada vez mi Blog. En esta oportunidad quería saber porque al insertar los botones me salen fuera del cuadro y no como en el ejemplo que tu muestras. ¿De qué manera puedo arreglarlo? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario. Me encantaría poder ayudarte pero sin saber en cuál blog lo has puesto me es imposible hacerlo :(

      Eliminar
  73. Es en este blog: http://jreformistas.blogspot.com

    ResponderEliminar
  74. Mi blog es este: http://jreformistas.blogspot.com
    Y disculpa que no hayas podido verlo ya que cambie la plantilla justo ayer pero el problema continua!!!

    ResponderEliminar
    Respuestas
    1. Agrega debajo de .botonesflotantes { esto:
      margin-top: 0px;

      ¡Saludos!

      Eliminar
    2. Muchas Gracias Potro, estoy muy agradecido!!!!
      :) Sigue siendo lo mejor de lo mejor Ciudad Blogger!!!
      Sigue así Potro!!

      Eliminar
  75. hola gente seguidora de ciudad blogger y al reconocido amigo POTRO ; tengo una inquietud asi como hay botones flotantes , eh encontrado ...." una caja flotante lateral" que cuando el cursor pasa por encima se abre la caja y aparece x ejemplo un reloj, un contador, hasta un chat, el problema es que el codigo solo funciona CON AQUELLAS PAGINAS JIMDO .. intente ponerlos en el blogger y pues no llegan a funcionar como que le falta algo.. POTRO AMIGO esta ventana emergente nos seria de mucha ayuda que tambien funsionase en blogg te dejo el link :

    http://disemucho.jimdo.com/2012/06/18/caja-flotante-lateral-para-colocar-chat-y-todo-lo-que-imagines/

    es sorprendente

    ResponderEliminar
    Respuestas
    1. Hola, hay un fanbox que tiene el mismo efecto, y claro, que si no quieres poner el fanbox puedes poner algún otro elemento como un chat, o lo que quieras:
      http://ciudadblogger.com/2011/08/el-fanbox-de-facebook-flotante-y-con.html

      Eliminar
  76. Hola potro, la verdad siempre le echo un vistazo a CB para ver si puedo implentar algo nuevo a mis blogs...
    Te tengo una pregunta, ¿se puede hacer un menu con las mismas caracteristicas que esos botones para compartir? en el caso de que se pudiera.
    ¿Como haria para que aparezca en la parte superior del blog justo encima de la cabecera?

    ResponderEliminar
    Respuestas
    1. Hola Jon Darian, más adelante veremos un menú como el que buscas, sólo dame algunos días ;)
      Saludos.

      Eliminar
  77. Hola, amigo hice todos los pasos pero no sale las barras de facebook.

    espero que me ayudes.

    ResponderEliminar
    Respuestas
    1. Me encantaría ayudarte pero no puedo hacerlo sin saber el nombre de tu blog.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger