Botones de Redes Sociales con sprites y transiciones CSS3

2 de junio de 2014 198 comentarios ,

Esto me lo han pedido muchos lectores de este blog, y son los botones para las redes sociales que actualmente uso, y como lo prometido es deuda, y ya no me quiero endeudar más, pues aquí va.

Estos botones son para enlazar tus redes sociales: Facebook, Twitter, Google+, RSS Feed, y suscripción por correo.
Lo que a muchos les resulta atractivo es el efecto que tienen cuando se pasa el cursor sobre ellos, ya que el ícono se mueve hacia arriba mientras el fondo cambia de color.

Este gadget lo veremos en dos versiones, uno con 5 botones pequeños alineados de forma horizontal, y otro de 4 botones un poco más grandecitos y alineados en dos columnas. Están hechos con sprites y transiciones CSS3.

Cualquiera de las dos versiones las vamos a colocar de un solo paso, es decir, pegando tanto los estilos como la estructura HTML dentro de un gadget, ¿por qué? por pereza nada más, pero quien quiera poner los estilos en su lugar correspondiente de la plantilla podrá hacerlo sin ningún problema.
Entonces, para ponerlos en tu blog, entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el código de los botones que más te gusten.

Este es la primera versión de 5 botones.


Y este es el código que has de pegar en tu gadget:
<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
}
</style>
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>


Esta es la otra versión, la de 4 botones.


Y este es el código que pegarías en tu gadget HTML/Javascript.

<style>
/* Botones de Redes Sociales - Ciudad Blogger */
.social_bookmarks_container {
width:176px;
height:176px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:right;
margin:0;
padding:0;
}
.social_bookmarks li{
margin:0 0 1px 1px;
height:77px;
width:77px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:77px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:77px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s000/icon-rss.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s000/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s000/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -77px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -77px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -77px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -77px; background-color: #ff6600;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s000/icon-social-reflect.png) no-repeat;
}
</style>

<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>

Fácil y rápido, ¿no? Lo único que resta hacer es poner tus nombres de usuario de cada red social donde se indica en color rojo.
En el caso de la primera versión deberás poner el nombre de tu feed de Feedburner donde se indica, y por supuesto tener activada la suscripción por correo electrónico en Feedburner.

Y si no te gustan los colores, también puedes cambiarlos. Los códigos hexadecimales que están en negrita son los colores en su estado normal, y los que están en color naranja son los colores al pasar el cursor.

Y ahora sí, es todo.


198 comentarios en:

" Botones de Redes Sociales con sprites y transiciones CSS3 "

  1. Me gustan muchos tus botones Potro, simplemente... perfectos :3, gracias por compartirlos.

    ResponderEliminar
  2. Gracias,maravilloso no tener que tocar la plantilla para nada.Si quisiera poner el icono de youtube que tendría que poner.

    ResponderEliminar
    Respuestas
    1. Tendrías que crear un nuevo sprite, puedes tomar cualquiera de las URLs como ejemplo para guiarte, y luego la sustituyes por el botón que no quieras:
      http://lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png

      Eliminar
  3. hola que tal... me gusto mucho esta entrada,gracias por compartirla. pero ahora tengo una pregunta tal vez no sea nada que ver con este post pero quisiera saber como poner los numeros en los comentarios como los de aqui,mas bien numerarlos. saludos hasta luego

    ResponderEliminar
    Respuestas
    1. Hola Raven, busca en Oloblogger, ahí tienen una entrada sobre ese tema. Saludos.

      Eliminar
  4. Muy buenos estos botones ya los agregue a mi pagina, los he tenido que modificar un poco agregandole el target="_blank" y title a cada uno de ellos, gracias potro.

    ResponderEliminar
  5. Bonitos botones Potro, que bueno que estés de vuelta.

    Oye no tienes un tutorial para poner los artículos relacionados y los botones para compartir así como los tienes tu?

    Saludos!!

    ResponderEliminar
    Respuestas
    1. Hola Obed. Todo el conjunto del post-footer como lo tengo no, pero sí tengo el post sobre las entradas relacionadas: http://ciudadblogger.com/2009/07/entradas-relacionadas-en-blogger.html

      Lo que yo he hecho es poner una tabla HTML y dentro poner las entradas relacionadas junto con los botones:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
    2. Gracias Potro, voy a aprobar a ver como queda.

      Eliminar
  6. Mil gracias! Llevaba tiempo buscando algo como esto en un estilo un poco más agraciado. Si quiero eliminar una de las opciones de la primera versión (G+), ¿qué líneas tengo que cargarme?

    Saludos!

    ResponderEliminar
    Respuestas
    1. Saludos Jolan. Sólo elimina todo el LI correspondiente al botón que no quieres, en el caso de Google+ quitarías esta parte:
      <li class='icongplus'>
      <a href='http://plus.google.com/+usuario/about'>
      Google Plus
      </a>
      </li>

      Eliminar
  7. Que bueno, pero, ¿Hay forma de poner las imágenes del horizontal más pequeñas?

    ResponderEliminar
    Respuestas
    1. Hola Danny. Si quieres los íconos más pequeños reduce el width y height que está dentro de .social_bookmarks li {
      Lo mismo con el width y min-height que está dentro de .social_bookmarks li a {
      Luego, en todas las URLs de las imágenes reduce la parte que dice /s114/ ponle un valor más bajo.
      Por último reduce todos los -57px que están debajo de las URLs de las imágenes.

      Eliminar
  8. Hola! Gracias wey por compartirlo, esos botones son geniales!

    Saludos!

    ResponderEliminar
  9. ¿Sería posible hacer que los cuadrados fueran círculos?

    PS: se te echaba de menos por estos lares!

    ResponderEliminar
    Respuestas
    1. Claro, si quieres que sean redondos sólo agrega debajo de .social_bookmarks li { esto:
      border-radius:77px;

      PS: Yo también los echaba de menos :)

      Eliminar
  10. Disculpe las molestias jamas me respondiste mi pregunta ya la hice en la entrada correspondiente...

    ResponderEliminar
    Respuestas
    1. Hola Adrian, la pregunta la respondí el día 28 de mayo en el comentario #859.1
      Tienes que dar click en el botón de abajo que dice "Cargar más", dale click hasta que el botón desaparezca, así podrás ver tu comentario y la respuesta que te he dejado.
      Saludos.

      Eliminar
    2. Ahora lo ví jamas me percate del boton Cargar mas... gracias xD

      Eliminar
  11. Me encanta como quedan pero como hago para que aparezcan bajo cada entrada? ya lo he intentado moviendo el gadget de lugar pero no me resulta :/ gracias! :)

    ResponderEliminar
    Respuestas
    1. Hola glowcher, estos no servirán para compartir las entradas, son únicamente para enlazar tus redes sociales. Si de cualquier manera quieres ponerlos debajo de los posts sólo pega el código debajo de la etiqueta <div class='post-footer'> estando en la Edición de HTML de tu plantilla.
      Toma en cuenta que esa etiqueta podrías tenerla dos veces, si no ves resultados pon el código también debajo de la línea repetida que encuentres. Saludos.

      Eliminar
  12. Muy bueno como siempre potro! Son de lo mas bonitos tus aportes.
    Te hago una consulta xq veo que esta medio olvidado creo el tema este...estaba tentado de poner un botón para agregar a favoritos mi blog ( discografiasmega.blogspot )y vi que solo funcionan para algún navegador y depende de las versiones....hay algo tipo universal ( para todos los navegadores ) o sigo buscando opciones ?
    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola BaTo LoCo, estoy al igual que tú, sólo conozco esos, los que son para ciertos navegadores, pero ninguno que se aplique para todos.

      Eliminar
  13. Muchas gracias por tus trucos potro sin duda eres el mejor, sigo tu blog desde hace mucho y siempre que colocas algo nuevo es util para todos, gracias por tu tiempo.

    Te queria preguntas algo me gusto muchisimo estos botones y los quiero para mi blog pero quiero la segunda opcion la de los 4 botones pero quiero reemplazar el primer boton atom por el de youtube para que me quede asi:

    Youtube, Twitter, Facebook y Google Plus lo he intentado tocando todo pero no hay manera siempre me da algun error, espero me puedas ayudar cuanto tengas un poco de tiempo libre gracias

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Howard. Mira el comentario #2.1, ahí lo he mencionado, es solo cambiar la URL de la imagen por otra que tú hagas, no hay que hacer más cambios.

      Eliminar
    2. Muchas gracias por tu respuesta y ayuda potro, al final he conseguido cambiar la imagen pero me queda el efecto mal no entiendo porque, me puedes ayudar un poco, te paso el enlace y las imagen de youtube que quiero.

      http://entraparanada.blogspot.com.es/2014/06/prueba-redes-sociales.html

      Aqui la imagen pero no puedo

      http://www.mainpre.net/images/YOUTUBE.png

      a ver si me puedes orientar un poco porque me gusta mucho estos botones, muchas gracias

      Eliminar
    3. Está bien, lo que sucede es que tu imagen sprite no está muy bien alineada, es decir, si abres tu imagen verás que el logo de YouTube de abajo está más a la derecha (ligeramente en realidad) que la que está arriba, por eso al pasar el cursor se ve que hace como esa curvatura en la transición.

      Eliminar
    4. Howard me he creado esta imagen para el botón de Youtube https://lh3.googleusercontent.com/bM77Vt0GjkXcQFEnNGzhcAm4gLQVdX8jBN1bFR-qH18 puedes probar.

      Eliminar
  14. ¿sabes?, jaja, llevo desde que los vi queriéndotelo preguntar, pero ya sabes, me daba corte, jeje...¡Gracias! A mí me encantan así, en color gris.
    MMMUAAA, jaja
    (Ya lees hasta el pensamiento de los que te seguimos, Potro ;) XD
    Infinitas gracias otra vez.

    ResponderEliminar
  15. Otra vez yo, Potro, jeje, la pregunta de rigor. Ya los he puesto, he cambiado el botón del feed por el de la suscripción por correo, funcionan, pero no sé por qué no se ven los iconos del correo y de twitter. ¿te importa ayudarme, por favor?
    Por lo demás, genial.
    Muchas gracias, :)

    ResponderEliminar
    Respuestas
    1. Hola guapa, me gusta decir que leo el pensamiento pero la verdad es que esta vez fueron muchos usuarios los que me lo solicitaron y ya sabes que no me puedo negar :)
      Lo que ha sucedido con tus botones es que en esta parte del código has dejado pegado el código del color junto con la parte donde va la URL de la imagen:

      .social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}

      Debe ser así, con un espacio entre los dos:
      .social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}

      Eso es con el botón de Twitter. Con el de RSS la clase no es la correcta, tienes esto:
      <li class="iconrssmail">

      Y debe ser así:
      <li class="iconrss">

      En caso de que te haya confundido más, también puedes copiar y pegar el código de nuevo y todo saldrá bien ;)
      ¡Besos!

      Eliminar
    2. Siempre me pasan despistes de estos, no sé qué haría sin ti, mil infinitas gracias, Potro. Corrijo ahora.
      Un beso.

      Eliminar
    3. Ya está arreglado, Potro. Muchas gracias. Ahora quisiera preguntarte si es posible cambiar el botón del feed por el de la suscripción por correo. Esta mañana me funcionaba la suscripción (cuando no funcionaba a la vista el botón) . Ahora he intentado cambiar todo lo que habría que cambiar de un código a otro...pero por favor, mira cómo ha quedado...ayyy, te he destrozado el botón!!...:(
      :)

      Eliminar
    4. Olvida lo anterior, por favor, voy a dejar lo del feed y cancelar la suscripción por correo, nunca me ha hecho mucha gracia, :)
      Copio de nuevo tu código completo y dejo de toquetearlo.
      Muchas gracias, Potro, infinitas de verdad.

      Eliminar
    5. Vale, pero si decides intentarlo de nuevo sabes que con gusto te ayudaré.
      Un beso.

      Eliminar
  16. Hola potro. llevo mas de 4 años visitando tu blog. pues siempre publicas cosas muy interesantes. hoy solo te digo que es hora de que incies a publicar contenido sobre las vistas dinamicas de blogger como mejorarlas a nuestro gusto. tambien puede ser como hacer que nuestro tema sea responsive. esos temas me llaman mucho la atencion ya que actualmente la mayoria de trafico proviene de dispositivos moviles, y que mejor que tener nuestro sitio bien adaptado a estas nuevas tecnologias. saludos y gracias espero temitas asi por el estilo

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Ma levi. Con las Vistas Dinámicas no es que no tenga ganas de publicar sobre ellas, es que lamentablemente muy-muy poco se les puede hacer, no son plantillas personalizables, la mayoría de los códigos que se agregan dentro de su HTML no se ejecuta por lo que cambiar su aspecto y estructura está en chino. Pero hay una entrada sobre personalizar la cabecera, no sé si ya la habrás visto.
      Sobre el diseño responsive sí tengo contemplado publicar al respecto pues es algo ya casi obligado para cualquier webmaster debido a lo que bien has mencionado, la gran afluencia del tráfico que llega desde dispositivos móviles. Espero no tardar mucho en publicar sobre ello. Saludos.

      Eliminar
  17. quetal potro quisiera saber como puedo poner un logo a mi blog en la cabezera

    ResponderEliminar
    Respuestas
    1. Hola Adrian, usa el gadget que viene por defecto, el de "Cabecera", ahí le das click (estando en Diseño) y verás la opción de subir una imagen.

      Eliminar
  18. Como haces para que el numero de comentarios te aparezca en la parte superior (con el fondito cuadrado)

    ResponderEliminar
    Respuestas
    1. Sólo lo he cambiado del lugar poniéndolo en el área del post-header:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Y luego he puesto estos estilos para darle un fondo, alinearlo a la derecha y darle un ligero borde redondeado:

      .comment-link {
      float:right;
      background-color:#f1f1f1;
      padding:2px 3px;
      border-radius:2px;
      }

      Eliminar
  19. Hola de nuevo Potro, me puedes ayudar a centrar las imagenes de youtube es que por mucho que la edito no consigo que quede iguales a las otras

    http://entraparanada.blogspot.com.es/2014/06/botones-de-redes-sociales-ciudad-blogger.html

    gracias por tu ayuda y aun no entiendo como has conseguido colocar todas las imagenes perfectamente centradas, o si tienes alguna imagen por ahi de youtube que me sirva te lo agradesco mucho, muchas gracias por tu tiempo un abrazo

    ResponderEliminar
    Respuestas
    1. Hola, yo por ahora no haré más imágenes de botones pues el tiempo que dispongo es muy corto. Si usas Photoshop habilita el "grid" para que te puedas guiar con las distancias de las imágenes: http://www.tutorial9.net/tutorials/photoshop-tutorials/tip-use-the-grid-in-photoshop/

      Eliminar
  20. Y como conseguiste centrarlos (los botones sociales), lo he intentado con diferentes códigos de centrar pero no puedo

    ResponderEliminar
    Respuestas
    1. Al primero sólo le puse margin-left: 25%; debajo de .social_bookmarks_container {
      Al segundo sólo lo encerré entre <center> y </center>

      Eliminar
  21. Hola Potro, gracias por los botones!!
    Nuevamente vengo con preguntas.
    ¿Como configuro el botón de suscripción por correo para que aparezca en español?
    Cuando abro los botones en tu pagina abre una nueva pestaña, pero cuando abro los mios salgo de mi pagina. ¿Como hago para que las paginas se abran en nuevas pestañas? Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Facu, para que los enlaces se abran en otra pestaña mira esta entrada:
      http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Para que el idioma de la suscripción por correo esté en español, entra en tu cuenta de Feedburner, selecciona tu feed y luego da click en "Publicize", busca "Email Suscriptions" y en "Language" selecciona "Español".
      Saludos.

      Eliminar
    2. Potro lo de las pestañas funciona de maravilla excepto en el de feedburner que además de abrirse en la misma pestaña dirige a una página con un montón de códigos. El gadget de suscripción por correo electrónico lo configuré en español pero sale en inglés, como en tu blog.

      Eliminar
    3. Hola Facu, la configuración del idioma se hace en esa área, desconozco porqué no se aplique. En cuanto a lo primero que mencionas, necesitaría ver en cuál blog lo has puesto.

      Eliminar
    4. Solucioné lo del correo.
      En todos mis blogs coloqué los gadgets, pero en ninguno de ellos funciona el de feedburner. Gracias!

      Eliminar
    5. Sigo sin saber en cuál blog lo has puesto, así me es imposible saber cómo ayudarte :/

      Eliminar
    6. En este: http://sirmoshis.blogspot.com/
      Gracias!

      Eliminar
    7. El icono del feed no tiene el atributo target="_blank", por eso no abre en otra ventana. Tu feed aún no lo tienes enlazado a Feedburner, en esta entrada puedes ver cómo enlazarlo, sólo te falta añadir la dirección de Feedburner en tu configuración de Blogger:
      http://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html

      Eliminar
    8. Hola Potro, el gadget de feedburner está funcionando, quiero colocarle target="_blank pero no se en que parte...También me gustaría cambiarle el idioma.
      Respecto al aspecto, hay alguna forma de sacarle los guiones que aparecen sobre los iconos de twitter, google+, facebook y mail?? Mil Gracias!

      Eliminar
    9. Después de href='/atom.xml' deja un espacio y pone el target="_blank"
      Para los bordes que aparecen ahí agrega estos estilos:
      .widget ul li {
      border-top: none !important;
      }

      El idioma, yo lo veo en español...

      Eliminar
    10. Potro, eres un genio, los bordes se han ido y abre en otra pestaña, además pude convertirlos en círculos gracias a tu comentario 10.1
      Mil Millones de Gracias :D !! No molesto más...

      Eliminar
  22. Hola potro dentro una duda que no tiene nada que ver con esta entrada, lo que pasa que tengo un blog pero quiero hacer mas ancho la parte del gadget de entradas populares, te dejo una imagen para que me entiendas,
    http://imgur.com/uBLkDIx

    ResponderEliminar
    Respuestas
    1. Hola, la mayoría de los gadgets predeterminados de Blogger se adaptan al ancho de la sidebar. Si ese u otro gadget predeterminado lo quieres más ancho tienes que aumentar el ancho de tu sidebar.

      Eliminar
  23. Hola Potro, tengo un problema con los botones de redes sociales. Quiero cambiar su tamaño manteniendo su apariencia, al menos un 50% mas pequeños, es posible?
    Lo he cambiado px pero achica el boton y se pierden las imagenes del interior en el achique.
    Muchas gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola liquido, mira el comentario #8.1, ahí he explicado sobre lo que deseas.

      Eliminar
  24. Hola Potro estan Buenisimos :D , una pregunga, no sabes algun script o algo, cuando copien el contenido de mi blog, osea subranyen algun texto y le den copy y despues paste en algun lugar, quede al final, Para mas Visita "Sitio Web" no se si me entiendes?

    ResponderEliminar
    Respuestas
    1. Hola, hay un servicio que brinda esa opción:
      http://www.tynt.com/product_copypaste

      Eliminar
  25. Interesante, lo mejor de todo es que los sprites optimizan el sitio.

    ResponderEliminar
  26. potro tengo un terrible problema, en mi blog cuando entro a una entrada me aparecen todo desalineado y no aparece fondo en las entradas a qui podras visualizarlo: http://totalmetalnrock.blogspot.mx/2014/05/httprockandmetalcassic.html es una entrada de pruebas que había hecho ya tiempo.
    Gracias por tu ayuda.

    ResponderEliminar
    Respuestas
    1. Hola, en #content-wrapper tienes esto:
      background-color: #000000 repeat-x center bottom #000000;

      Cámbialo por esto:
      background: #000;

      Saludos.

      Eliminar
    2. Muchas gracias maestro potro me funciono de maravilla eres el mejor
      saludos.

      Eliminar
  27. Potro, tengo una duda fuera de éste tema (Sí, soy uno más de los que tienen dudas fuera de tema) ¿Es posible mostrar un texto o un gadget sólo en la versión web, y que en la versión móvil no aparezca o viceversa? He intentado buscando condicionales o algo por el estilo, pero no encuentro nada sobre éste tema.

    ResponderEliminar
    Respuestas
    1. Hola Sergio, la forma más fácil y sencilla es que uses el atributo mobile="yes" o mobile="no" para que determines qué quieres mostrar en la versión móvil y qué no:
      http://ciudadblogger.com/2011/11/habilitar-las-plantillas-personalizadas.html

      Eliminar
  28. Perdona que te pregunte algo que no tiene relación con este post, pero es que no se cómo preguntarte desde otro sitio. Últimamente he estado viendo páginas web que enseñan su información con el estilo flipbook. ¿Sabes si se puede imitar o emular ese efecto de pase de páginas para un blog? Te dejo esta URL por si no me he expresado bien http://asp-es.secure-zone.net/v2/index.jsp?id=3/3075/6460&lng=es ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. ¿Para las entradas del blog? no que yo sepa :(

      Eliminar
  29. 1ero. Hola mi buen maestro Potro, desde hace años te sigo y has sido mi mentor y la persona que me impulso a hacer esto (mi mejor hobie) Te presumo una de mis ultimas paginas camaronpanzon.com gracias a tus lecciones. Mi pregunta es: encontré esta pagina http://www.gjelina.com/ puedes empujar los links, el movimiento de los botones que esta en javascript es genial y me encantaría poder jugar con esto en mis blogs. ¿Me podrías ayudar o guiarme por donde empezar? Gracias un saludo y un abrazo bro !!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Oiram-X :)
      Parece que usa Box2Djs, nunca lo he usado a decir verdad, pero hay algo similar, no es exactamente igual, pero también te permite mover y arrastrar elementos:

      http://ciudadblogger.com/2010/05/arrastrar-imagenes-con-jquery.html
      http://ciudadblogger.com/2009/12/hacer-que-las-imagenes-se-arrastren.html
      http://ciudadblogger.com/2009/12/hacer-que-las-imagenes-se-arrastren-ii.html

      Otro abrazo para ti.

      Eliminar
  30. Potro! Gracias! Sabes algo? Cuando volviste a la actividad aqui, vi esos botones y tenia unas ganas de pedírtelos! Pero no se, no quería como "robarte" tu #suaj (? Gracias de nuevo genio n.n

    ResponderEliminar
    Respuestas
    1. Los hubieras pedido, ya sabes que de vez en cuando tenemos la hora de las complacencias :)

      Eliminar
  31. Potro, una sugerencia fuera del tema. ahora como todos sabemos los blogs están bien visitados desde los móviles y la publicidad es mejor pagada desde un móvil, sería bueno que enseñes como crear plantillas optimizadas para celulares, mira acá te dejo un ejemplo, no es spam! http://www.milgifs.com/ mira desde la pc y luego del móvil, es excelente! Saludos!

    ResponderEliminar
    Respuestas
    1. Sigo pendiente con el tema de las plantillas "responsive", ya después hablaremos de ello :)

      Eliminar
  32. Potro necesito de tu ayuda, quieero poner los botones para compartir de redes sociales en la parte superior de las entradas, pero a pesar de que he encontrado trucos y códigos no me lo permite y eso que he quitado los botones tradicionales, no sé si exista algun truco para dejar esos botones clásicos y poner otros como lo estoy señalando. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. Hola Abel, estos botones no son para compartir las entradas sino para que la gente ingrese a las páginas de tus redes sociales, por eso ponerlas en las entradas no tiene mucho sentido. Si de cualquier manera quieres hacerlo sólo pon el código debajo de <div class='post-header'> tomando en cuenta que esa línea podrías tenerla dos veces así que sino queda en una la pones en la otra.

      Eliminar
  33. :v Me quedan mal... Me queda la iluminación cortada y la animación desde abajo izquierdo a arriba derecha..

    ResponderEliminar
  34. PD: el blog es zhearunteam.blogspot.com.ar ... Fijate como me quedan :c (PD: Quiero el de 4, pero quiero cambiar el de Google+ por el de subscripción por mail, ¿cómo lo hago? Me mezclo con tanto código)

    ResponderEliminar
    Respuestas
    1. Si quieres el de 4 usa el otro código, no el primero. Y si quieres cambiar uno por otro sólo cambia la URL de la imagen correspondiente, en sí sólo es cambiar la imagen y el enlace a dónde enviará.
      Si te quedas con el primero cambia el padding:0; que está dentro de .social_bookmarks li { cámbialo por padding:0 !important;

      Eliminar
    2. El problema que tengo es la animación. Están mal animados.

      Eliminar
    3. Supongo que has editado las imágenes, en esos casos deben estar perfectamente bien alineadas las imágenes del sprite para que no tengas ese problema.

      Eliminar
  35. hola potro te queria pedir una ayuda me puedes Decir como regreso La fecha Abajo de la entrada? , esque ahorita la tengo arriba y ya no se que codigo tengo que mover :( me ayudas Porfa :D mi pagina es Mi name con el .org

    ResponderEliminar
    Respuestas
    1. Hola, mira aquí:
      http://ciudadblogger.com/2010/07/cambiar-de-lugar-datos-del-post-footer.html

      Eliminar
  36. Potro, buenas noches. Te pregunto amigo: ¿Ofreces el servicio de diseño de plantillas personalizadas?... estoy interesado en pagar por una plantilla premium, ojalá hecha por el maestro de maestros. Me cuentas.

    ResponderEliminar
    Respuestas
    1. Hola Diego, no sé si el maestro de maestros haga plantillas, pero yo sí :)
      Te dejo el correo de contacto para esos asuntos, sólo indícame el tipo de plantilla, gadgets, sidebars, elementos, diseño, etc. que quieres para tu plantilla (o si quieres emular la de otro blog/sitio web) y te hago un presupuesto.
      Saludos.

      ventas@ciudadblogger.com

      Eliminar
  37. Hola, Potro. Tengo una duda, ¿como agrego otra red social? Como instagram, tumblr o alguna otra página como wattpad.
    Besos :*

    ResponderEliminar
    Respuestas
    1. Hola Clau, tienes que crear otra imagen con sprite tomando de muestra una de las que ya están en el código, luego, sube tu imagen a Picasaweb y agrega estos estilos:

      .social_bookmarks .iconinsta{background: #F1F1F1 url(URL de la imagen) top left no-repeat;}
      .social_bookmarks .iconinsta:hover{background-position:center -57px; background-color: #37589b;}

      Ahí deberás agregar la URL de tu imagen. De último agrega antes de </ul> lo siguiente:

      <li class='iconinsta'>
      <a href='URL de la red social'>
      Red Social
      </a>
      </li>

      Eliminar
    2. ¡Gracias! Pero me sale un pequeño problema, no tiene el fecto que hace los botones tan especiales y me salen en fila...

      Mira lo intente poner en mí blog y de pruebas y salio mal...
      http://lavidaesbellacomouncaracol.blogspot.mx/

      Eliminar
  38. Buenas tardes. Hay un problema con el widget. Por alguna razón los cuadros están estirados, haciendo que se hagan dos filas y y que al posicionar el mouse, en vez de subir, la animación va en diagonal. ¿Qué podrá ser? Lo he puesto en un blog de ejemplo y allí está perfecto :(
    Mi blog es: http://reyedit.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos, es por los estilos de tu plantilla.
      Busca el padding:0; que está dentro de .social_bookmarks li { y cámbialo por padding:0 !important;
      Quizá también sea necesario que agregues estos estilos:

      .social_bookmarks ul {
      margin:0 !important;
      padding:0 !important;
      }

      Eliminar
    2. ¡Muchísimas Gracias!
      Con la primera recomendación logrué que los iconos recuperaran su tamaño original. La otra recomendación no lograba ningún cambio (al menos aparente). Puse ese atributo que me diste, el !important, en el margin:0 de .social_bookmarks y como por arte de mágia se ha metido dentro de la caja (antes estaba un poco salido). Y ya jugando con los el social_bookmar li he dado con algo que me convence jaja

      Muchísimas Gracias (:

      Eliminar
    3. Excelente Juan Carlos, qué gusto que todo haya salido bien!

      Eliminar
  39. El potro necesito que me ayudes.
    Esoty queriendo insertar el gadget dentro de la pagina y no me salen los iconos de las redes sociales. Ya verifique no este pegado el código del color junto con la parte donde va la URL de la imagen:

    .social_bookmarks .icontwitter{background: #D8D8D8url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}

    Debe ser así, con un espacio entre los dos:
    .social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s000/icon-twitter.png) top left no-repeat;}

    Ya lo hice, pero aun asi continua sin aparecer los iconos. No es un blogger donde lo quiero insertar sino una pagina web. No se si necesito un codigo javascript o una libreria en especial para ponerlo y me detecto los iconos ??? Ayudame urgente :(

    ResponderEliminar
    Respuestas
    1. Hola Gianrch, ¿en cuál página lo has puesto?

      Eliminar
    2. Es una pagina que recien estoy terminando de hacerla pero vi tu post y me gusto tu diseño segui los paso pero no se mestra los iconos :( porfavor ayudame sbes que puede ser ? :/

      Eliminar
    3. Es una pagina en puro HTML pero en la parte del footer lo queria poner las redes sociales pero no se porque motivo no se muestran solo se muestra la los cuadros y cuando los selecciono salen sus respectivo colores pero menos los iconos, es decir las imagenes.

      Eliminar
    4. yaaaaaaaa Lo solucione :) Gracias de todos modos (Y)

      Eliminar
    5. Es necesario que pueda verlo, de lo contrario no puedo saber dónde está el error.

      Eliminar
    6. El protro, lo que no he podido es insertar el sprite de "youtube" ayudame porfavor te lo agardecere mucho ..!!! :D

      Eliminar
    7. En el comentario #38.1 verás las indicaciones para añadir un nuevo botón ;)

      Eliminar
  40. Hola potro quisiera saber como hacer para que en vez de 4 botones queden 3 pero en manera de linea, mira como lo tengo en mi blog de prueba : http://readersface.blogspot.com/

    En de la version 1 osea los horizontales no logro que queden centrados por eso coloque los de 4 botoenes

    ResponderEliminar
    Respuestas
    1. Hola Samuel, entré y veo que ya lo has conseguido ;)

      Eliminar
  41. Hola Potro, estoy intentando modificar el ancho de este gadget a 200px y mantener la altura a 57px y algo estoy haciendo mal. La imagen sin poner el cursor encima encaja a la perfección pero justo en el momento de poner el cursor encima desaparece no entiendo porqué. He estado viendo las anteriores respuestas y no consigo dar con una solución. Me podrías decir por favor que debo cambiar exactamente en el código para que funcione? Eres un crack compañero muchos saludos y muchas gracies por adelantado!

    ResponderEliminar
    Respuestas
    1. Hola, siempre que pongas un menú en la cabecera de una plantilla original de Blogger debes seguir primeramente estos pasos:
      http://ciudadblogger.com/2011/03/como-usar-cualquier-menu-en-las.html

      Después de seguir esos pasos desaparecerá tu problema. Saludos.

      Eliminar
    2. Muchísimas gracias por la ayuda ahora ya está solucionado, mil gracias y un abrazo!

      Eliminar
  42. Potro, tengo una pequeña consulta, por que en mi Blog no aparece el último icono de Google+, me aparece el icono, pero no da el efecto de transición.
    Mira puedes revisar:
    http://www.milutilidades.com/

    ResponderEliminar
    Respuestas
    1. Hola Nicolás, entré a tu blog pero no he visto puesto este gadget :/

      Eliminar
  43. Hola potro!! jeje deberias agregarle el boton de instagram tambien es muy usado.jejejeje un saludo estan buenisimos los botones!! Gracias!!

    ResponderEliminar
  44. hola potro con el fin de no comentar en otras entradas otros temas me vine hasta la entrada correspondiente, tengo esta duda puse los iconos de redes sociales los que pusiste aca arriba, la pregunta es esta: puedo poner los iconos dentro de este otro widget con todos sus efectos de transicion? este otro widget tambien tiene iconos de redes pero sin efectos en el caso se eliminarian y pondrian los tuyos pero dejando lo demas intacto.

    la direccion es esta. el blog solo tiene esos 2 widgets

    http://pruebasabchoy.b l o g s p o t.mx/

    ResponderEliminar
    Respuestas
    1. Supongo que se puede, sería cuestión que eliminaras los botones actuales y pegaras estos justo debajo de <div class='sidebar-subscribe-box-wrapper'>

      Eliminar
  45. Hola de nuevo Potro! siento ser tan pesado. He añadido un nuevo icono (al primero de los estilos en horizontal) me funciona a la perfección, los enlaces y todo... pero tengo un problema: se alinea justo debajo del primero de los iconos... no sé que debo hacer para que se alinee con los otros a la misma altura y poder centrar después bien el menú... alguna idea??

    ResponderEliminar
    Respuestas
    1. Es que el ancho de todos los iconos en conjunto supera al ancho del blog, tienes que reducir los width que están dentro de .social_bookmarks li y .social_bookmarks li a para que todos quepan.

      Eliminar
  46. Hola Potro, antes que nada aplausos para ti...!!!

    Dividí la cabecera en 2, inserté el gadget html en la derecha peeeero los íconos me salen totalmente arrimados a la derecha (al borde de la pantalla) ¿hay manera de centrarlos o de darles un margen para que no salgan tan a la derecha?

    Intenté con margin-right: XXXpx; pero no lo he logrado, ¿puedes ayudarme?
    (www.juancarlosmarrero.com)

    Te anticipo las gracias!!!!

    ResponderEliminar
    Respuestas
    1. Gracias Juan Carlos. Entré a tu blog y veo los botones pero no los veo pegados al borde del contenedor ni de la ventana, supongo que has podido resolverlo. Buen fin de semana.

      Eliminar
  47. ¡Hola Potro! Genial cada uno de tus consejos. Consulta: en el que son cuatro los íconos, ¿se puede reemplazar por el FeedBunner por Tumblr?

    ResponderEliminar
    Respuestas
    1. Por supuesto F. D.P., mira el comentario #2.1

      Eliminar
  48. Buenas noches Potro!
    1era vez consultándote por acá. Es imposible colocar estos botones para compartir en las diferentes redes sociales? en vez ir a las redes del blog que publicó el post.
    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Kay Ad Líbitum, estos botones no son para compartir, únicamente son enlaces para que los usuarios ingresen a cada red social. Para compartir hay estas opciones:

      http://ciudadblogger.com/2012/07/botones-para-compartir-flotantes-que-se.html
      http://ciudadblogger.com/2012/06/botones-para-compartir-que-se-detienen.html
      http://ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html
      http://ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html

      Eliminar
  49. Mira lo que he hecho con este código, le he adaptado un poco y me quedó genial, mira Potro http://www.dudasbecasmec.com (barra lateral izquierda)

    ResponderEliminar
  50. Hola Potro. Muy buenos los botones, tu explicación es excelente (Cosa que sirve a usuarios inexpertos como yo) y me sirvieron mucho estos botones. Pero mientras veía éste post me di cuenta de que la dirección que le pusiste a tu Twitter es twitter.ciudadblogger.com, y eso no se puede hacer simplemente poniendo tu usuario en medio de twitter y .com. Quizá ésta pregunta no esté muy relacionada con tu post, y capaz que no la queres responder. Pero es que me intrigo mucho. Saludos! :)

    ResponderEliminar
    Respuestas
    1. Hola Lucas, la dirección twitter.ciudadblogger.com y Facebook.ciudadblogger.com son redirecciones:
      http://ciudadblogger.com/2012/02/crear-un-subdominio-para-facebook-y.html

      Eliminar
    2. Muchas gracias por tu rápida respuesta. Recién leí el otro post y lo entendí a la perfección, pero lástima que yo no tenga un dominio en name.com, GoDaddy, o CDmon. Saludos! :)

      Eliminar
    3. En esa entrada yo menciono esos registrantes porque sé que ellos ofrecen el servicio de redirección, pero no son los únicos, así que es cuestión de que revises si tu proveedor ofrece esa herramienta ;)

      Eliminar
  51. Potro, agradecer tu regreso despues de un año. Se te extrañaba. En segundo lugar, habra un codigo mejorado de la Caja del FanBox de Face deslizante. Porque el de hace dos años, a veces funciona y otras NO... Y darle una mejor visualizacion...Muchas Gracias

    ResponderEliminar
    Respuestas
    1. Gracias FROGELIO, de momento no habrá alguna actualización sobre ese gadget. El de jQuery a mí no me ha dado problema, si algunas veces no funciona quizá pueda ser por otro gadget que interfiere. Saludos.

      Eliminar
  52. Hola, potro: ¿Sabes cual es el código para agregar tumblr a la opción de 5 botones en lugar de twitter?

    ResponderEliminar
  53. Hola Potro, Gracias por compartir esta opcion, lo habia estado buscando desde hace mucho tiempo y me es de mucha utilidad contar con tu entrada. Ya los puse y logre incluir mi nombre de ususario en tres de ellos pero no me funciona el de RSS, podria quitar ese boton? Y si fuera asi desde donde tendria que borrar? mi blog es: sweeteracupcakes.blogspot.com te agradezco de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Susy, he entrado a tu blog y sí que lo veo funcionando, pero si lo quieres quitar sólo elimina esta parte del código:

      <li class='iconrss'>
      <a href='/atom.xml'>
      RSS
      </a>
      </li>

      Eliminar
  54. Buenas buenas!

    Disculpen la molestia pero quería consulta como hago para que estos botones, cuando les doy click, se abran en una pestaña nueva? No quiero que al tocar el boton salgan del blog. Sino que continúen en el mismo y que la red social se abra en otra pestaña.

    Espero ser claro con la pregunta.
    Muy bueno tu blog Potro! Mis felicitaciones!!!
    Un abrazo!

    ResponderEliminar
    Respuestas
    1. Hola, mira esta entrada, ahí verás cómo hacer que los enlaces se abran en otra pestaña:
      http://www.ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Eliminar
  55. No funciona para activar, mi cuenta de fb ... he escrito en nombre tanto junto y tambien repetando espacios ya que mi pagina de fb esta compuesta por tres palabras, pero no hay manera... como puedo agregar el instagram? gracias! :)

    ResponderEliminar
    Respuestas
    1. En el comentario #38.1 he mencionado cómo sustituir alguno. Lo de Facebook no sé, quizá no estás poniendo correctamente el nombre de usuario.

      Eliminar
  56. Hola Potro, soy yo de nuevo con otra pregunta.

    He puesto en mi web el widget de las redes sociales que tu tienes, pero le he aumentado el tamaño, los problemas son dos:

    1º) Al aumentar el tamaño, la capa transparente que hay encima de cada icono, se ve pero de un tamaño más pequeño que el tamaño de la imagen del icono. Como pongo esa capa al mismo tamaño?

    2º) De los 5 iconos, el 1º cuando pincho para comprobar si funciona, me dirige a una pagina que salen solo textos, números..etc. ¿Como hago para solucionar eso?

    Gracias de antemano, y perdona por ser tan pesado.

    ResponderEliminar
    Respuestas
    1. Hola, en esta parte se encuentra la imagen semitransparente, si la quieres más grande tendrías que editarla:
      .social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
      }

      Es posible que uses Chrome, por eso no ves el feed interpretado porque el navegador no puede leer esos códigos. Si lo miras en Firefox (por ejemplo) verás tu feed sin problema. Una opción es que uses Feedburner (busca aquí en el blog hay un tutorial sobre ello) para que Chrome pueda leerlo en un formato diferente.

      Eliminar
    2. Y a en ese widget, como podría quitarle el marco que lo bordea, o que no se viera?

      Eliminar
    3. ¿Te refieres al borde blanco? Ese es el fondo del gadget de tu plantilla. Si quieres quitárselo sólo a ese gadget prueba con estos estilos:

      #HTML1 .sidebar .widget {
      background: transparent !important
      }

      Eliminar
    4. Potro, he puesto en mi web el widget de las entradas populares, pero no me aparece ninguna entrada como popular.

      A que se debe? como puedo arreglarlo?

      Eliminar
    5. Es porque tu blog es muy nuevo y aún no hay suficientes entradas, conforme tengas más publicaciones y visitas el gadget podrá recopilar información.

      Eliminar
  57. Hola potro espero que me puedas ayudar he puesto el codigo de la segunda version la de 4botones pero me quedaron mal alineados http://tugameloftzone.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Diego, dentro de .social_bookmarks li verás un padding:0; cámbialo por padding:0 !important;

      Eliminar
    2. Potro era eso ahora funciona bien gracias por tu ayuda

      Eliminar
  58. hola en blogspot no hay NADA de diseño no se si sera algo antiguo no lo se

    ResponderEliminar
  59. Respuestas
    1. Sí lo hay: http://oi59.tinypic.com/1zbw1vs.jpg

      Eliminar
  60. Excelente. Muy útil, práctico y con aspecto dinámico.

    ResponderEliminar
  61. Hola, excelenta esta opción. He modificado los sprits de acuerdo a mis preferencias, pero estoy atorado en algo:

    ocurre que cambie el tamaño de los sprit para que se ajusten mas al contenedor pero cuando hacen la transicion la parte en color no sube del todo, se queda a la mitad. ¿me puedes ayudar a que la imagen se desplace un poco mas de la opcion que viene configurada? ¿que parte debo modificar? Gracias

    ResponderEliminar
    Respuestas
    1. Hola Kal, en esta parte de los estilos:

      .social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
      .social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
      .social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
      .social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
      .social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}

      Ahí verás varios background-position, cambia esos valores (-57px) por otro hasta que se adapte al tamaño que has elegido.

      Eliminar
  62. Buenas Me gustaria tener la barra grande pero no quiero rss podria ponerme instagram?¿ Grtacias saludos!

    ResponderEliminar
  63. Hola potro, en mi blog tengo puesto la segunda opcion que son tan solo cuatro. No sé si se podría cambiar el primero de la izquierda (que es naranja) por uno de youtube. ¿Sabes si se puede hacer? Gracias

    ResponderEliminar
  64. Hola Potro tengo un problema con la transicion la parte del Logo no sube del todo y por lo tanto no llega a la mitad del contenedor En estos momentos tengo los valores de ancho y alto puedes observar abajo. Te dejo el Blog http://cursodecadd2d.blogspot.com/ .

    Por otra me gustraría abrir el Link en otra ventana nueva ya q actualmente esta habriendo en la misma pagina como podría solucionarlo. Gracias de antemano. Saludos

    .social_bookmarks li {
    margin:0 0 1px 1px;
    height:57px;
    width:41px;

    --------------------------------------
    Tengo como valor -57px

    .social_bookmarks .iconfacebook:hover{background-position:center -57px;
    background-color: #37589b;}

    ResponderEliminar
    Respuestas
    1. Hola Robert, no he encontrado estos botones en tu blog.

      Eliminar
  65. Buenos días. Buen efecto, sin duda. Gracias. Pero ¿cómo implemento estos botones en mi web en lugar del blog? GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola lilolaleilo, los estilos ponlos en tu archivo CSS, y la estructura HTML dentro del BODY de tu página.

      Eliminar
  66. Respuestas
    1. Me alegro que te haya gustado tanto como a mí :)

      Eliminar
  67. Simplemente magnífico!!

    Muchas gracias.

    ResponderEliminar
  68. Gracias Potro muy util, soy nuevo en el mundo blogger, gracias por tu aporte

    ResponderEliminar
  69. Hola amigo, excelentes botones pero no me funcionan en mi pagina web, ésta no esta online todavia y esta hecha con html5 css3 responsive, lo menciono porque podria ser eso o por no estar en linea.
    Lo coloqué en varios lugares y nada sale incompleto. Lo probe en blogger y perfecto
    Espero tu ayuda. Gracias

    ResponderEliminar
    Respuestas
    1. Habría que verlo puesto para saber cuál es la razón por la que no te funcionan.

      Eliminar
  70. Hola una consula, quisiera saber como haz puesto los botones de redes sociales: Facebook, twiter y google + debajo de tus entradas, no se si me puedes explicar o indicarme en donde lo puedo encontrar la publicación, pq no lo encuentro
    espero q me puedas ayudar, gracias por anticipado

    ResponderEliminar
    Respuestas
    1. No tengo una entrada sobre ello pero puedes poner el código de cada botón en el post-footer de tus entradas.

      Eliminar
    2. Por cierto, aquí hay un par de opciones:
      http://www.ciudadblogger.com/2012/01/botones-para-compartir-estilo-taringa.html
      http://www.ciudadblogger.com/2011/09/botones-para-compartir-deslizantes.html

      Eliminar
  71. Hola, una consulta, al intentar hacer el procedimiento tal cual, me marca que Debe contener como máximo 2,083 caracteres y me pide corregir un error.
    Gracias, Saludos.

    ResponderEliminar
    Respuestas
    1. Hola, ¿cuál es exactamente el error que te aparece?

      Eliminar
  72. Hola potro me gustaria saber si existe algun lugar donde pueda sacar mas iconos digamos no quiero el de twiter y me gustaria ponerle linkedin pero deseo que sea de la misma familia de botones ya le he dado vueltas y no encuentro el boton que sea similar

    ResponderEliminar
    Respuestas
    1. Idénticos a estos no sé, si quieres date una vuelta por iconfinder, pero lo más seguro es que si quieres que todos tengan el mismo diseño entonces tendrás que apoyarte de un programa de edición de imágenes como Photoshop.

      Eliminar
  73. Hola Potro gracias porel aporte pero al colocar el codigo se inserta bien pero queda uno montado arriba de otro, de echo ya reduci la cantidad de botones dejando solo 3 que son los que me interesan pero no se que hacer para que vayan alineados hacia el lado. Gracias.

    ResponderEliminar
    Respuestas
    1. Podrían ser varias causas, ya sea un error de los estilos, o el ancho de la columna donde se coloca, o alguna modificación que hayas hecho en ellos... habría que ver para saber la causa exacta y su posible solución.

      Eliminar
  74. Hola!, me parece una buena opción pero la que busco es la que tu tienes en el lateral derecho , ese de Síguenos en las redes sociales, ¿lo tienes posteado en el blog? Si no es asi ¿donde lo coseguistes?

    Gracias, Eimi Romane

    ResponderEliminar
    Respuestas
    1. Hola Potro,
      me uno a la petición de Eimi.
      Muchas gracias,
      Saludos!!

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

      Eliminar
    3. ese no es un gadget como tal, lo que se hace es crear una caja contenedora con pestañas desde tu plantilla html y luego en la sección de diseño aparecen los apartados pestaña 1, 2 y 3 donde colocan los 3 gadgets (facebook, google+ y el de blogger), es un poco complejo y largo de explicar, pero creo que hay entienden +o- por donde va la cosa, no les digo donde lo encuentran por que no se en que pagina haya un tutorial para hacerlo.

      Eliminar
    4. Muchas gracias, KeHu León!!! Encontré la entrada donde Potro explica cómo hacerlo (http://www.ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html), pero ahora tengo dos preguntas:
      1. (la principal) señala que hay varios métodos para hacerlo, no me queda claro cuál usa él ¿ jQuery?, y
      2) (secundaria) ¿se podría poner en las pestañas de la caja imágenes en vez de texto?
      Muchísimas gracias!!!

      Eliminar
    5. Hola, la caja de pestañas que uso es esta:
      http://www.compartidisimo.com/2011/10/crear-una-seccion-con-pestanas-para.html

      ¡Saludos!

      Eliminar
  75. Esta muy bueno esto, pero me queda una duda, como hago para que al oprimir el botón se abra en una nueva pestaña y no en la misma de mi blog, gracias por tu aporte

    ResponderEliminar
  76. hola como podria ponerlos de manera vertical y fija en mi pagina?
    saludos

    ResponderEliminar
  77. Excelente blog, muchisimas gracias por compartir tus conocimientos. sigue adelante con tu esfuerzo. gracias de nuevo

    ResponderEliminar
  78. hola un consulta como puedes agregar otro botón de red social como el youtube, lo intente, pero no me bota la imagen, como es que ppuedo hacer que se muestre la imagen, el link del que jalo la imagen es del dropbox pero nada, haber si me puedes ayudar

    ResponderEliminar
  79. No estaría de mas poner como añadir un botón por ejemplo a YouTube o Vimeo

    ResponderEliminar
  80. Buen día, saludos amigo. La verdad quiero felicitarlo por su aporte y desearle muchos éxitos, yo no conozco casi nada de programación pero si hago algunas cosas, logre cambiar el icono para la que necesito, pero quería preguntarle en el caso que yo quisiera que los iconos no estén tan pegados o separarlos un poco más cada uno, que debería de hacer, porque el espacio que quiero que llenen es de aproximadamente 650px a 700 px que es la zona horizontal donde van las noticias y cosas así. entonces quería hacer que todos se distribuyan a esa medida o es decir ir alejando uno de otro hacia el lado derecho como unos 10px. La verdad me agradaría muchísimo su pronta ayuda a esto, y como dije antes lo felicito porque de esta manera apoya y ayuda a muchos que están iniciándose en este campo.

    ResponderEliminar
  81. Hola! Seguí tus pasos y guardé los cambios, sin embargo no aparecen los íconos en mi blog. Cuando reviso en el diseño aparece el gadget configurado, pero cuando abro el blog no están ahí, es como si no se activaran, qué hago?

    ResponderEliminar
  82. hola tengo esto .ico_download {
    display: inline-block;
    background-image: url(spritebox-sprite.png);
    background-repeat: no-repeat
    }

    .ico_download {
    background-position: -0px -0px;
    height: 118px;
    width: 118px
    }
    como lo incorporo a el código gracias

    ResponderEliminar
  83. Donde se encuentra mas link de iconos para agregar como tumblr, instagram.

    ResponderEliminar
  84. Buenas.
    Consulta, como hago parar que se vea en mi pagina html?.
    Saludos

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

    ResponderEliminar
  86. Era lo que estaba buscando! Me quedó espectacular en un mix con esta entrada: http://www.ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

    Así me quedó: https://adictos-enserie.blogspot.com.ar/

    Saludos!!

    ResponderEliminar
  87. Cómo hago para tener en la primera opción los botones de Twitter, Instagram, Google + y para enviarme un nuevo correo?? Gracias, mi blog es A Blue Bookmark :)!

    ResponderEliminar

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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger