Botones para compartir flotantes que se deslizan al bajar

8 de julio de 2012 448 comentarios ,

Hace poco veíamos una manera de poner debajo de los títulos botones para compartir en las redes sociales, de forma flotante, es decir, que éstos permanecían visibles aun cuando se bajara el scroll de la página.

En esta ocasión veremos algo similar, digo similar porque aunque también se mantienen flotantes, éstos botones para compartir las entradas del blog bajan junto con el scroll de la página pero con un ligero efecto deslizante, además, éstos botones se encontrarán del lado izquierdo de las entradas. Incluiremos sólo los botones básicos: Facebook, Google+ y Twitter, sin embargo se pueden agregar más o cambiarlos por otros.

Puedes ver el ejemplo aquí mismo en esta entrada, al bajar la página verás que los botones también bajan, y al subir de nuevo los botones regresarán a su lugar.

Para poner estos botones flotantes para compartir usaremos un script muy corto de jQuery.
Lo primero es ingresar a Plantilla | Edición de HTML, marcar la casilla Expandir plantillas de artilugios y pegar antes de </head> lo siguiente:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
// <![CDATA[
$(function() {
var offset = $("#BotonesFlotantes").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#BotonesFlotantes").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#BotonesFlotantes").stop().animate({
marginTop: 0
});
};
});
});
// ]]>
</script>
<style>
#BotonesFlotantes {
position: absolute;
left: -100px; /* Distancia desde la izquierda */
border: 1px solid #FB5F55; /* Borde del contenedor */
border-right: 0px;
padding: 10px;
background-color: #FFF; /* Color de fondo del contenedor */
z-index:9;
}
#BotonesFlotantes div {
margin: 10px 0;
}
</style>
Luego buscamos esta línea:
<div class='post-header'>
Y debajo de ella pega lo siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BotonesFlotantes'>
<div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px'/></div>

<div><a class='twitter-share-button' data-count='vertical' data-lang='es' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/></div>

</div>
</b:if>
Guarda los cambios y listo.
En el primer código hemos puesto tanto el script como los estilos ya que ambos son muy breves. Ahí verás en color verde a qué corresponde cada área.
Donde dice /* Distancia desde la izquierda */ debes modificarlo hasta que quede a la distancia correcta según tu plantilla. Ahí mismo verás dónde cambiarle el borde y fondo del contenedor.

Estos botones se verán sólo en las entradas individuales, de otra forma no funcionarían.
Si quisieras agregar más botones entonces añádelos antes de </div> y cada uno encerrado entre <div> y </div>

Recuerda que este gadget usa jQuery, por lo que si ya tienes la última versión de jQuery no hace falta repetir el script. Y si usas Mootools o Scriptaculous debes aplicar unos cambios al script.

Sino te aparecieran, pon la /* Distancia desde la izquierda */ en 0px, si tampoco aparecen entonces el último código ponlo arriba de <data:post.body/>



448 comentarios en:

" Botones para compartir flotantes que se deslizan al bajar "

  1. GENIAL!!!

    Muchos estábamos a la espera de este truco, se ve mejor que los botones flotantes anteriores.

    Por cierto, si tienes tiempo de entrar a Wevoluciona.com, haber si me puedes decir porque el menú que tengo no se ve en las entradas.. No ubico la condicional.

    Gracias viejo, un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias Valentín. Tienes una condicional que oculta el gadget donde está el menú, por eso no se ve ahí.
      #HTML2
      {
      display: none;
      }

      Quitando eso se mostrará en todas partes.
      Un abrazo.

      Eliminar
  2. Hola acabo de pegar los codigos en mi blog de blogger pero no aparecen aun; sin embargo sale un cartel que dice que la maquina esta sieno protegida de posibles ataques etc...este es mi blog http://hacerdinerored.blogspot.com.ar/ me gustaria que le den un vistazo por favor gracias.

    ResponderEliminar
    Respuestas
    1. No veo los códigos en ese blog, pero cualquier mensaje de ese estilo nada tiene que ver con estos botones, no se usa ningún sitio para alojar códigos, y los botones son los oficiales que provee cada sitio.

      Eliminar
  3. No Me Salee Porfavor Quien Me Puede Ayudar

    ResponderEliminar
    Respuestas
    1. Con gusto te ayudamos pero sin saber en cuál blog lo has puesto será imposible poder ayudarte.

      Eliminar
  4. Que tal POTRO un gusto saludarte y aunque lo que preguntare no tiene relacion con esta entrada te comento que estoy decidiendome comprar el dominio en BLOGGER, ya lei que no es directamente con ellos la compra del dominio y lei lo de DNS y los subdominios, el correo y ya me enredé... Que me recomiendas hacer antes, durante y después de la compra del dominio. GRACIAS

    ResponderEliminar
    Respuestas
    1. No tienes de qué preocuparte VDesing, aun cuando lo compres desde Blogger puedes acceder a los DNS (como se explica en una entrada por ahí) para agregar subdominios o añadir otro tipo de registros.
      Antes de que te decidas mira esta entrada:
      http://ciudadblogger.com/2009/10/todo-lo-que-hay-que-saber-antes-de.html

      Eliminar
    2. Muchisimas gracias, excelente informacion como siempre, saludazos compa! Dios te bendiga.

      Eliminar
  5. Hola...!! en faktores no lo veo (ya puse los codigos de arriba).. :/ se supone que debe tener jquery (es nuevo el blog)??? aun no le entiendo del todo a eso del jquery - Scriptaculous. será que en f. México hay algo de eso y por eso no funcionan bien los trucos?? saludos Potro sensei.. :)

    ResponderEliminar
    Respuestas
    1. No veo que tengas puesto el segundo código, si ya lo has puesto y no se ve prueba con la otra ubicación que se menciona en la entrada, pero además de eso como usas Scriptaculous deberás hacer lo que se indica en el enlace que está al final.
      Saludos.

      Eliminar
    2. hola :( tuve que hacer faktores como una extension de los otros blogs por que no funcionaban varios trucos en ellos , como ponerte un ejemplo lo de arrastrar las imágenes lo puse en faktores por que dejó de funcionar en f. México pero ahora que metí el codigo de los botones flotantes ya dejó de funcionar..!!! los eliminé para ver si funcionaban de nuevo pero noooo ya no funciona el arrastrarlos .. entonces no sé que hacer !! cada que meto algo nuevo deja de funcionar algo ya estoy desesperada entonces de nada sirvió que hiciera faktores, se puede solucionar? ayudame pls y tambien quiero saber que trucos no son "compatibles" con otros trucos o efectos ??para ya no estar molestandote tanto de verdad me apeno mucho por hacerlo ..:( saludos

      Eliminar
    3. p.d. ya confirmadisimo este script no dejaba que funcionara lo de las imagenes q se arrastran, el sript de esta entrada ya lo eliminé completamente es que dejé una linea que no borré ..ahor mi duda es cómo le hago para que se puedan los dos?

      Eliminar
    4. No te apenes que no es ninguna molestia. Supongo que el script que usas para que las imágenes se arrastren es Scriptaculous, el cual no es compatible con jQuery, es por eso que al final de la entrada menciono el tema de esos dos scripts así como el enlace que te llevará a la entrada que explica cómo hacer funcionar ambos.

      Eliminar
    5. Gracias ;)
      tengo que aplicarme en este tema.. :$
      mira : dices, Para aplicar esta variable necesitamos hacer uso del comando jQuery.noConflict();
      En dónde veo, busco en toda la plantilla? no entiendo.. :&

      Eliminar
    6. Mira esa entrada, ahí verás un ejemplo de dónde se tiene que poner.
      Saludos!

      Eliminar
    7. este como quedaria??







      quedaria bien asi?? :$

      < !-- Prototype y Scriptaculous-->
      <----
      -------

      Eliminar
    8. P.d le tuve que quitar lo de en medio ya que no me dejaba publicarlo completo, ese codigo es el que puse para arrastrar las imágenes.. saludos

      Eliminar
    9. No he podido ver el código que dejaste. Para que un código pueda verse en los comentarios primero tienes que convertirlo a texto plano:
      http://ciudadblogger.com/p/conversor-de-html-texto-plano.html

      Ya que lo conviertas a texto plano deja el comentario en la otra entrada, pues allá es donde tenemos que darle el seguimiento a ese tema ;)
      Saludos.

      Eliminar
    10. es que aqui es el problema.. mira quise poner el script de esta entrada publicada(botones para compartir flotantes que se deslizan),pero no es compatible con este script:
      <!-- Prototype y Scriptaculous-->
      <script src='http://www.google.com/jsapi'></script>
      <script>
      google.load("prototype","1.7.0.0");
      google.load("scriptaculous", "1.9.0");
      </script>
      <!-- Prototype y Scriptaculous-->


      la pregunta de arriba que no se ve es, que tengo que hacer con este script para poder poner el de esta entrada(botones para compartir flotantes que se deslizan)..?? :)

      Eliminar
    11. En realidad el problema es allá, porque ya no es asunto de la instalación sino de la compatibilidad. Si te fijas en esa entrada verás que dice que los cambios se aplican al script de jQuery, NO al de Scriptaculous. Así que a ese código que has dejado no tienes que modificarle nada, es al script de jQuery donde tienes que hacer las modificaciones. Ahí mismo en la entrada hay un código de ejemplo para que te guíes.

      Eliminar
    12. Gracias potro y me referia a el "problema es aqui" al codigo, no a la entrada jeje ..
      ya checo eso,mil gracias

      Eliminar
  6. Hey Potro! No se ven los botones, hice el cambio que dijiste y todo pero no me funciona...

    nadamaspersonal.com.ar

    ResponderEliminar
    Respuestas
    1. Sino dejas puesto el código no puedo saber porqué no se ve :/
      Cuando lo pongas, pon el segundo código arriba de <div class='postmeta-primary'>

      Eliminar
    2. Potro! Ahi deje puesto los codigos, hice lo que me sugeris pero nada.

      Eliminar
    3. Ya te he respondido más abajo, en el otro comentario ;)

      Eliminar
  7. muy bonito!!!! potro me encanto!!!...

    ResponderEliminar
  8. genial me quedaron super bien, justo lo que estaba buscando
    ya te extrañabamos, crei que ya no ibas a postear mas :(

    ResponderEliminar
    Respuestas
    1. Yo también lo creí, jaja, no es cierto, es sólo la falta de tiempo, pero aquí estamos.
      Un abrazo!

      Eliminar
  9. Muchas gracias Potro, como siempre, unos aportes fantásticos, pero antes de poner más cositas en el blog, debo solucionar un problema que tengo desde hace varios días, y que creo está relacionado con Scriptaculous y Prototype, quizá me puedas ayudar.
    De repente dejó de funcionar el efecto “mostrar/ocultar” de los elementos en la sidebar. Tampoco funciona el efecto deslizante “subir”. Cuando se clica en todo eso, directamente se desplaza a la cabecera del blog.
    No sé si esto pasa sólo en mi blog o es a nivel general, aunque he visto algún otro blog con el mismo problema.
    Algo parecido sucedió en abril pasado y, gracias a ti, lo solucioné cambiando el script.
    Agradecería muchísimo tu ayuda, también en esta ocasión.
    Salud:)s

    ResponderEliminar
    Respuestas
    1. Hola MariLecce, parece que Scriptaculous y Prototipe nuevamente han actualizado su versión y por eso se dan esos problemas.
      Cambia esto:
      <script src='http://www.google.com/jsapi'/>
      <script>
      google.load(&quot;prototype&quot;,&quot;1.7.0.0&quot;);
      google.load(&quot;scriptaculous&quot;, &quot;1.9.0&quot;);
      </script>

      Por esto:
      <script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
      <script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

      Con eso deberá funcionar de nuevo y ya no te deberá dar problemas en adelante.
      Saludos.

      Eliminar
    2. Hola Potro (me encanta), hice el cambio como indicaste, pero no funcionó.
      Estoy un poco desesperadilla :D
      Gracias de nuevo por tu atención ;)

      Eliminar
    3. No sé con cuál navegador lo hayas probado pero al menos con Chrome y Firefox el botón de Subir me funcionan bien (con el efecto deslizante) en ambos navegadores.

      Eliminar
    4. Con todos! bueno: Chrome (el que utilizo normalmente), Firefox y Explorer.
      No "sube", ni todo lo demás. No entiendo, pasó de repente, sin tocar nada (eso decimos todos, pero es cierto).
      De repente: ¿puedo tener algún otro conflicto en la plantilla?. Nunca tuve otro problema (excepto en abril).
      ¿Puedo "abusar" un poco más de ti? jaja, muchas gracias, de verdad :)

      Eliminar
    5. No sé decirte, te repito que a mí tu blog me funciona bien ese botón con su efecto con los navegadores que lo he probado, Chrome y Firefox. Quizá debas limpiar el navegador (eliminar cookies, caché e historial), y/o ver tu blog desde otro ordenador.

      Eliminar
    6. Diariamente hago "limpieza general" con CCleaner. Lo he visto desde otros ordenadores, y nada...
      ¿Tú lo ves bien? pues mira lo que me pasa a mí en tu blog: http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html#footer-wrapper (esa es la dirección que pone al darle a los botoncitos, en este caso bajar, y se coloca en el footer del blog sin efecto deslizante) exactamente lo mismo que en mi blog, pero con subir (...#outer-wrapper). Y en los elementos de la sidebar pasa igual (aquí añade # a la dirección del blog).

      En fin, creo que ya te estoy molestando demasiado. Muchas gracias :)

      Eliminar
    7. En esta entrada no se ve el efecto deslizante, pero es porque para poner el demo de los botones tuve que mover códigos aquí y allá de jQuery, pero si ingresas a otra entrada, por ejemplo a esta:
      http://ciudadblogger.com/2010/04/como-usar-dropbox.html

      Verás que el efecto deslizante funciona sin problema.

      Eliminar
    8. Sí, eso lo entendí :)
      Bueno, no sé como, pero de repente ahora está funcionando.
      No sé si tendrá que ver, que lo último que hice fue limpiar el Registro de Windows.
      La verdad es que no tengo ni idea, pero la realidad es que funciona.
      Muchas gracias, Potro por darme una solución, por tu atención y por tu paciencia :)

      Eliminar
  10. Saludos Potro:

    Ya instalé los botones y me quedaron fenomenal pero mi pregunta es una muy, muy simple (eso creo), jaja.

    Cuando le doy clic a tu botón de twitter (de esta entrada) me sale esto:

    Botones para compartir flotantes que se deslizan y flotan al bajar http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html vía @ciudad_blogger

    PEROOOOO, cuando yo le doy clic en mi blog sale algo asi:

    ¡EXCLUSIVA! Jullye Giliberti ¡en ¨11:11 En mi cuadra nada cuadra¨! | TVboricuaUSA http://www.tvboricuausa.com/2012/07/exclusiva-jullye-giliberti-en-1111-en.html

    Mi pregunta es: Que puedo hacer para que en vez de que salga ( TVboricuaUSA ) sin la arroba, me salga asi como lo tienes tu de... via @TVboricuaUSA?????

    ResponderEliminar
    Respuestas
    1. Hola TVboricua.USA, localiza el código de tu botón de Twitter, y después de esta parte:
      https://twitter.com/share"

      Agrega esto:
      data-via="TVboricuaUSA"

      Eliminar
  11. Excelente, hace días lo estuve buscando!!

    ResponderEliminar
  12. Bravo!, Coolerisisisisisimo el post Potro, ya me extrañaba que no hubiera post, pero la espera valio, se ve muy bueno el artículo.

    Aunque el los otros botones flotantes me gustan más, no llevan ningún script!

    ResponderEliminar
  13. Ah Potro por cierto, el efecto arriba/abajo con scriptaculous no funciona!

    ResponderEliminar
    Respuestas
    1. Muchas gracias Sergio. Los botones ahora no funcionan porque tuve que poner el script en esta entrada para el ejemplo :)
      Buen inicio de semana!

      Eliminar
  14. Hola @potro! Disculpa que te escribo esto en la entrada equivocada. Búsco unir dos templetes para blogger. O sea, a uno que es el que más me gusta, aplicarle algunas cosas como el slideshow en el front que tiene el otro. Entre otras cositas en la entrada. ¿Crees poder ayudarme? Podemos hablar privado? Estoy dispuesta a pagarte por este servicio, pues sé que tienes el tiempo muy limitado.

    Gracias antemano por tu respuesta. ¡Abrazos desde Quisqueya!

    ResponderEliminar
    Respuestas
    1. Hola Amandysha, todo depende de qué tanto quieras hacerle a la plantilla, si bien hay cosas que se pueden integrar hay otras que se tienen que crear desde que la plantilla se diseña.
      Si prefieres que sea en privado puedes enviar un mensaje desde la página de Facebook.

      Un abrazo.

      Eliminar
  15. Dejé un comentario y aún no lo veo ¿por qué?

    ResponderEliminar
    Respuestas
    1. Porque se están moderando, por eso no los ves de forma inmediata ;)

      Eliminar
  16. Hola! ya instalé los botones, y al parecer funcionan pero solo cuando veo los post individuales, me gustaría poder activar los botones en la página de inicio, en dónde debo ubicar el código? o solo funciona para los post?

    ResponderEliminar
    Respuestas
    1. Sólo funciona en los posts, se menciona eso en la entrada ;)

      Eliminar
    2. ups, perdón, no me fijé en eso, de todas formas me parece genial y lo estoy usando. Gracias de igual manera.

      Eliminar
  17. potro alguna manera de añadir alguna linea para que el anterior se convierta en este sin tener que buscar cada parte del codigo borrarla y pegar esta?

    ResponderEliminar
    Respuestas
    1. Nada es magia, si quieres estos botones tendrás que quitar los otros y poner estos, no te quitará ni 5 minutos ;)

      Eliminar
  18. OK me gusta... pero eso de moderar comentarios no me gusta!!

    ResponderEliminar
    Respuestas
    1. A mí tampoco, pero he tenido que tomar esa decisión dado que hay un par de usuarios que dejan enlaces a páginas con contenido malicioso en todas las entradas. Si no tomo esa decisión, nos cierran el changarro :(

      Eliminar
  19. ¡Hola Potro! Llevaba tiempo esperando este recurso sin embargo no me funciona:

    - He comprobado mi versión de jquery y la tengo actualizada.
    - No uso Scriptaculous.
    - He probado poniendo a 0px la distancia por la izquierda.
    - He probado a ponerlo debajo de div class='post-header'
    - He probado a ponerlo arriba de data:post.body

    ¿Qué estoy haciendo mal?

    ResponderEliminar
    Respuestas
    1. Habría que ver en cuál blog lo has puesto para saber qué puede estar yendo mal.

      Eliminar
    2. En mi principal:

      www.elultimoduelo.com

      Gracias potro.

      Eliminar
    3. Ponlo arriba de <div id='Fecha'> ahí puede funcionar.

      Eliminar
    4. Nada. Tampoco funciona :S

      Eliminar
    5. No lo veo puesto ahí. Si no te funciona en otro lugar ponlo en otra área cercana, tienes que probar varios lugares hasta que aparezca. Y recuerda entrar al post para ver si ya aparecen.
      Es lo malo de usar una plantilla muy personalizada :/

      Eliminar
  20. Como se menciona en la entrada, si no aparecen pon la /* Distancia desde la izquierda */ en 0px, si lo haces verás que aparecen, ya sólo tendrás que jugar con ese valor hasta que quede a la distancia deseada, posiblemente con un 20px se vea bien.

    ResponderEliminar
  21. Y yo sin saber de ti :)
    Otro abrazo!

    ResponderEliminar
  22. He escrito esta entrada: http://www.vvalcoi.com/2012/07/desde-el-polideportivo-otra-vez-oscuras.html
    Basándome en esta de otra web: http://www.diarioinformacion.com/alcoy/2012/07/07/robo-cables-inutiliza-tuneles-via-verde/1272426.html
    ¿Es ilegal? ¿Debería borrarla?
    Gracias.

    ResponderEliminar
    Respuestas
    1. Pues no, no la has copiado, sólo te has basado en ella, no hay nada de malo en eso ;)

      Eliminar
  23. Potro! ahi puse el codigo realice otras modificaciones y nada. Deje los codigos como estan en tu post. Saludos

    ResponderEliminar
    Respuestas
    1. No veo el segundo código, el que te mencioné que debías ponerlo arriba de:
      <div class='postmeta-primary'>

      Eliminar
    2. Ahi apareció pero no queda como lo tenes vos
      <------ Queda en el borde separado del post. Como lo puedo solucionar??? Gracias potro!

      Eliminar
    3. Juega con la /* Distancia desde la izquierda */ como se menciona en la entrada, posiblemente con un 20px se vea bien.
      Saludos!

      Eliminar
  24. Hola potro. Gracias por el aporte, es lo que estaba buscando pero hay un problema, ¡No se ven!.
    No se por qué puede ser. Yo seguí todo paso a paso.
    Te dejo mi blog:
    www.elblogdelclarinete.blogspot.com
    Gracias potro.
    Muy bueno tu blog.
    Hasta pronto y gracias.

    ResponderEliminar
    Respuestas
    1. Pon el último código arriba de <div class='post-body'>

      Eliminar
  25. Otra cosa. ¿Que es jQuery?
    Gracias de nuevo y hasta pronto

    ResponderEliminar
    Respuestas
    1. Es una librería de scripts para conseguir efectos, como el efecto de estos botones.

      Eliminar
  26. Tienes en tus entradas unas imágenes de ese sitio el cual ha sido detectado como un sitio que puede alojar contenido malicioso. Siempre que tomes una imagen súbela a tu propio alojamiento, así te evitarás ese problema, entre muchos otros.

    ResponderEliminar
  27. Hola , no encuentro ( class='post-header'> ) en mi templates y asi no puedo hacer mas trucos de lo que quiero hacer.
    podrias ayudarme a encontrar otro symblo que vale este symblo
    aqui te dejo mi blog andaluciashop.blogspot.com

    ResponderEliminar
  28. Hola , no ncuentro el class='post-header'>
    mi blog se llama ( andaluciashop) podrias ayudarme a encontrarlo

    graciass

    ResponderEliminar
    Respuestas
    1. Hola, pega el código arriba de:
      <div class='postmeta-primary'>

      Eliminar
    2. Hola potro, perdona por la molestia, pro tampoco encuentro el codigo class='postmeta-primary'>

      Eliminar
    3. ¿Has recordado marcar la casilla "Expandir plantillas de artilugios"?

      Eliminar
    4. Claro que si me he recardado expandirlas y buscar el codigo por (crtl + f) y tampoco encuentro nada, se pido k busca en el template de mi blog donde puedo copiarlo, porfavor.
      graciass

      Eliminar
    5. De tu plantilla es que lo he visto, por eso te he mencionado esa etiqueta, porque según tu plantilla ahí aparece:
      http://i46.tinypic.com/2z7mxkw.png

      Eliminar
  29. Estimado amigo Potro, espero que te encuentres bien, hace bastante tiempo que no visitaba tu página, hoy me veo en la obligacion de pedirte ayuda en un pequeño problema, se que lo que te pedire no tiene ninguna relevancia con este post y ante eso te pido perdon, bueno, resulta que hace poco volvi a cambiar plantilla en mi pagina y la verdad que me gusto mucho en como se ve, pero como nada es completamente perfecto tengo una pequeña disconformidad, agregue un gadget como menu pero me deja mucho espacio de margen entre cada una de las opciones y ocupa mucho espacio, quisiera saber como reducir esos margenes para que me queden un poco mas juntas las opciones, hechale un vistazo al menu de mi blog y veras a que me refiero... hasta pronto mi buen amigo, cuidece y gracias de ante mano...

    ResponderEliminar
    Respuestas
    1. Hola cesar1976, gracias por tu comentario.
      Agrega antes de ]]></b:skin> esto:
      .tabs-inner .widget li a {
      padding: .6em 1.0em;
      }

      Lo que está en negrita es el espacio de izquierda y derecha de cada elemento de la lista.
      Saludos.

      Eliminar
    2. Estimado amigo Potro, quedo excelente, muchisimas gracias...

      Eliminar
  30. Hola, buenas noches Potro.

    Te envío un enorme saludo.

    Preciosos están estos botones, muy útiles para quienes deseamos que nos compartan ;)

    Hoy quisiera preguntarte algo puesto que generosamente siempre me sacas de los enredos en los que me meto... Descubrí que los contenidos de las páginas de mi blog se duplican y no sé por qué :( supongo que de tanto jugar con el código terminé duplicando algo...
    La verdad no lo sé, ¿qué puedo hacer? ¿podrías ayudarme por favor?

    Te envío una lluvia de éxito. Amablemente,
    Lluvia

    ResponderEliminar
    Respuestas
    1. Hola Lluvia, con los artilugios expandidos revisa si esta etiqueta la tienes dos veces cerca del mismo lugar:
      <data:post.body/>

      Si es así elimina una de ellas, da Vista Previa y mira si todo está bien.
      Saludos.

      Eliminar
    2. Hola, buenas tardes.

      Como siempre, tu ayuda es muy oportuna :) ¡Muchisisisisismas Graias! Ha quedado genial, ya no se duplican los contenidos.

      Te envío una lluvia de éxitos. Amablemente,
      Lluvia

      Eliminar
    3. Me alegra que se haya resuelto, que tengas un lindo fin de semana.

      Eliminar
  31. ¿Crees que este truco se puede aplicar a pantallas pequeñas? Lo que pasa es que no se ve entero, sino que se ve entrecortado, ya que la pantalla que tengo es pequeña....

    Si se hace entonces... ¿Cómo se haría?

    ResponderEliminar
    Respuestas
    1. Me temo que no Abraham, en resoluciones pequeñas siempre los elementos que están "fuera" son los que o no se ven, o se ven incompletos :/

      Eliminar
  32. Hola amigo. oye una pregunta como puedo dividir la cabezera de una plantilla en dos, osea lo que quiero hacer es que quede un gatget para añadir un banner con publicidad u otra cosa ya intente con tu post de dividir cabezera pero no me sale.

    Mira aqui te dejo la plantilla para ver si tu puedes dividirla en dos asi como te digo. Porfavor. http://dl.dropbox.com/u/44776682/templatedownload2.xml

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola PontePlayMx, deja en esa entrada que mencionas el blog donde lo estás haciendo para no desviarnos del tema de esta entrada.
      Saludos.

      Eliminar
  33. se que lo que te dire no es nada relacionado con este tema pero perdon la molestia voz os podia decir si hay alguna forma de redireccionar un blog es decir que no termine en blogspot.com sino que termine en simplemente en .com o algo similar gracias y pos perdone por referirme a lo que no tiene que ver nada con este tema :)

    ResponderEliminar
    Respuestas
    1. Hola mundogotic, sí se puede, tienes que comprar un dominio y así tendrás la extensión que desees.
      Saludos.

      Eliminar
  34. Están geniales amigo.

    ResponderEliminar
  35. Gracias por tu comentario Angel. Las plantillas originales de Blogger no tienen ninguna presentación, quizá las que has visto son personalizadas y les han añadido un slider. Mira en la categoría "Slideshows" ahí verás algunas opciones.

    Saludos.

    ResponderEliminar
  36. Hola admin, no veo los códigos puestos en ese blog.

    ResponderEliminar
  37. OIGAN, SABEN COMO PONER UN BOTON DE ME GUSTA EN LA IZQUINA INFERIOE DERECHA DE MI BLOG ? ALGO ASI COMO LO QUE ESTA AQUI QUE DICE ¿Te gusta Ciudad Blogger? ASI O SOLO EL BOTONSITO, PERO SABEN COMO ?

    ResponderEliminar
    Respuestas
    1. Aquí está la entrada sobre esos botones:
      http://ciudadblogger.com/2012/01/botones-flotantes-para-recomendar-el.html

      Eliminar
    2. Muchisimas gracias, tengo un blog es dominio .com y recive entre 5,000 y 7,000 visitas al dia, les interesaria una afiliacion ?
      http://www.modsmexicanosfull.com/

      Eliminar
    3. Gracias, pero no participamos en esos programas de intercambio :)

      Eliminar
  38. Potro, tengo un problema menor y no sé en qué entrada dejarlo. Resulta que el buscador de mi blog no me deja eliminar el título y darle a guardar, me obliga a ponerle un título y quisiera quitarlo de alguna forma. Probé borrándolo de la plantilla directamente y los cambios se guardaron pero volvieron a aparecer...

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Jorge, expande los artilugios de tu plantilla, localiza el título de tu gadget, verás un poco abajo esto:
      <h2 class='title'><data:title/></h2>

      Elimínalo y desaparecerá el título del gadget.
      Saludos.

      Eliminar
  39. Potro mi problema no tiene nada que ver con este pots, mita tenia una plantilla y la cambia por otro pero la antigua me dejo 3 gadgets que quiero eliminar pero no ti tienen la opcion de eliminar.
    mi blog es: http://videospacion.blogspot.com/
    los gadgets que quiero eliminar son unos que tienen imagen y se pone la url de la entrada. uno se llama, videos amateur, videos de famosas, peliculas porno y revistas esos son los que quieron quitarlos pero no me da la opcion.

    ResponderEliminar
    Respuestas
    1. Hola videosxxx, elimínalos directo de la plantilla. Sin expandir los artilugios busca el título de cada gadget, verás que cada título está en una línea que comienza con <b:widget
      Elimina esa línea y se irá el gadget.

      Eliminar
  40. :/ ya intente todo y no me sale nada de nada T________T si pudiera ayudarme se lo agradeceria T_______T
    mi blog es :http://anime-renders.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No veo que hayas puesto ese último código, revisa si lo tienes dos veces, si fuera así ponlo también en el otro, en el repetido.

      Eliminar
  41. hola potrillo acabo de poner los codigos como mencionas en este post pero no me sale incluso intente lo que aclaras al final poner la /* Distancia desde la izquierda */ en 0px pero no me saleee..!
    no se k hacer potrillo ayudame
    este es mi blog : http://studiosjadesign.blogspot.com
    Gracias de antemano potrillo .. Soy tu fan !

    ResponderEliminar
    Respuestas
    1. Gracias Jean Philipe, el segundo código ponlo arriba de:
      <div class='postmeta-primary'>

      Saludos.

      Eliminar
  42. Saludos Potro:

    Sé que no es del tema, pero no sabía donde preguntarte... No puedo ver los vídeos que tengo en la sidebar izquierda de mi blog. Me sale una imagen negra. ¿Sabes porqué es? Me falta un plugin, o es un error de la plantilla? Please, help me.

    :) http://TVboricuaUSA.com

    ResponderEliminar
  43. Ah, y se me olvido comentarte que no es sólo en mi blog Potro, sino, en todas las páginas que entro. ¡Sólo puedo ver vídeos en YouTube! ¿Porqué será?

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. Si no los ves en ningún blog es tu navegador, quizá necesites actualizar la versión de Flash.

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

    ResponderEliminar
  45. potro encontro esa linea pero cuando la elimino me da esto error
    bX-jah6mb

    ResponderEliminar
  46. hola ptoro soy completamente nuevo aqui me encanta tu trabajo me ayuda demasiado ... pero u problma tengo una plantilla instalada una que tu hiciste y no puedo encontrar : div class='post-header' que hago ??

    ResponderEliminar
    Respuestas
    1. Hola Oscar, ¿cuál es el blog donde no lo encuentras?

      Eliminar
    2. perdona es www.vinevolando.blogspot.mx si me pudieras auxiliar seria de mucha ayuda :)

      Eliminar
    3. Hola de nuevo Oscar, pon el código debajo de:
      <div class='post-header-line-1'/>

      Si no funcionara busca otra línea igual a esa y aplica el cambio también ahí.
      Saludos.

      Eliminar
    4. si ese es el problema que no encuentro esa linea .. que puedo hacer.. no aparece en el codigo html

      Eliminar
    5. Sí está, pero recuerda que tienes que marcar la casilla "Expandir plantillas de artilugios".

      Eliminar
  47. Hola Potro...
    intente usar el código, pero no hay caso para que funcione.
    Intente con las aclaraciones que pusiste al final, pero nada..
    que podrá ser?
    Mi blog: http://www.fmsentimientos.com.ar/

    Saludos

    ResponderEliminar
    Respuestas
    1. No veo los códigos puestos, pero además en el caso de tu plantilla el segundo código debes ponerlo donde se indica en el comentario #25.1

      Eliminar
  48. Saliendo del tema, ¿conoces de la técnica llamada Scroll Parallax? Me ha gustado mucho, pero no sé si se pueda aplicar a un blog.
    Mira >> http://www.zonaw.com/scroll-parallax/

    ResponderEliminar
  49. NO PUEDO CREER QUE RESPONDAS TODOS LOS COMENTARIOS XD DEBE SER DIFICIL .-.,COMO SEA EH ESTADO BUSCANDO ALGO, ENTRA A ESTE BLOG
    http://www.altogta.net/
    AL PASAR EL CURSOR POR UNA IMAGEN TIENE UN EFECTO COMO DE SOMBRA, O AUMENTA LA LUZ O NO SE QUE SEA, TIENES ALGUN TUTORIAL DE ESO? YA EH BUSCADO Y ENCUENTRO OTRO TIPO DE EFECTOS PERO NO ESE QUE QUIERO

    ResponderEliminar
    Respuestas
    1. Sólo le han agregado un poco de opacidad a las imágenes, añade esto en los estilos de la plantilla para tener el mismo resultado:
      a:hover img {
      filter:alpha(opacity=80);
      -moz-opacity: 0.80;
      opacity: 0.80;
      }

      Eliminar
    2. Wow, si funciono :P, pero solo se le agrego el efecto a las imagenes con enlace :P, como se podria hacer para ponerlo a imagenes sin enlace ?

      Eliminar
    3. Cambia esto:
      a:hover img {

      Por esto:
      a:hover img, img:hover {

      Eliminar
  50. Hola potro :)
    hace mucho que no me paso por aqui pero quiero cambiar el estilo de mi blog, y tengo un problemita, queria saber si me podias ayudar
    quisiera poder usar el estilo completo del simstema de comentarios y las entradas de esta template en esta template y no puedo D:
    me sale el mismo sistema de lock heart pero rarito asi que elimine todo del blog de pruebas. espero que respondas

    ResponderEliminar
    Respuestas
    1. Hola simsinspring., exactamente como está no quedará ya que la estructura en ambos es completamente distinta, sin embargo se puede ver un poco similar si agregas estos estilos:
      #comments-block .comment-author {
      background: white;
      border: 1px solid #CCC;
      border-bottom: none;
      }
      #comments-block .comment-body {
      background: white;
      border: 1px solid #CCC;
      border-top: none;
      }
      .comment-form {
      max-width: 850px !important;
      _width: 810px;
      clear: both;
      }

      Eliminar
    2. hola :) gracias, pero entonces el estilo magazine de la primer template para las entradas no se puede poner en la otra?

      Eliminar
    3. Pues las entradas tiene el mismo formato en la portada, o al menos es muy similar, si te refieres que tenga tres columnas en lugar de dos entonces reduce el width que está dentro de .box{ hasta que quepan tres columnas.
      Ese mismo ancho también tendrás que cambiarlo donde dice var image_size=330;

      Eliminar
  51. Buenas tardes!
    Es posible ponerlos en el lado contrario? Es decir ponerlos a la derecha de la página?

    Gracias de antemano por todos los aportes.

    ResponderEliminar
    Respuestas
    1. Buenas tardes, para ponerlos a la derecha cambia:
      left: -100px;

      Por:
      right: -100px;

      Eliminar
  52. Hola de nuevo.. como andas? espero que bien, te queria consultar si hay alguna forma de saber que codigos y estilos que añadimos al blog estamos usando y cuales no??
    Yo ahora entiendo bastante, pero cuando empece con esto agregaba cosas a mi blog y muchas no funcionaban, ahora creo que debo tener varias cosas de mas.. :/
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Lucas, eso es difícil que yo te lo diga pues sólo tú sabes qué tanto has agregado.
      Lo que puedes hacer es tomar la clase o ID que tiene el estilo y buscarla en un contenedor (dentro del BODY). Por ejemplo, si tuvieras esto:
      #cajaRoja {
      ...
      ...
      }
      Entonces buscarías si en tu plantilla tienes algún elemento que tenga como ID "cajaRoja", sino fuera así entonces es probable que ese estilo ya no lo estés usando.
      De cualquier manera procura hacer un respaldo de la plantilla por si vieras que eliminaste algo que sí necesitabas.

      Eliminar
    2. Claro claro.. bueno voy a probar con eso! como siempre muchas gracias!

      Eliminar
  53. Gracias potro todo me salio de maravilla

    ResponderEliminar
  54. ey potro una pregunta. ya instale los botones pero al twittear me sale asi
    Pasala Rebien: ¡Escándalo! Uniformes olímpicos de EEUU son “made in China” (FOTO) http://pasalarebien.blogspot.com/2012/07/escandalo-uniformes-olimpicos-de-eeuu.html
    y ati te sale asi
    Botones para compartir flotantes que se deslizan y flotan al bajar http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html vía @ciudad_blogger
    quiero que tweet salga como el tuyo sin el nombre de la pagina y que salga via @PasalaRebien

    ResponderEliminar
  55. Hola, hace poco me comentaste sobre el tema del calendario (que había un espacio)

    Ahora vengo a comentarte si me podrias ayudar con los botones, ya que cuando abro un hilo, los botones tapan la mitad del calendario...

    http://lasalainformatica.blogspot.com/

    Salu2

    ResponderEliminar
    Respuestas
    1. Hola Valentin, debajo de:
      left: -100px; /* Distancia desde la izquierda */

      Agrega:
      top: 50px;

      Eliminar
  56. ESPERO Y ESTA SEA MI ULTIMA DUDA JEJE,
    EN MI BLOG LA MAYORIA DE MIS VISITANTES SON CHAVALES DE 8 A 15 AÑOS Y A MUCHOS LES GUSTA COMENTAR TONTERIAS CON OBSCENIDADES, QUIERO SABER SI HAY FORMA DE EDITAR LOS COMENTARIOS DE MI BLOG :P

    ResponderEliminar
  57. Hola! Mira Potro me gustaria saber, como hacer que los bordes superiores del blog se vean redondeados y no sean cuadrados. Mira le dejo este blog para que lo entienda http://warinmyheart.blogspot.com.es/
    Si pudiera responderme o hacer un post sobre esto,se lo agradeceria seguro que le interesa a mucha gente
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Drea, ¿en cuál blog lo quieres hacer? ya que el código depende del tipo de plantilla.
      Saludos.

      Eliminar
  58. Buenas potro, te escribo para felicitarte por tu trabajo y para pedirte ayuda sobre una petición que tengo, querría colocar al final de la plantiya de mi blog una barra en la que pudiera poner 6(por ejemplo) imágenes, para así enlazar los blogs de mis amigos con sus banners. ¿Como podría hacer eso?

    ResponderEliminar
    Respuestas
    1. Depende dónde quieras ponerlo exactamente. La parte más al final de una plantilla es </body> así que antes de ese código podrías ponerlos.

      Eliminar
    2. Y, ¿cual sería el código que debería poner?, ¿src=imagen y la direcciono? ¿como las ajusto para el tamaño con botton?

      Eliminar
    3. El código de una imagen con enlace es este:
      <a href="URL del enlace"><img src="URL de la imagen" width="125" height="125" /></a>
      Ahí debes colocar donde se indica la URL de la imagen y la del enlace, también verás el width y height, ambos son el ancho y alto respectivamente.

      Puedes usar una tabla HTML en caso de que quieras que las imágenes estén alineadas horizontalmente:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

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

      Eliminar
    5. He tenido que eliminar el comentario por el aviso que está al final.
      El gadget de perfil no se puede cambiar mucho mas que en aspecto, pero puedes crear un gadget HTML/Javascript y ahí poner todo lo que quieras, incluyendo la info del autor así como los enlaces de suscripción que deseas.

      Eliminar
  59. Hola Potro! Disuclpa que te moleste, pero estuve editando mi web y y por agregarle nuevas cosas otras desaarecieron :(
    -Tenia un slide en la cabecera y de la nada dejò de funcionar y solo quedò uno solo estàtico :(
    -Yo soy de editar Gifs y ya no se reproducen :( estuve tratando de ver el porquè pero ya no funcionan :( estos son los gif, quedaron quietos :( > http://bit.ly/NvnkkN
    -En la pàgina principal yo dejaba ver de a 10 entradas y ahora de la nada se quedò en 2 entradas :( intentè modificarlo desde la plantilla pero no funciona de la forma en la q lo hice :/

    NO SÈ PORQUE TODO CAMBIÒ :( POR FAVOR AYUDAME!!

    ESTE ES MI BLOG http://bit.ly/KeudFI

    ResponderEliminar
    Respuestas
    1. Hola @LaaChaamy ★, siempre que hagas cambios en la plantilla debes hacer un respaldo de la misma, verás cómo te salvará de muchos corajes.
      No veo ningún slider en la cabecera, así que no sé cómo funcionaba o a partir de qué cambio dejó de funcionar.
      Los GIF animados veo varios, tanto en los fondos de los títulos de la sidebar, como de algunas entradas, no sé cuántos deberían moverse pero sí veo algunos que lo hacen.
      El número de entradas tiene que ver con la velocidad de carga del blog:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Eliminar
  60. Potro me gustaria hacerlo en mi blog es la plantilla Simple
    anyjustme.blogspot.com
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Drea, en esa plantilla agrega en los estilos, es decir, antes de ]]></b:skin> esto:
      .content-inner, .content-outer {
      border-radius:300px;
      }


      300px es el tamaño del borde y lo puedes modificar por la medida que quieras.
      Saludos.

      Eliminar
  61. Hola potro, mi blog es talentoemocionalysocial.blogspot.com, quiero poner esto pero la verdad no me ha funcionado. a lo mejor tenga que ver con el resto de artilugios que le he puesto y ahora obstaculizan este artilugio

    ResponderEliminar
    Respuestas
    1. Yo lo veo funcionando bien Daniel, recuerda que sólo se ven al ingresar al post, así que si entras a uno verás que ahí aparecen.

      Eliminar
  62. Muchisimas gracias!!

    ResponderEliminar
  63. Hola potro! gracias por todas las entradas que publicas sos la mejor ayuda que puede haber, intente poner el codigo y consegui que apareciera, pero quiero que el los botones esten un poco mas abajo. que parte tengo que modificar? mi blog es http://winterstorm-argentina.blogspot.com.ar gracias!

    ResponderEliminar
    Respuestas
    1. Hola Ruu, gracias por tu comentario.
      Debajo de #BotonesFlotantes { agrega:
      top: 50px;

      Puedes poner un valor más alto si lo deseas.

      Eliminar
  64. Hola Potro
    muchas gracias por tu ayuda siempre y espero que sea paciente conmigo por mi inculto en este punto..
    primero yo cuando buscaba el codigo ... class='postmeta-primary'>
    no lo encontraba en mi template principal aqui www.andaluciashop.blogspot.com
    pero lo encontre en los codigos de la pagina de una entrada aqui http://andaluciashop.blogspot.com/2012/06/samsung-galaxy-s3-only-4500-le.html

    el problema ahora que los codigos de la pagina de las entradas no puedo editarlos para poner el codigo arriba de class='postmeta-prima'>

    la pregunta donde puedo agregar el codigo ((class='postmeta.....)) en mi template principal??
    o como puedo Expandir plantillas de artilugios de una entrada ( pagina de entrada)

    muchas graciass y espero tu respuesta
    sigo al contacto

    ResponderEliminar
    Respuestas
    1. Hola Andalucia mobile shop, en Blogger sólo hay una plantilla para todo, no es como WP que hay una para las entradas y otra para la portada, todo lo que ves en el HTML de Blogger es toda la plantilla del blog. Si hubiera un código que se ejecuta sólo en las entradas aun así debe aparecer en la plantilla general.
      Saludos.

      Eliminar
  65. potro me gustaria que hicieras un post de como usar el ajax y jquery para hacer esto
    http://dl.dropbox.com/u/90415204/Sin%20t%C3%ADtulo.png
    http://dl.dropbox.com/u/90415204/esto.png

    ResponderEliminar
    Respuestas
    1. Tengo una entrada de esos tabviews sin jQuery, ya después publicaré uno con esa librería.

      Eliminar
  66. Buenos dias, estoy intentando poner estos botones en mi blog pero no me salen, he hecho todos los pasos pero no me salen. ¿Podrían echarme una mano por favor?

    ResponderEliminar
    Respuestas
    1. Hola Desafío Cantabria, me encantaría ayudarte pero sin saber en cuál blog lo has puesto no puedo hacerlo :(

      Eliminar
  67. Hola Potro, sos una MASA, como siempre... respondiendo todo. GROSO!

    Amigo, despues de que probe 10 formas mínimo, porque el BOX no aparecía, logré que aparezca...

    Pero adivina qué. No se mueve :(
    No se "scrolea" para abajo (o arriba) cuando me muevo.

    Eso que puede ser?

    Ojala se te ocurra algo, yo de jquery cero, por eso no me animo a probar nada. :(

    Un gusto viejo!
    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola masFB, puede ser que tengas otra versión de jQuery en la plantilla, o que estés usando Scriptaculous, ambos enlaces están al final de la entrada.
      Saludos.

      Eliminar
    2. No, hasta donde yo se no uso Scriptaculous.
      Qué versión de JQuery necesita este codigo para que funcione?

      Hay forma de separar el código a un archivo .js ?
      La verdad es una lastima que no me ande :(

      Saludos amigo y gracias por tu respuesta!

      Eliminar
    3. La versión de jQuery ya está incluida en el código, si ese no es el problema o Scriptaculous entonces tendría que ver dónde lo has puesto.

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

    ResponderEliminar
    Respuestas
    1. He entrado a tu blog pero no veo que tengas estos botones ahí.

      Eliminar
  69. Hola Potro, queria preguntarte si hay manera de que éstos botones se puedan ver bien en mini laptop. Ya que ingreso a mi blog y al tuyo desde una mini laptop, y en el mio los botones se ven encima de la entrada y en tu blog se ven incompletos. Habrá una manera de acomodar eso?. O si no me conformaría con tener los botones de compartir debajo de cada entrada pero con botones más grandes, y no con los que trae blogger por defecto.

    ResponderEliminar
    Respuestas
    1. Hola GaMg., eso depende del ancho de tu blog y de la resolución de tu monitor. Otra opción es que pongas los botones a la derecha (ver comentario #52.1), quizá ahí los aprecies mejor.

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

    ResponderEliminar
  71. Elimina esta línea:
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>

    Como ya tienes otra versión de jQuery no hace falta repetirlo.

    Les puedes poner una opacidad, pero el problema es que esa opacidad se aplicaría también a los botones, por lo que lo conveniente sería que en lugar de que uses un color de fondo pongas una imagen semi transparente.

    ResponderEliminar
  72. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Prueba quitar los otros botones, quizá porque tienes esos no dejan que estos se muestren bien.

      Eliminar
  73. Entonces quizá debas poner el script de Scriptaculous en otra ubicación, podría ser justo después de <head> o justo después de </head>

    Con la imagen sólo es cambiar esto:
    background-color: #FFF; /* Color de fondo del contenedor */

    Por esto:
    background: url(URL de la imagen);

    ResponderEliminar
  74. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Haz lo que te decía anteriormente, quita los otros botones. Es posible que por eso se vean de esa manera.

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

      Eliminar
    3. Quita todos estos estilos:
      .twitter-share-button {
      border-left: 1px solid #CCCCCC;
      border-right: 1px solid #CCCCCC;
      margin-left: 56px;
      margin-right: 23px;
      padding-left: 23px;
      padding-right: 10px;
      width: 110px;
      }

      Acabo de ver que son esos los que hacen que tu botón de Twitter se vea de esa manera.

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

    ResponderEliminar
  76. Podríamos Agregar el de Pinterest? y Como lo podemos hacer que lo he intentado pero no me ha podido funcionar!

    ResponderEliminar
    Respuestas
    1. Mira el enlace que está en la entrada de los otros botones, ahí viene el código del botón de Pinterest, sólo deberás agregar el código del botón antes del cierre del DIV como se indica en la entrada.

      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