TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

Agregar botones de redes sociales en el blog

8 de agosto de 2011 | Número de comentarios219 comentarios
Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.
Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.
Puedes verlos en esta misma entrada.


Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:
/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}
Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:
<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://lh4.googleusercontent.com/-Jgd9rk6kRYM/TkC3KlKR6YI/AAAAAAAABl0/26vANOtT7LI/google_plus.png" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://lh3.googleusercontent.com/-cEItxWOllgk/TkC3K99nKrI/AAAAAAAABl8/vS3V49UFD2o/facebook.png" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://lh3.googleusercontent.com/-jchNp-BEnME/TkC3Kxs3yuI/AAAAAAAABl4/c2Z8_KkFWTs/twitter.png" /> <span>Sígueme en Twitter</span></a></li>
</ul>
Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.

Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra cambiando la URL del enlace, la URL de la imagen y el texto:
<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>
Y ahora sí, es todo.

219 comentarios :

  1. Gracias, Potro, me has leído el pensamiento, llevo los últimos días dándole vueltas a si no habría unos botones comunes y sencillos para añadir precisamente esto, los enlaces a las redes sociales.
    ¡Mago!, :)
    Muchas gracias, esta misma tarde me pongo a ello.
    Un beso

    ResponderEliminar
  2. Excelente amigo. Veo que no estas en http://www.boosterblog.es/?parrain=twinlife
    entra en este link y registrate es rapido y facil, gente como tu esperamos en booster.
    saludos

    ResponderEliminar
  3. Muchas plantillas ya lo llevan incorporado con muchos botones mas.

    ResponderEliminar
  4. Perfecto! Estaba hace unos días buscando cómo hacerlo pero nada de nada... Cómo lees el pensamiento potro :D me lo quedo

    ResponderEliminar
  5. Podria cambiar los botones que ya bienen en mi plantilla por estos?

    ResponderEliminar
  6. Wo! potro intente ponerle el boton google + a los botones que ya bienen en mi plantila y si quedo :D solo es cuestion de cuadrarlo :)

    ResponderEliminar
  7. Sofía Serra Giráldez, es algo sencillo, pero no todos buscan algo estrafalario, así que me parece que puede servir a más de uno. Qué bueno que han sido de tu agrado y espero que el resultado en tu blog sea de tu entero agrado. ¡Un beso!

    Salesman, gracias!

    Lluís Hoffman, seguro que sí, pero no todos usan esas plantillas ;)

    ResponderEliminar
    Respuestas
    1. Hola Potro!
      Por fa, me puedes indicar como hago el primero paso?

      "Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]> agrega los siguientes estilo"

      Esto lo debo colocar en el codigo HTML de mi pagina? No me sale la palabra "skin" por lo que no se donde ubicarlo! :(

      Otra cosa, debo escoger uno solo de los estilos, cierto??

      Gracias por tu ayuda!!

      Eliminar
    2. Hola Coronel Smith, usa las teclas CTRL + F, así te será más sencillo localizar los códigos.
      Saludos.

      Eliminar
  8. Excelente potro, en verdad muy bueno. He seguido tus publicaciones y me han sido de gran utilidad para mejorar mi blog. Aprovechando de tu experiencia en blogger te pido un gran favor: como puedo hacer para que en el apartado de comentarios de mi blog aparezca como aquí arriba en el tuyo, es decir, que aparezcan separados y enumerados como así también aparezca la caja de publicar comentario sin necesidad de dar clic en comentarios. O en su defecto hay alguna forma de que los comentarios se vayan agregando como una forma de foro al final de cada entrada y por ende se vayan dando respuestas a cada comentarios con responder.
    Espero y no haya echo de este comentario una confusión y me puedas ayudar, la verdad no soy tan experimentado en esto pero hay voy haciendo mis pininos. Saludos, espero tu visita a mi blog: http://www.telezaca018.blogspot.com y me des sugerencias.

    ResponderEliminar
  9. Gracias Potro,puedes indicarme de donde copio el nº de color de fondo,de borde y de texto,y otra cosa,en lugar de poner que me sigan en gplus,me gustaría poder poner el de myspace.

    ¿Como lo hago?

    GRACIAS

    ResponderEliminar
  10. Antonio, MaGoS RaDioMuSiC, gracias a ustedes por su visita!

    Campamento Web, Juan Daniel, qué bueno que les ha gustado :)

    SmiThzhiTo, entonces ya está todo resuelto!

    ResponderEliminar
    Respuestas
    1. buenas potro sos un genio. man queria saber por que en mi blog mi reproductor sale solo en la pagina principal al darle entradas antiguas ya no aparece el reproductor de mi radio
      este s mi blog www.yimidj.com
      es de bloger solo que compre el dominio .com
      este es mi msn yimidj2003@hotmail.com
      o mi facebook http://www.facebook.com/yimidj por fa comunicate

      Eliminar
    2. Hola YIMI DJ, ya te he respondido en otra entrada la misma pregunta. Todas las respuestas se hacen en el mismo blog, ninguna se responde al correo o por otro medio ;)
      Saludos.

      Eliminar
  11. Disculpa por el 3r comentario, quisiera saber como reemplazo los efectos de estos botones por los que ay bienen en la plantilla, y como cambio el color al momento de pasar el cursor sobre un link, espero tu respuesta gracias.

    ResponderEliminar
  12. Hola GERMÁN,

    Muchas gracias por tu comentario, qué gusto que estés encontrando útil la información de este blog y que sigas de cerca las publicaciones.

    Hay tres formas como pueden aparecer los comentarios, el que yo uso es la forma incrustada, en esta entrada puedes ver cómo activar cualquiera de esas, yo uso la tercera opción.

    También mira este enlace para saber cómo enmarcar y separar comentarios, seguro algunos de esos estilos te gustarán.

    Por ahora no tengo una entrada que hable sobre la numeración de los comentarios, pero en Oloblogger tienen una entrada bastante explicativa:
    http://oloblogger.blogspot.com/2010/03/numerar-comentarios-en-blogger.html

    ¡Saludos!

    ResponderEliminar
  13. Hola JantonioSR,

    En este enlace puedes ver los códigos de los colores para que puedas seleccionar el color que quieres y copiar su código.

    Si quieres cambiar alguno de los botones sólo cambia la URL de la imagen que ves ahí, por la URL del botón que quieres, y que el link dirija a MySpace o al sitio que quieras.

    ResponderEliminar
  14. SmiThzhiTo, lo del color ahí está en las anotaciones en color verde. Si quieres quitarle el efecto pushbutton sólo elimina esta parte del primer código:

    position:relative;
    top:1px;
    left:1px;

    ResponderEliminar
  15. Si, osea quiero que los efectos de estos botones aparescan en los botones que ya bienen integrados en la plantilla, sobre el color de los link al pasar el curso, quiero total, no solo en los botones si no en todo, en los enlaces, etc..

    ResponderEliminar
  16. Me encanta todas las propuesta en "Ciudad blogger"; siempre me ayudan a resolver las dudas mas díficiles, quizás no sea díficil con un poco de práctica un invento por aquí otro por aya, y tenemos algo que nos guste esta publicación es muy buena. Me encanto. Gracias Potro, pero como ha sido común en mi durante estos dos días, me salgo de contexto una ves más :S, (pena) sucede que tu tienes por la web "Personalizar Leer Más" y todo eso y como yo soy curiosa me di la tarea de intentarlo, pero sucede que hago todos los cambios, tal cual " algo asi como pega debajo de, pon esto encima de blah blah", a la final no me sale nada de nada sucede que quiero cambiarle el tamaño a mi leer mas y no se como "Rayos hacer eso"; ¿Como hago eso si a la hora de personalizarlo ni siquiera hay cambios osea", que hago mal explicame pleaseeeeeeeeeeeeeee (molestando otra ves jaja), un beso y míl graciassssssssssssssssss

    ResponderEliminar
  17. SmiThzhiTo, entonces mira esta entrada que habla sobre cómo aplicar el efecto pushbutton a las imágenes.
    Y para los enlaces mira esta otra entrada que habla justo sobre cómo personalizar los enlaces del blog.

    ResponderEliminar
  18. Potro, en el blog hay como añadir paginas, creo que hasta 10 es lo maximo. Mi pregunta es: ¿hay alguna forma que lo que escribo en una de mis paginas que no sea la principal, aparezca en el feed y se actualice? como se hace con la pagina principal, pues todos los post de alli se actualizan. Por ejemplo, edite una pagina para videos, pero no se actualiza y tengo que enviar a todos los suscriptores y demas personas de forma manual. Gracias y espero que me haya entendido.

    MHermonec

    ResponderEliminar
  19. Yaja- ,
    Entré a tu blog pero no veo que tengas algún código para personalizar ese enlace, supongo que ya lo habrás quitado.
    Si lo pones de nuevo avísame dejando un comentario en la entrada que mencionas (la de personalizar el Leer más) para que pueda entrar a tu blog y ver el código que has puesto y saber dónde puede estar el problema.

    Gracias por el beso!

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

    ResponderEliminar
  21. potro kiero esto porfavor!!
    os botones de FB-TW-G+ asi como lo tines tu mira asi lo tienes tu
    se dispersa todo abajo
    y yo kiero que vaya ahi mismo donde lo tienes tu,porfavor k es lo k tengo k acer para que quede bien... ahi donde lo kiero

    ResponderEliminar
  22. http://ciudadblogger.com/2009/11/personalizar-enlace-de-leer-mas.html Yo utilice este, lo volvi a poner pero no me sale nada, sere que hice un desastre antés, jajaja, es que yo trasteo mucho la plantilla mi error... La cosa es que lo volvi a poner, cuentame para ver que tal, pero yo no veo NADA...Por cierto una ayudita más porque donde tengo
    Autor:Yaja, la fecha y comentarios me sale pegado yaja de la fecha que le paso, hay no?...me rindo...que le pasa a mi blog HELP besitos y gracias por todoooooooooooooooooooo eres íncreible.

    ResponderEliminar
  23. hola amigo.

    desde hace un para de dias estoy buscado una informacion, que para ser sincero se me olvido como hacerlo ¡ falta de practica!. la pregunta es. como puedo ver el creador de un tlemplate o mejor la pagina que lo creo? hay una forma en la cual se ve con las herramientas de desarrollo web del navegador. si tu sabes o algunos de tus contactos te lo agradezco

    ResponderEliminar
  24. Microboy90, lo que yo uso y que también puedes usar es una tabla HTML, ahí agregas en una celda el código de los botones de compartir, y en otra celda los códigos de esa área que generalmente son del post-footer.
    De esa forma quedará perfectamente alineado.

    ResponderEliminar
  25. MHermon, las páginas de Blogger no son leídas por el feed, así que no hay manera de que esta información sea visible en el feed cuando se actualiza.

    Yaja-, en el código de arriba de donde pusiste ese código eliminaste sin querer una llave de cierre. Mira esta entrada para que veas de qué hablo y cómo solucionarlo:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  26. Potro, disculpa mi ignorancia, pero cuando yo actualizo el blog con un post nuevo, inmediatamente el feedburner lo actualiza y le llega a mis suscriptores y a todas las demas paginas que estoy afiliado. Sin embargo, cuando actualizo algun video en otra pagina que no es la principal o home, no sucede lo mismo. Lo que yo queria saber es si se puede hacer que se actualice como lo hace la principal o home. Bueno, al parecer no se puede. Gracias de todas formas.

    ResponderEliminar
  27. yo hago una consulta , se pueden mover el orden de los botnes?? , osea que quede

    Facebook

    twitter

    los circulos de google

    ResponderEliminar
  28. Potro ¿Adivina? ya pude solucionarloooooooooooooo Yeiiiiiiiiii! pareció díficil a la final le cogi el gustito, (GRACIAS) solo agregue la llave que elimine :D, le cambie el tamaño y pués lo puse en negritaaaaa...Soy lo máximo pero sin ti no lo hubiera podido hacer, y como se ha vuelto costumbre porque los datos de Autor, Fecha, Comentarios arribe de los artículos salen pegados te diste cuenta bueno mas bien solo sale pegado el nombre del autor osea sale algo como Autor: Yaja-martes, agosto 09, 2011 ugmm ahora que borre jajaa please help y tu aseguro que no molesto másssssssssss y otra cosita la plantilla sencilla de blogger pie de la página tienes unos circulos que no sooporto eso se puede quitar, son como puntos, diseños que se yo muacks abrazo...ahora no molesto de nuevo si me ayudas :D (dime la verdad te estoy cansando cierto jaja)

    ResponderEliminar
  29. Hola potro me gustaria hacer un deslizador de imagenes como el de esta pagina http://elegantthemes.com/preview/eStore/ me podrias ayudar?

    ResponderEliminar
  30. MHermon, creí que te referías a las páginas estáticas. Las entradas antiguas no se actualizan en el feed, esto es porque el feed es únicamente para mostrar las últimas actualizaciones de un sitio, así que las entradas que ya no son tan nuevas no las actualiza porque se supone que deja de ser relevante para los lectores.

    Juampi, claro, puedes reconocer cada botón porque cada uno empieza con <li> y termina con </li>
    Cortando cada código que empieza y termina así puedes moverlo de lugar.

    ResponderEliminar
  31. Genio en Potencia, esa información sólo puede verse directo en la plantilla o desde el código fuente del blog, siempre y cuando el autor haya dejado los créditos (casi siempre es así), y que quien usa la plantilla no los haya eliminado.
    Regularmente encontrarás esa información antes de los primeros estilos.

    ResponderEliminar
  32. Yaja-, no te preocupes, no es molestia ;)
    Busca el código que corresponde al autor y sepáralo del otro que tengas.

    Los puntos los puedes quitar buscando y eliminando esta parte en negrita:
    .blog-pager {
    background: $(paging.background);
    }

    Abrazos!

    ResponderEliminar
  33. Un abrazo de vuelta, pero vengo con la cabeza un ochooooooooooooooooooooooo...por mas que copie, pegue, quite, eso sigue estando pegado e iclusive lo corte para que comentarios quedara al lado del nombre del autor y habia el espacio correcto, pero cuando pego la fecha del lado de comentarios con el supuesto espacio me sigue saliendo pegado, no se que estoy haciendo mal y solo es la fecha más nada osea... :S socorreme ángel!

    ResponderEliminar
  34. Y para colmo la fecha tiene un subrayado de puntitos como puedo quitar eso :S ayudame por favor... :D

    ResponderEliminar
  35. nice nice...;)

    .BotonesSociales li a {
    font-weight:bold; /* Texto en negrita */
    text-decoration:none;
    color:#1C1C1C !important; /* Color del texto */

    display: block;
    }

    ResponderEliminar
  36. Muchas Gracias Potro! PD: Agregado a G+ :D

    ResponderEliminar
  37. Yaja, probemos con esto, busca esta parte y elimínala:

    .post-header {
    background: ;
    border-top: 1px dotted #bdbdbd;
    border-bottom:1px dotted #bdbdbd;
    }

    Eso quitará esos bordes de puntos que aparecen arriba y abajo.
    Ahora, en lugar de ese código pon este:

    .post-timestamp {
    margin-left: 0 !important;
    }

    Eso deberá corregir ese espacio de la fecha.
    Saludos.

    ResponderEliminar
  38. Beben Koben, thank for the CSS property :)

    Sergio Molina, gracias a it por tu visita!

    ResponderEliminar
  39. :D esta ves te aseguro que no vengo a pedir ayuda ni vengo a consultar nada de nada, solo vine a darte las gracias, por toda tu ayuda y lo mejor es que siempre lo hicistes de una manera, educada y amable, agradecida de verdad, verdad, ojala sigas cosechando exitos con tu gran blog, que ha servido de ayuda para muchos de nosotros(as), gracias la verdad...un beso y sigue asi! Mientra haya salud para adelante como lo ha sido hasta ahora...muacks

    ResponderEliminar
  40. Y dísculpas mis faltas ortograficas :S

    ResponderEliminar
  41. Te acuerdas que escribí que no iba a molestar ya, pues no es cierto (jajá) necesito preguntarte algo porque asi soy yo :S, pero con lo amable y lindo que eres seguro me respondes hay alguna manera para que los titulos de: Entradas Antiguas, Entradas recientes y página pricipal tengan un tamaño de letra mucho mas grande (es que lo veo muy pequeño en mi blog) se puede, si es así me puedes ayudar y gracias otra ves muacksss...chau, que si me quedo sigo preguntando :D Suerte!

    ResponderEliminar
  42. Muchas gracias por tu amable comentario Yaja, algo me decía que te leería pronto :P
    Para hacer más grandes esos enlaces sólo busca esta parte y agrega lo que está en negrita:

    .blog-pager {
    background: $(paging.background);
    font-size:14px;
    }

    Esos 14px los puedes cambiar por el tamaño que quieres.
    ¡Saludos!

    ResponderEliminar
  43. Hola Potris ! Te escribo por otra cosa que nada que ver con el post. En mi blog tengo metidos unas publicidades que no se de donde salen. (http://drgoliamiguel.blogspot.com/) como las saco?

    ResponderEliminar
  44. Buen día: Bueeeeno, hice sólo el botón de agrégame a Google+ me quedó algo raro, pero bue...lo de menos ya lo arreglaré. Lo que me parece es que el de Google+ lo que hace es un enlace directo a nuestro sitio Plus Google, no nos invita a unirnos por ningún lado, supongo que habrá que esperar que pase el período de prueba. Gracias

    ResponderEliminar
  45. :D con que sabías que me pasaría por aquí :D, bueno pues que te digo! jajá, en verdad mil gracias por todo, siempre tienes una ayuda que resuelve mis dudas, te lo agradezco infinitamente te mando un abrazo y esperere los próximo post, que seguro tienes algo nuevo....Besos!

    ResponderEliminar
  46. Amigasoo... usted que es el mejor del mundo y uno de los blogs que no dejaría de leer para perfeccionar mi espacio, quisiera saber si nos colaboras con una barra flotante como la que aparece en este blog Hipertextual para compartir en redes sociales Twitter, facebook y el botón +1

    Enlace: http://alt1040.com/2011/08/5-caracteristicas-que-posiblemente-no-conoces-de-twitter

    Estoy atento... Gracias de antemano por sus excelentes aportes.

    ResponderEliminar
  47. Hola potro amigo necesito tu ayuda urgente...Hace algunas semanas estube consultando sobre como cambiar de blogspot.com a misitio.com utilizando CDMON, hice lo del registro CName y todo salió perfecto.

    Luego me interesó tener un correo del tipo minombre@midominio.com y me recomendaron google apps para hacerlo, bueno me registre y llegue hasta el paso de los registros MX.

    Aquí empiezan mis problemas.

    En CDMON tengo deshabilitada la opción de crear regitros MX porque tengo en primer lugar una redirección por CName y esto afecta directamente los registros MX ¿y ahora? no se que hacer ayudameeee porfavorrr

    ResponderEliminar
  48. JantonioSR, por nada!

    Maria Rosa Golia, usualmente esos anuncios los agregan los contadores de visitas, prueba eliminándolos. Si has agregado recientemente un gadget igual elimínalo hasta con dar con el responsable de esa ppublicidad.

    ResponderEliminar
  49. MARIA ELENA, en efecto el de Google+ es sólo para que enlace a nuestro perfil de Google+ y ya el usuario decidirá si usa la opción de Añadir a círculos, que de hecho es la misma función que sería con el de Facebook, los manda a la página y ya el lector decide si se hace fan, o amigo en caso de que sea el perfil personal.

    Yaja, gracias por el beso, otro para ti!

    ResponderEliminar
  50. Diego Gómez, muchas gracias por tu comentario, aunque el mejor no soy ;)
    Tengo una entrada que explica cómo poner esos botones aunque no tienen el efecto deslizante, en días próximos haré una adaptación del mismo, mientras tanto te dejo el enlace de los botones flotantes sin efecto:
    http://ciudadblogger.com/2011/07/botones-flotantes-para-compartir-de.html

    ResponderEliminar
  51. admin, edita el registro CNAME, dale click en el icono de la herramienta y luego en Redirección por IP, ahí agrega este valor:
    74.125.95.121

    Guarda los cambios y ya podrás crear tus registros MX, cuando termines edita de nuevo el registro CNAME y regrésalo como estaba.
    Cualquier otra duda sobre ese tema la vemos en esta entrada:
    http://ciudadblogger.com/2010/11/configurar-correo-personalizado.html

    Saludos.

    ResponderEliminar
  52. Gracias Potris :) esto haré.
    Besooooooooos!

    ResponderEliminar
  53. Potro, por acá te respondo, soy mayor, tengo 19 años. me paso que se autocompleto mi fecha de nacimiento por el sistema que recuerda los datos Google Chrome, y se puso 2009 ni idea porque motivo y me di cuenta tarde. En base a la entrada que me pasaste no puedo migrar nada porque me inhabilitaron la otra cuenta de Google y no tengo el mínimo acceso. Deci que tenia otra cuenta asociada a mi blog (esta que te estoy comentando) pero mira mi blog: http://www.planeta-grandt.com.ar/ se me están borrando todas las imagenes, yo supongo tenía casi 5000 en la otra cuenta y todas las estadísticas que tenía en Docs :S y ahora que hago? :S Creo que nunca mas recupero las imagenes si me dan la cuenta de nuevo, digo yo. :(
    Recién me puse en contacto con Google rellene tipo un formulario, espero me respondan rápido :(

    ResponderEliminar
  54. La recupere Potro! :D
    Una amiga de acá de internet vinculo su tarjeta de crédito y recupere la cuenta.!
    Gracias por tu ayuda!

    ResponderEliminar
  55. Excelente! Qué bueno que ya pasó todo :)

    ResponderEliminar
  56. Mil gracias por la invitación Potro, ya me pude unir :D

    ResponderEliminar
  57. Potro ..lo k no encuentro es el usuario de mi g+,no se donde sale,porfavor ayudame!!

    ResponderEliminar
  58. Es una serie de números, pero para que te sea más fácil da click a tu perfil en Google+ y copia la URL que aparezca en la barra de direcciones.

    ResponderEliminar
  59. hola Potro, no pude ponerlos, no se donde coloco la segunda parte, le doy en agregar gadget y me sale la ventana de los gadgets pero no para editar en HTML u.u

    ResponderEliminar
  60. Cuando te aparezca la ventana verifica que del lado izquierdo diga 'Lo básico', entonces del lado derecho busca el que se llama 'HTML/Javascript'.

    ResponderEliminar
  61. alguien me ayuda no encuentro esta parte
    Añadir un gadget | HTML/Javascript
    para añadir el codigo novato alfin porfa me ayudan diciendome ke debo hacer?

    ResponderEliminar
  62. Sigue las instrucciones al pie de la letra, verás que das con el lugar correcto que necesitas encontrar.

    ResponderEliminar
  63. Gracias! me sirvieron perfectamente!!! =)

    ResponderEliminar
  64. Hola a todos, a ver si me podeis ayudar
    tengo el blog casa-lola-beceite.blogspot.com y tengo las estadisticas de bloguer, pero como tengo cuenta en adwords y de web tengo mi blog desearía preguntar si puedo poner googleAnalytics en mi blog
    y como puedo hacerlo

    ResponderEliminar
  65. Claro que puedes ponerlo lola, sólo tienes que ingresar a Google Analytics (con tu misma cuenta de Blogger), dar de alta tu blog, y te dará un código, ese código lo debes pegar en la Edición HTML de tu blog, justo antes de </body>

    ResponderEliminar
  66. Hola, soy un poco novato en el tema, quisiera hacerle una consulta. En la parte donde pone "usuario" que tengo que poner, la dirección del elink de la pagina de facebook?

    Gracias

    ResponderEliminar
  67. Hola malakita,

    Ahí debes poner tu nombre de usuario de Facebook, o bien, para que no te compliques, cambia todo esto:
    http://www.facebook.com/usuario

    Por la dirección de tu perfil de Facebook. Saludos.

    ResponderEliminar
  68. Felicitaciones x tu blog, esta genial!!

    He implementado los botones de las redes sociales, y el efecto esta muy bien.
    Me interesa ponerlos no en vertical como aquí, sino en horizontal y sin los textos.
    He quitado los textos, y he puesto el gadget en la parte superior de la página, funciona bien pero solo aparecen la mitad de las imágenes.

    como hago para que aparezcan las imágenes completas sin tener que reducirlas.

    Porfi ... ayúdame

    ResponderEliminar
  69. Hola maría, ¿en cuál blog los has puesto?

    ResponderEliminar
  70. Muy buenos, ahora que tenga tiempo veré en implementarlos para ver que tal se ven. Gracias Potro =)

    ResponderEliminar
  71. Hola Potro.
    El efecto de estos botones me gusta, movimiento de boton y cambio de color del texto me parece estupendo. Adapte esto para otros botones y el efecto es muy bueno, sin embargo cuando lo implanto en el blog deja de funcionar el fanbox de twitter y el gadget de twitter que muestra las actualizaciones de una lista. Parece que hay cierta incompatibilidad con los scripts de twitter.
    Se puede solucionar esto?
    Mi blog es www.gastronomiasolar.es

    ResponderEliminar
  72. Hola Andrés,

    Estos botones no usan nada de script así que no deben interferir con nada más. Es posible que al ponerlos estés eliminando otro código, una llave de cierre quizás. Necesitaría verlo puesto para saber con exactitud qué sucede, pero por si las dudas mira esta entrada, a ver si no es eso:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  73. Hola.
    De nuevo aquí dando lata. He puesto los botones otra vez, quedan muy bien y quisiera mantenerlos, pero como te comenté ni bien los instalo se desactiva el fanbox de twitter y el gadget que muestra las actualizaciones de una lista en twitter.
    Lo estoy dejando asi para que lo veas y me digas si tiene solución.
    Mi blog es www.gastronomiasolar.es
    Gracias y que tengas un buen día.

    ResponderEliminar
  74. Hola Potro, estos botones me van a volver loco. los puse dentro de una tabla de 1 celda y se solucionó lo de los gadgets de twitter. Pero ahora sucede que no aparece el fanbox de facebook.
    No sé que puede ser, se que no usan scripts y porque me afecta a los gadgets laterales, no entiendo.
    Si puedes lánzame un cable por favor

    ResponderEliminar
  75. Vaya, eso es raro, no debería interferir una cosa con la otra.
    Veo que tu gadget de Facebook está en FBML, ¿has probado ponerlo en HTML?

    ResponderEliminar
  76. Estás en todas Potro, ya solucionado el problema, era eso, todo funciona correctamente.
    Mil gracias
    Un abrazo, que tengas un fin de semana excelente

    ResponderEliminar
  77. Hola El Potro!!!Por aca de nuevo,agregue lo de ]]>,y después agregue una sola linea como aclaras,asi practico,subí un icono de youtube como archivo png en dropbox y lo puse en la carpeta publica,como antes en otro foro me indicaste.
    Dudas:
    -Si desconecto el dropbox no sale la imagen.
    -Y quisiera que cuando le den clic salga a otra pagina,es decir no en la misma que busque el enlace del blogger.
    Como siempre muchas gracias y espero que me puedas entender y ayudar,saludos

    ResponderEliminar
  78. Hola Compañia EnCuerpo,

    Si pones el archivo dentro de la carpeta Public entonces debe verse aun cuando cierres Dropbox, pero debes asegurarte que cuando lo has puesto dentro de la carpeta Public tenga el icono en color verde que indica que se subió con éxito a la red.
    Para abrir enlaces en otra ventana mira esta entrada:
    http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

    Saludos.

    ResponderEliminar
  79. Gracias El Potro!!!!me resolviste el problema y lo del enlace en otra ventana es oro esa info,eso si me volvi chino pero le agarre la mano,muchas gracias una vez mas,saludos

    ResponderEliminar
  80. Te deseo lo mejor, potro, me has salvado la vida con tus consejos. ERES LO MÁXIMO.

    ResponderEliminar
  81. Muchas gracias KAMASUTRA LIVE, saludos!

    ResponderEliminar
  82. Hola mucho gusto en mi Tumblr quiero agregar un "gadget" o no se como le llaman que diga "ask me anything" pero no se como, traté de ponerlo y no funcionó pues cuando le daba click decía "Not found" ¿me podría ayudar?

    ResponderEliminar
  83. Hola Andrea,

    Me encantaría ayudarte pero nunca he usado Tumblr, todo lo que hay aquí es para la plataforma de Blogger :(

    ResponderEliminar
  84. No hay una forma de que asi como se puede poner un boton sencillo de compartir en cada entrada, que este el botom de me gusta allado o abajo?, supongo que asi se lograra aumentar mas los fans de facebook, pues aveces en la derecha la gente no se mete, pero a lo mejor vieno la entrada, le de a me gusta por verlo mas facil y hasta inconsientemetne simplemente proque le guste el tema y no necesariamente la pagina de facebook, se puede eso? no un fanbox, sino el botom me gusta solo

    ResponderEliminar
  85. Sí, en esta entrada puedes ver cómo poner el botón Me gusta de Facebook:
    http://ciudadblogger.com/2011/01/agregar-el-boton-me-gusta-de-facebook.html

    ResponderEliminar
  86. Hola d enuevo Potro!

    Agrege estos botones pero tengo un par de problemas.

    Por un lado me gustaria que fueran un poco mas chicos. Por otro lado, bajo el último botón aparece como una celda, podria quitarla de algún modo?

    gracias

    ResponderEliminar
  87. No te puse el enlace del blog: http://secretec-servicios-empresariales.blogspot.com/

    ResponderEliminar
  88. Hola secretec s.c.,

    Debajo de .BotonesSociales img { agrega las medidas que quieres, por ejemplo:
    width:40px;
    height:40px;

    Lo otro de la celda no lo he visto, al menos no en el blog que dejaste como referencia.

    ResponderEliminar
  89. Hola Potro. Lo de la celda se ha ido solo creo, ahora no sale. Pero lo del tamaño no me funciona. Lo añadi justo como me dijiste y le cambio los valores y no cambia nada. Tengo que eliminar lo que había antes?

    ResponderEliminar
  90. Hola secretec s.c.,

    Ningún cambio ahí te va a funcionar porque un poco más arriba eliminaste una llave de cierre sin darte cuenta:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  91. Ah!! Ya lo encontre!!! me ha costado eh"! Pero lo localicé.... Uff que subidon...jajaja. Grcias

    ResponderEliminar
  92. Hola de nuevo Potro. Aqui con el nuevo año vuelvo a la carga.

    Para empezar felicitarte el nuevo año.

    Y para seguir te voy a cintinuar dando la lata con esto un rato, sorry. Veamos, ya conseguir poner esto en condiciones, pero cuando pincho sobre el boton, me dirige a una pagina que dice que no se encuentra la pagina solicitada.

    Me puedes aclarar que tengo que poner donde pone usuario, porque supongo que es eso lo que esta fallando...


    Te dejo el link del blog de nuevo http://secretec-servicios-empresariales.blogspot.com/

    ResponderEliminar
  93. Hola secretec s.c.,

    Feliz inicio de año para ti también :)
    En efecto la URL es la que está mal, donde dice "usuario" debe ir tu nombre de usuario de Facebook, no tu correo. Por ejemplo, mi nombre de usuario en Facebook es fans.ciudadblogger
    Por lo tanto, la URL completa (en mi caso) quedaría así:
    http://facebook.com/fans.ciudadblogger

    Eso que está al final es el nombre de usuario.
    Saludos.

    ResponderEliminar
  94. Hola de nuevo, Potro. Acabo de añadirlos. Sólo me queda la duda de que.." a ver hacia donde enlazan", porque mis nombres en esas redes sociales aparecen como números en la url...si introduzco mis nombres de usuario respectivos me sale error.
    Lo que me da "miedo" es que haya redirigido hacia mi perfil pero ya logueado, como yo estoy viéndolos, vaya, jeje, por eso te lo pregunto.
    por lo demás, encantador y muy fácil, como siempre nos lo haces, hasta alguna modificación le he hecho.
    Imagino que si diseño unos botoncitos nuevos sólo tendría que incorporar las url de donde los aloje, ¿no?
    Muchas gracias, Potro.
    Un beso

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Sofía,

      En efecto, si después quieres cambiar el ícono sólo cambia la URL de la imagen por la de la nueva imagen que quieras.
      Con lo de las redes sociales parece que llegué tarde, porque acabo de entrar y ya los veo funcionando bien, cualquier cosa me comentas ;)
      Besos.

      Eliminar
  95. hola una consulta, como hago para que los botones quede arriba en la cabecera como tu blog?. saludos

    ResponderEliminar
    Respuestas
    1. Puedes dividir la cabecera para ponerlos ahí:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

      Eliminar
    2. esto también me interesa MUCHO....ay, qué de posibilidades buenas nos regalas!!, me entra el estrés porque quiero hacerlo todo!!, jaja. ¡besos!

      Eliminar
    3. Jajaja, me pasa igual pero al revés, de pronto encuentro tantas cosas que les quiero compartir y quiero hacerlo todo al mismo tiempo :P
      Besos!

      Eliminar
    4. pues vamos a tener que tomar tila o valeriana los dos, jajajaja.
      Y no te dejo dicho ni la décima parte, Potro, por no llenar de mensajes todo esto, veo mil cosas al día que me encantan y quiero poder hacer..¡¡¡¡¡¡..pero me controlo
      ..bueno, despacito, ¡que hay tiempo! y así se disfruta más, :)
      De todas formas para hacer algo como lo que tú tienes hecho encima de la cabecera (lo de los enlaces a las redes) hay que replantearse algo por encima de la cabecera por ejemplo en un blog como el mío, diseñarla en la mente y luego poder situar esos botones, porque si no me equivoco quedarían en vertical a menos que se hiciera una tabla en html o..no sé se pusiera un gadget para cada uno midiendo los píxeles que ocuparían, el tanto por ciento de la medida del ancho, ¡no?...en fin..que parece muy sencillo diseñar un plantilla cuando la ves hecha y, je, porque tú explicas muchas cosas, pero con nada que se piense bien se ve que todo esto tiene mucha miga, y que no está pagado con nada lo que nos regalas, Demasiado todo lo que explicas, Potro. Por eso no me cansaré de agradecerte nunca-nunca y será siempre poco, muy poco.

      Eliminar
    5. Y yo cómo les puedo agradecer a ustedes, estamos igual por donde lo veas :)
      En una tabla quedaría bastante bien, así estaría alineado y menos complicado, aunque las tablas a veces parece que dan miedo, pero lo resultados pueden ser muy buenos. Nada má sería ubicar esa tabla en el lugar que quieras. Ya me dirás cuando te animes a hacerla para que veamos cómo ponerla, tú no te preocupes ;)

      Eliminar
    6. Gracias, :)...pues perdóname el abuso, me animo a pedirte más ayuda: Por ahora me conformo con dejarlos donde están pero que queden horizontales, porque así alargan mucho esa zona y queda muy desequilibrado todo...¿es muy complicado? Si sí, no te molestes, por favor.
      Si no, pues ya los pongo y cuando los tenga rediseñaré unos en otros colores y ya luego los sustituyo cuando tenga el código bien colocado con lo que tú me digas.
      :)
      Un beso y buenas noches desde acá.

      Eliminar
    7. Pues mira, si es con estos botones que ya usas entonces es muy fácil, de hecho no tendrías que usar tablas ni nada. Sólo agrega debajo de .BotonesSociales li { esto:
      display:inline;

      Con ese simple cambio se pondrán horizontales.
      Un beso de buenos días desde allá, porque acá apenas me voy a dormir :)

      Eliminar
    8. jaja, ¡qué fácil!, parecei increíble cómo me complico la vida...ya está, Potro..lo único que no consigo es que se me queden en el mismo "renglón", ya para cuando pases tu noche, :), aunque lo intentaré en el día.
      ¡besos y feliz descanso!

      Eliminar
    9. Sólo hay que hacerle unas pequeñas modificaciones.
      Esta parte del código:
      .BotonesSociales span {
      padding-left:10px;
      }


      Cámbiala por esta:
      .BotonesSociales span {
      padding-left:0;
      }


      Y esta:
      .BotonesSociales li {
      display:inline;
      border:1px solid #ffffff !important; /* Color del borde */
      padding:5px !important;
      margin:0 5px 6px 5px;
      background:#ffffff; /* Color de fondo */
      list-style:none;
      }


      Por esta:
      .BotonesSociales li {
      display: inline;
      border: 0;
      padding: 0;
      margin-right: 5px;
      list-style: none;
      }


      Besos!

      Eliminar
    10. ajajaja, ¡¡yupiii!!...¡¡síiiii!!!..qué grande eres, Potro. Ya está listo. Esta mañana anduve toqueteando por esos "pad/border/margin", jaja, intuía que por ahí debía andar el lío, pero ni por casualidad podía acertar, :DDD
      ya han quedado PRECIOSOS.
      Muchísimas gracias por tanta ayuda que me das.
      Un beso enorme

      Eliminar
    11. Por nada Sofía, siempre es un placer poder hacer algo por ti :)
      Besos.

      Eliminar
  96. Hola potro!
    nada incapaz.....sólo quiero que salgan los iconos como los tuyos ....No soy capaz de ponerlos redondos, ni horizontales eso que cambie la palabra "vertical" por "horizontal".Tampoco los hago mas pequeños eso que cambie los px , ni cambiarlos de color, lo que cambio es el texto de sigueme

    Gracias

    ResponderEliminar
  97. Ah otra cosa cuando tengo que cambiar la palabra usuario, que tengo que poner mireinoportuloft.blogspot.com o la url del face y la url del twitter


    Mas gracias

    ResponderEliminar
    Respuestas
    1. Tienes que poner sólo el nombre de tu usuario. O si te es más fácil borra toda esa URL y en su lugar pon la tuya.
      Redondos no van a salir a menos que les pongas una imagen que ya sea redonda. O bien, si lo prefieres, agrega debajo de .BotonesSociales img { esto:
      border-radius:48px;

      Eso hará que se ponga redondos, sólo que en Internet Explorer es posible que no se vean así.
      Si ya lo has hecho todo y no se ve nada, dime en cuál blog lo has puesto para que pueda saber qué está fallando.

      Saludos.

      Eliminar
  98. Hola potro, nada no se ponen redondos en Chrome tampoco, y no funcionan no se si habre eliminado demasiado. en la parte que hay que poner antes de ]]><b:skin o en diseño html/javascript, xq BotonesSociales img {lo hay en los dos lados

    el blog es mireinoportuloft.blogspot.com

    millones de gracias por las molestias..... y las que te dareeeee

    Mayte

    ResponderEliminar
    Respuestas
    1. Cuando has puesto el código de los botones has eliminado la llave de cierre del código que está arriba, eso ha hecho que dejen de aplicarse esos estilos:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. Hola potro!!
      He copiado y pegado lo que yo he puesto en Diseño | Edición de HTML, y no se donde falta la } de cierre. Tambien puedes ver los colores que puesto (#88BB21)y tampoco me cambia el color.....

      Ves algo raro???

      Mil gracias x tu tiempo

      Mayte



      /* Botones de Redes Sociales
      ----------------------------------------------- */
      .BotonesSociales li {
      border:1px solid #6E6E6E !important; /* Color del borde */
      padding:5px !important;
      margin:0 5px 6px 5px;
      background:#88BB21; /* Color de fondo */
      list-style:none;
      }
      .BotonesSociales li a {
      font-weight:bold; /* Texto en negrita */
      text-decoration:none;
      color:#1C1C1C !important; /* Color del texto */
      }
      .BotonesSociales li a:hover {
      color:#2E9AFE !important; /* Color del texto al pasar el cursor */
      position:relative;
      top:1px;
      left:1px;
      }
      .BotonesSociales span {
      padding-left:10px;
      }
      .BotonesSociales img {
      border-radius:48px;
      horizontal-align:middle;
      border:0;
      }

      Eliminar
    3. No, ahí no, justo arriba de ese código verás que eliminaste una llave de cierre. Mira el código que tienes arriba de ese, ahí verás lo que falta.

      Eliminar
  99. hooola!! Potro muchas gracias por estos trucos en verdad son muy buenos, pero sabes tengo una preguntoooota!! waaaa.. lo que pasa es que al momento de pegar el codigo no.1 se ve en mi blog tooodo el código, bueno eso me pasa al ponerlo como vistaprevia.. PODRIAS DECIRME QUE HICE MAL??

    : ) y gracias por resolver nuestras dudas

    ResponderEliminar
    Respuestas
    1. Hola tsubaki. Busca de nuevo el código SKIN, hay dos parecidos, si lo pegas en el primero (el que no es), hará que se muestren los códigos en el blog, pero si lo haces en el segundo (el correcto), funcionará bien :)

      Saludos.

      Eliminar
  100. Hola Potro, mira yo quisiera poner algo así pero como sale en ésta imagen que te dejo que lo vi en una web http://goo.gl/4EL3N

    La verdad no se cómo estan puestos si demanera independiente y juntos o en un menu dentro de una gadget...me podrias decir cómo tendria que hacer?

    ResponderEliminar
    Respuestas
    1. Posiblemente están dentro de una tabla, de esa forma cada celda tiene un color distinto:
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
  101. Ah bueno Potro la verdad que te deberia haber dejado la URL de esa web para que lo vieras bien...aca te la dejo http://goo.gl/rdeK

    Y supongamos que sea una tabla, como es el asunto del boton me gusta de Google, me gusta de Facebook y el de twitter? como es tema de los códigos de esos botones que te mensione?

    ResponderEliminar
    Respuestas
    1. Aquí los puedes conseguir:
      https://twitter.com/about/resources/buttons
      https://developers.facebook.com/docs/reference/plugins/like/
      http://www.google.com/intl/es/webmasters/+1/button/index.html

      Eliminar
  102. Potro, he seguido muy de cerca tus post, muchos de ellos se presentan en mi blog, en este momento tengo una pregunta, quise quitarle las margenes a los botones y al momento de hacerlo efectivamente se quitaron pero salieron unas rayitas consecutivas debajo de los botones , como quito eso, http://movingforwardcolombia.blogspot.com/ . Gracias

    ResponderEliminar
    Respuestas
    1. Hola Andres, entré a tu blog pero no veo las rayitas que mencionas, no sé si ya lo habrás resuelto. En caso contrario házmelo saber. Saludos.

      Eliminar
  103. Potro probe de poner el codigo del boton de google en un gadget HTML en la sidebar pero me genera un spacio hacia la orilla del bloge, por que pasa eso?

    aca te dejo el blog para que veas http://goo.gl/DN8iZ

    ResponderEliminar
    Respuestas
    1. Es porque el botón de Google+ tiene un ancho de 450px, por eso no es recomendable ponerlo ahí, a menos que quites la anotación (el texto "Recommend this on Google").

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

    ResponderEliminar
  105. Como hago para que aparescan uno al lado del otro osea horizontal y no como me queda en mi blog uno debajo del otro? y aparte me salieron 2 puntos negros al costado de cada icono, como lo saco? Muchas gracias por tu ayuda :-)

    ResponderEliminar
    Respuestas
    1. Agrega debajo de .BotonesSociales li { esto:
      display:inline;
      list-style:none;

      Eliminar
  106. Hola potro, gracias, pregunta: cómo agrego a estos botones uno que diga "suscripción por email" además del rss? Es decir, mi idea son 4 botones: twitter, facebook, rss, y suscripción por email. Los tres primeros los tengo claros, pero el último, con un ícono de un mail y como texto "suscripción por email" no sé cómo ponerlo....

    ResponderEliminar
    Respuestas
    1. Hola María de las Mercedes, mira el final de la entrada, ahí dice cómo agregar otro botón más. En el caso de la URL puedes tomarla desde Feedburner en la opción de suscripción por correo electrónico.

      Eliminar
    2. Gracias potro! Otra cosa, ví en un comentario que a uno le aparecen unos puntitos negros adelante de los botones y probé la solución que le diste pero no me funcionó a mi. El blog es directorioblogserviciosycomercios.blogspot.com.ar En los botones de las redes sociales me aparecen eso que ves que también está en los otros gadgets...puse lo de "list-style:none" pero no me funcionó, siguen así....

      Eliminar
    3. Supongo que ya lo has arreglado porque no veo los puntitos que mencionas.

      Eliminar
    4. Hola Potro, Fijate en mi blog buscandolabuenasuerte.blogspot.com.ar que vas a ver que delante de los iconos de twitter, rss y youtube está esa cosita que quiero sacar y no sé cómo!!! Gracias!

      Eliminar
    5. Busca esta URL y elimínala:
      http://4.bp.blogspot.com/-qu4C_Ka_o18/Tzt2zhgt4pI/AAAAAAAAE94/2Hl4LEhICyY/s000/link_12x12.png

      Eliminar
  107. Hola potro!!! Tengo un problema grave...cada vez que agrego algo antes de ]]> aparece todo escrito arriba de la cabecera, no sé porqué.... habré cambiado algo y no me dí cuenta??? espero me puedas ayudar!!!!

    ResponderEliminar
    Respuestas
    1. Posiblemente hay un error al colocar el código. Hay dos etiquetas parecidas, una es <b:skin><![CDATA[/*
      La otra es ]]></b:skin>

      Los códigos CSS se deben agrega antes de la segunda, si lo colocas antes de la primera entonces se mostrarán en la plantilla arriba del todo.

      Eliminar
    2. Listo, solucionado....jajaja quiero agregar botones sociales arriba de la subscripción por email: facebook, twitter, youtube y rss, horizontalmente, se puede en el mismo gadget??? Usando esta entrada que tenés acá pero modificándola un poco?? El problema es que en el gadget de la subscripción también tengo el CSS de eso....no sé cómo hacerlo!!! Gracias.

      Eliminar
    3. Ya te he respondido en la otra entrada. Saludos.

      Eliminar
    4. Bueno, hice lo que propusiste en la otra entrada, pero el estilo de la subscripción por email, que estaba ahí dentro del gadgets, se borró y desapareció la imagen que estaba y cómo estaba armado, y los botones quedaron verticalmente, con un punto negro adelante. Voy a probar ponerlos en otro gadgets...

      Eliminar
    5. Bueno, instalé los botones arriba de la subscripción por mail, pero no me quedaron como esperaba...son de 48x48 y están muy sobre la izquierda....cómo arreglo eso? Agarré los estilos que tenés acá y le saqué lo del borde y el background y le agregué lo de display y el style...y también me gustaría que al pasar el cursor tenga también algún estilo y se pueda leer el nombre, se entiende? gracias!

      Eliminar
    6. Busca esta parte:
      .sidebar ul {
      list-style: none;
      margin: 0 0 0;

      Cambia ese cero del medio por 22px con eso se moverá más al centro.
      Lo de los estilos pues ya depende de qué quieras. Puedes poner algo así:

      .sidebar li a:hover {
      ....Aquí los estilos que quieras....
      }

      Eliminar
  108. Hola Potro

    Mi duda es la siguiente, instalé estos iconos de redes sociales hace ya tiempo, y no quedaban nada mal, pero el problema es que ahora puse otros iconos porque amplié redes y ahora se ven demasiadas barras. ¿Cómo podría poner todos los iconos en una misma barra? Osea, alineados para que no ocupen tanto.
    Te dejo mi blog para que veas lo que te expliqué.
    http://www.immarophotography.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Immarophotography, no sé si llegué tarde porque entré y veo sólo unos íconos redondos al final de todo, no veo más íconos por algún otro lado.

      Eliminar
  109. Hola de nuevo

    Ya pude solucionarlo, leí un comentario más arriba con el mismo problema que el mío.

    Muchas gracias

    ResponderEliminar
  110. Gracias, muy buen aporte, voy a probar :)

    ResponderEliminar
  111. Gracias pero no se si podrías ayudarme ah hacer algo asi con los botones de compartir y si puedes explicarme paso a paso todo eso con el ejemplo de VOTACION tambien.. me seria de mucha ayuda ya que estoy planeando hacer un blog estilo desmotivaciones
    este es un ejemplo : http://i45.tinypic.com/5voec2.jpg

    ResponderEliminar
    Respuestas
    1. Tendrías que conseguir un sitio que ofrezca ese tipo de gadgets, antes había unos cuantos que ofrecían estrellas de valoración y muchas variantes, hoy creo que todos han cerrado, no sé si exista algún otro que permita hacerlo.

      Eliminar
  112. En mi blog puse el fanbox deslizable de facebook que publicas aquí en tu blog. Además de esa, yo quisiera agregar una de twitter, pero buscando algunos tutoriales y al hacerlo falla en que me aparece el fanbox de twitter pero con los segudores de facebook!! un lío, no? hay alguna manera de hacerlo??? Gracias por tu ayuda...Ni te imaginas cuánto me ha ayudado tu blog!

    ResponderEliminar
    Respuestas
    1. Hola César, ese script es la versión gratuita que sólo permite poner un gadget, lamentablemente no puedo publicar la otra forma de añadir más gadgets porque ya no entra en la licencia del autor y debemos apegarnos a ella :/

      Eliminar
  113. hola Potro ojala me puedas ayudar, quiero utilizar estos botones pero pierden su formato y adquiere el de un acordeón que puse en el blog me podrías ayudar por favor este es el blog

    gracias!!

    ResponderEliminar
    Respuestas
    1. Hola zona lerh, ¿en cuál blog lo has puesto?

      Eliminar
    2. este es el blog http://cacharpamusic.blogspot.mx/ en la seccion de redes sociales.

      gracias!!

      Eliminar
    3. Prueba agregando esto:
      .BotonesSociales li {
      float: left;
      }
      .BotonesSociales a {
      background-color: none !important;
      box-shadow: 0 0 0 #ABC inset !important;
      }

      Eliminar
    4. no paso nada potro, sigue adquiriendo el estilo del acordeon, pero si lo quito de ahi ya adquiere su estilo, mira
      http://cacharpamusic.blogspot.mx/

      Eliminar
    5. Entonces será conveniente que consideres poner los botones dentro de una tabla y no como está ahora, es decir, que en una celda pongas el código de la imagen, y en la otra celda el texto, etc.
      http://ciudadblogger.com/2009/05/insertar-tablas-en-blogger.html

      Eliminar
    6. si potro seguire tus consejos ya te dire como queda, gracias.

      saludos =)

      Eliminar
  114. hola!

    Nuevamente, grandes felicitaciones por el blog.
    Son muy didácticas y sencillas tus explicaciones. Te pido me digas como hago para incluir en mi blog los íconos tal y como están en tu blog

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario andrea, ¿los que están arriba de todo? aún no tengo una entrada sobre ello, pero estos mismos puedes hacerlos horizontales viendo el comentario #104.7 ya sólo sería que pongas unos íconos circulares.

      Eliminar
  115. Hola Potro. Estupenda esta entrada. La he implementado en mi blog, pero no se por que razón se me queda tan separado del margen izquierdo del sidebar. ¿Hay alguna solución?
    http://www.unidadyresistencia.net/2012/08/carta-de-agradecimiento-de-un.html

    ResponderEliminar
  116. Hola Potro. Estupenda esta entrada. Lo he implementado en mi blog, pero no se por que extraña razón se queda tan separado del margen izquierdo del sidebar. ¿Hay alguna solución?
    http://www.unidadyresistencia.net/2012/08/carta-de-agradecimiento-de-un.html

    ResponderEliminar
    Respuestas
    1. Hola Unidad y Resistencia, cambia esta parte:
      margin:0 5px 6px 5px;

      Por esta:
      margin: 0 5px 6px -35px;

      Eliminar
  117. hola,
    Gracias por la pronta respuesta!
    saludos

    ResponderEliminar
  118. Muchas gracias era lo que estaba buscando y no conseguia encontrarlo, me podrías facilitar o decir si hay algo para añadir el boton de Chicisimo.es te dejo mi blog te sigo!

    http://elrincondeneriky.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Ni idea, debe ser un código que maneja sólo ese sitio :/

      Eliminar
  119. Busco dos widgets/gadgets para mi blogger uno el de Last FM y otro el de Tumblr seria genial si me pudieran ayudar!

    ResponderEliminar
    Respuestas
    1. Habría que ver con exactitud qué quieres que hagan esos gadgets, aunque yo por ahora no conozco ninguno de esos servicios.

      Eliminar
  120. Que buen truco "El Potro" Como soy nuevo pues me agrado! :D

    ResponderEliminar
  121. Hola bro, pero podrias hacer un tuto de como hacer eso para que aparezca en cada entrada sin problemas?

    ResponderEliminar
    Respuestas
    1. Hola Luis, mira la categoría "Facebook", ahí hay algunas opciones de botones en las entradas.

      Eliminar
  122. Gracias Muchas Gracias Tus Post Me Han Servido Mucho. D.T.B

    ResponderEliminar
  123. hola, tengo una consulta.. es algo mas complicada: como coloco los botones dentro del header?. Esque me queda feo debajo del header, gracias

    ResponderEliminar
    Respuestas
    1. Tendrías que dividir la cabecera:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

      Eliminar
  124. Hola! quisiera meter los botones de redes sociales exactamente como los tienes en este blog, arriba a la derecha encima de la cabecera, seria posible? tienes alguna entrada especifica para eso? Muchas gracias! no se que haríamos a veces sin tu blog.... jejeje

    ResponderEliminar
    Respuestas
    1. No tengo una entrada sobre ello Nacho ya que cada plantilla es diferente, puedes probar ponerlos directamente en la plantilla, quizá después de la etiqueta BODY o alguna cercana.

      Eliminar
  125. Hola tengo otra consulta como cambio el fondo de mi cabecera como lo tienes tu, el mio es todo blanco pero me gustaria ponerlo asi gracias

    ResponderEliminar
    Respuestas
    1. Hola, el fondo depende de cada plantilla, no todas son iguales, pero en la mayoría sólo tienes que ingresar en Diseño, dar click en Cabecera y ahí subir la imagen que quieras.

      Eliminar
  126. OK gracias! pero meto despues de body algun gadget especifico que lleve imagenes con link o un menu horizontal con imagenes para los iconos, me refiero hay algún tipo de gadget para que queden como los tienes tu, lo mio es una plantilla simple.
    Muchas gracias!!!

    ResponderEliminar
    Respuestas
    1. Pues son enlaces comunes, el código de una imagen con enlace es así:
      <a href="URL del enlace"><img src="URL de la imagen" /></a>

      Para que te quede uno seguido del otro pega los demás códigos igual seguido uno del otro, sin dar saltos de línea (ENTER).

      Eliminar
    2. Muchisimas gracias conseguido!!! Te dejo otra pregunta para que la contestes cuando puedas, no quiero ser cansino jeje, como puedo quitar la opción de comentarios de las paginas del menú excepto de la Home, en contact, about etc... me gustaría poder quitarlos. He estado buscando por tus entradas pero no he encontrado nada.
      Un abrazo y mil gracias!!

      Eliminar
    3. Hola Nacho Uve, edita cada una de esas páginas, en las opciones de la derecha verás la posibilidad de deshabilitar los comentarios para las páginas que desees.

      Saludos.

      Eliminar
    4. Han desaparecido los iconos de edición rápida de mi blog y no se porque... puedo acceder a el desde blogger, pero ahí no veo esas opciones en las paginas. ¿No es muy normal no?
      Gracias!

      Eliminar
    5. Con Blogger ya todo es normal aunque no debiera serlo. ¿De casualidad ocultaste la navbar desde las opciones de la misma navbar (barra de herramientas)?

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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
¿Te gusta Ciudad Blogger?