Iconos de redes sociales arriba del blog que giran al pasar el cursor

13 de noviembre de 2012 404 comentarios ,


Constantemente me preguntan sobre la forma de poner arriba del blog iconos que enlacen a las redes sociales como tengo ahora mismo en esta plantilla, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores puedan seguirnos por las distintas redes sociales ya que les dejamos el acceso a ellas de una forma más visible.
Hay varias formas de hacerlo, nosotros lo haremos usando una lista desordenada que incluirá los iconos de Facebook, Twitter, Google+ y el feed del blog, y como un extra haremos que los iconos giren al pasar el cursor sobre ellos, como estos:


Para poner estos íconos sociales en tu blog entra en la Edición HTML de la plantilla y agrega antes de ]]></b:skin> los estilos:
/* Iconos de redes sociales
----------------------------------------------- */
#social-iconos {
width:100%;
height:50px;
margin-bottom:10px;
display:block;
clear:both;
}
.social-icons{display:table}
.social-icons ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:right;
padding:5px 5px 0 0
}
.social-icons ul {
padding:0;
float:right;
margin-bottom:0;
}
.social-icons li.social_icon {
background:none !important;
padding-left:0 !important;
display:inline;
float:left;
margin-left:6px;
}
.social-icons li:hover {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
}

Luego SIN expandir los artilugios busca esta línea:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Arriba de ella agrega la estructura:
<div class='social-icons' id='social-iconos'>
<ul>
<li class='social_icon'><a href='http://facebook.com/usuario'><img border='0' src='http://lh3.googleusercontent.com/-9RgnEDN1jFc/UKK9O1S1TPI/AAAAAAAADSk/KOIvtDu-oSM/s36/social-facebook.png'/></a></li>

<li class='social_icon'><a href='http://twitter.com/#!/usuario'><img border='0' src='http://lh4.googleusercontent.com/-KtqAlZRCokQ/UKK9PbLsnSI/AAAAAAAADSg/njBnVDn3O9I/s36/social-twitter.png'/></a></li>

<li class='social_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://lh4.googleusercontent.com/-4PWKT-fgHJ8/UKK9O7mGEPI/AAAAAAAADSY/ENZ0BHmO6TY/s36/social-googleplus.png'/></a></li>

<li class='social_icon'><a href='http://nombre-de-mi-blog.com/feeds/posts/default'><img border='0' src='http://lh5.googleusercontent.com/-6hu6NkWouSw/UKK9PIQCrHI/AAAAAAAADSc/5QI5O-H7EYs/s36/social-rss.png'/></a></li>

</ul></div>
Cambia lo que está en color rojo por tus datos y listo. El primero es tu usuario de Facebook, el segundo el de Twitter, el tercero deberás cambiar las X por el ID de tu perfil de Google+, y en el cuarto deberás poner el nombre de tu blog.

Por supuesto que puedes añadir más iconos si lo deseas, sólo deberás agrega antes </ul></div> una línea como esta por cada icono extra que quieras:
<li class='social_icon'><a href='URL del enlace'><img border='0' src='URL de la imagen'/></a></li>

Aunque están pensados para mostrarse arriba del blog puedes ponerlos donde tú quieras, incluso puedes ponerlos en un elemento HTML/Javascript, eso quedará a elección de cada quien.

El efecto que gira está hecho con CSS3 así que en navegadores antiguos este efecto no funcionará.
Los iconos son de Iconfinder excepto el de Google+ que lo he diseñado yo, pero pueden sustituirse por los iconos de tu elección.




404 comentarios en:

" Iconos de redes sociales arriba del blog que giran al pasar el cursor "

  1. Uy! Soy la primera! que buen post Potro como siempre! Genial! :D

    ResponderEliminar
    Respuestas
    1. Gracias por estar al pendiente Antonella :)

      Eliminar
  2. Interesante y bonito de ver, me lo guardo ;)
    Gracias Potro.

    ResponderEliminar
    Respuestas
    1. Vale, vale, si luego lo pones nos lo presumes ;)

      Eliminar
  3. Hola, que genial este aporte... me encanta, aunque no logre ponerlos arriba, quedaron geniales como elementos HTML/Javascript... mil gracias... :)

    ResponderEliminar
    Respuestas
    1. También se puede dividir la cabecera del blog, y luego ahí ponerlos, eso en el caso de que les dé problema ponerlo como se explica en la entrada.
      Saludos!

      Eliminar
    2. :O Orale, tienes de todo aquí, esta genial la idea... gracias, estupendo :)

      Eliminar
  4. Potro, como siempre genial !!

    Abrazos

    ResponderEliminar
  5. Muy bueno, da un sabor de elegancia con un toque minimalistico.

    ResponderEliminar
    Respuestas
    1. Yo no los veo tan minimalistas, pero si cambian los íconos por unos con colores más sobrios seguro que sí se verán de esa forma.

      Eliminar
  6. buenísimo! ya tengo botones parecidos para compartir en mi blog, pero genial el post. Saludos!

    ResponderEliminar
    Respuestas
    1. Ojo que estos no son para compartir, son sólo para enlazar a las redes sociales y el feed ;)

      Eliminar
  7. ... genial, pero a mi se me quedaron vertical, no horizontal ¿por qué?

    Saludos

    ResponderEliminar
    Respuestas
    1. Es que has omitido el primer paso, el de los estilos.

      Eliminar
    2. Ayyy qué tonta, mil gracias por la aclaración y la aportación !!!

      Saludos

      Eliminar
  8. Quería darte las gracias por tu gran web. Acabo de abrir un nuevo blog en blogger y me han venido muy bien varios de tus posts para personalizar la plantilla.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias a ti, qué gusto que estés encontrando aquí cosas para tu blog :)

      Eliminar
  9. Potro: una duda.

    ¿Tienes el enlace al "paquete" de íconos sociales puesto que, para agregar otros, sería interesante contar con el pack completo.

    ¡Saludos! y gracias.

    ResponderEliminar
    Respuestas
    1. Ayer tenía en mente ponerlo y lo olvidé por completo Miguel, pero ya lo he puesto en la entrada aunque no son muchos en realidad.
      Gracias por recordármelo :)

      Eliminar
    2. Gracias Potro y sí, una pena que sean pocos aunque de resaltar el hecho de que hayas diseñado el de G+ haciéndolo ver como parte de un único pack.

      Saludos =).

      Eliminar
  10. Muy buena potro justo lo que necesitaba para ponerlo en mi blog.

    ResponderEliminar
  11. Muy buena Potro es lo que necesito para agregarlo en mi blog. Gracias.

    ResponderEliminar
  12. magnífico post como siempre .Ahora mismo lo pruebo y ya os contaré.Gracias potro

    ResponderEliminar
  13. Gracias por el tutorial, es muy bueno como todos y quería un poco de ayuda.Donde pongo el nombre de mi blog para el feed parece que no lo pongo bien porque me sale luego al pinchar el icono un código fuente.
    A ver si alguien me ayuda.Lo segundo, si alguien ve mi blog me gustaria ponerlo debajo de las pestañas de la barra lateral izda y no se como hacerlo.
    MI blog es http://elbesosalado.blogspot.com

    gracias amigos.

    ResponderEliminar
    Respuestas
    1. El feed está bien Jesús, lo que sucede es que Chrome no muestra el feed interpretado sino que lo muestra como si lo leyera el robot. Si entradas desde Firefox sí podrás verlo.
      Lo segundo que preguntas, el último código pégalo en un elemento HTML/Javascript y ese gadget arrástralo hasta donde desees.

      Eliminar
    2. Gracias potro, un placer como siempre y agradezco de corazón tu ayuda.Es un blog muy importante para mi.Saludos y uN abrazo.

      Eliminar
  14. Como es de bien nacidos ser agradecidos, aprovecho esta misma entrada como podría haber usado cualquier otra para felicitarte por los tutoriales y trucos que muestras; como copista que no crea gracias a tu trabajo, (y otros en español) voy consiguiendo dejar el blog como me gusta.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Eres muy amable lnrs, gracias a ti por tomarte el tiempo para agradecer :)

      Eliminar
  15. Muy bueno Potro. Como yo ya tenía los iconos instalados simplemente le agregué las transiciones que indicas en .social-icons li:hover y anda perfecto.

    Un abrazo.

    ResponderEliminar
  16. Hola Potro, muy buen truco XD

    Una pregunta, como puedo hacer para que haiga un espacio entre los botones y la foto de la portada.

    http://2.bp.blogspot.com/-9YYI_0-Jg0E/UKP8zBBjTkI/AAAAAAAAA3A/dC3WiiET8OA/s1600/Sin+t%C3%ADtulo.png

    ResponderEliminar
    Respuestas
    1. Hola Nicolay, cambia el width:100%; por un valor más bajo, por ejemplo 96%

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

    ResponderEliminar
    Respuestas
    1. Exactamente no sé Calet, según parece tienes que modificar los dos 668px que aparecen en la plantilla, y posiblemente tengas que eliminar el background de .border_textured y de a.read_more

      Para centrarlo tendrías que agregar un margen izquierdo dentro de .thumbnail por ejemplo:
      margin-left: 70px;

      Pd. He tenido que eliminar el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Muchas gracias ya lo modifique, y si tenías razón con lo de eliminar los backgrounds ya que me permitió centrar y ajustar las imágenes...Desearía ponerle un borde a las imágenes en la portada, para que la estética no se vea alterada ¿¿se podrá??
      De todas maneras gracias, como siempre el mejor!!!

      Eliminar
    3. Sí, sí se puede:
      .post-body img {
      border: 10px solid #000;
      }

      Eliminar
    4. Genial, ahora si queda mejor!!!
      Muchas Gracias Potro...como siempre excelentes tutoriales y ayuda!!!

      Eliminar
  18. Como siempre, estupendo...pero una cosa....tendrías el icono del mail de la misma linea de iconos ?
    Gracias y un saludo

    ResponderEliminar
    Respuestas
    1. Jeje, curiosamente sí, el set de íconos no lo trae, pero había hecho uno que al final no me gustó y decidí no incluirlo. Te lo dejo de todas formas por si te sirve:

      http://lh6.googleusercontent.com/-JdYEOXFhJYY/UKRhwVvYl3I/AAAAAAAADWo/cGvAhLrf1M0/s36/social-mail.png

      Eliminar
  19. Potro ,como puedo insertar los iconos sociales en mi sitio web.

    ResponderEliminar
    Respuestas
    1. Si con sitio web te refieres a tu blog entonces sigue las indicaciones de la entrada.

      Eliminar
    2. Yo me refiero literalmente en una pagina de Internet la cual no es un blog

      Eliminar
    3. Depende de la plataforma, básicamente es poner los estilos en tu archivo .CSS y la estructura dentro del <body>

      Eliminar
  20. Como siempre todo lo que nos compartes es excelente,gracias Potro, tenía tiempo que no pasaba por aquí voy a dar un vistazo para enterarme de lo que me perdí, un abrazo desde Lima Perú

    ResponderEliminar
    Respuestas
    1. Qué gusto poder leerte de nuevo Silvia, un abrazo!

      Eliminar
  21. Muy bueno su blog!
    Me gustaria ver sus publicaciones en Hogar del Ocio.

    Saludos

    ResponderEliminar
  22. Hola!!! Adjunto dirección del blog para ver que los iconos quedan por encima de la navbar y me gustaría que quedara por debajo....
    http://onegraphicgirl.blogspot.com.es
    Muchas gracias!! ;)

    ResponderEliminar
    Respuestas
    1. No veo la navbar en ese blog anna, supongo que decidiste ocultarla. Si después muestras la navbar otra vez sólo agrega debajo de #social-iconos { un margen superior:
      margin-top:40px;

      Eliminar
    2. Sí, al final la desactivé porque no me gustaba nada...
      Muchas Gracias!!! Si vuelvo a activarla, lo haré!! ;)

      Eliminar
  23. Muy hermoso y delicado, es más me encanto, veré de como aplicarlo ah! y no tienes por ahí a youtube escondido?

    Gracias potro, hermoso aporte!!

    ResponderEliminar
    Respuestas
    1. Nou :( Pero es casi seguro que en la red (o hasta en Iconfinder) encuentras algún set mucho más completo que este y que contenga los iconos que quieres ;)

      Eliminar
  24. Tengo un problema que ya vi de otro usuario, los iconos me salen en vertical y no giran, si realice el primer paso, estilos, pero no me resulta. Una ayuda por favor y gracias por la ayuda

    ResponderEliminar
  25. Hola Potro.

    Se que este comentario no va aqui pero no se donde ponertelo el caso que no se como hacer que al poner un codigo de un chat como el de Xat, en el codigo que te dan como hacer que solo salga en el inicio y cuando pulses en una entrada o algo no aparezca si se puede... me puede ayudar?

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Afm, usa condicionales:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
    2. Muchas gracias Potro tenia guardado en mis marcadores las condicionales pero no me acordaba de veras que hariamos los bloggeros sin ti =) (NADA).

      Un saludo Potro

      Eliminar
  26. Como siempre genial. Muchas gracias Potro ;)

    ResponderEliminar
  27. Como personalizar el botón de búsqueda del blog para que al buscar el contenido se vea como el tuyo, pero con el icono de mi blog?

    ResponderEliminar
    Respuestas
    1. El buscador que yo tengo es el de AdSense, pero es casi igual a este:
      http://ciudadblogger.com/2009/11/motor-de-busqueda-personalizada-de.html

      En los comentarios de esa entrada verás lo del logotipo.

      Eliminar
  28. Hola! Me da un poco de miedo tocar el código HTML de mi blog... si me equivoco, puedo liarla mucho, no??

    Otra pregunta, puedo poner sólo el icono de Facebook? O los códigos van todos juntitos?

    Perdonad la ignorancia, soy muy nueva en este mundillo!

    Gracias por vuestros posts!!

    ResponderEliminar
    Respuestas
    1. Hay que perderle el miedo Eva, sólo son códigos ;)
      De todas formas puedes practicar primero en un blog de pruebas, y siempre antes de guardar usar la Vista Previa.
      Puedes quitar los demás si lo deseas, sólo localiza el código correspondiente a cada uno y elimínalos.
      ¡Saludos!

      Eliminar
  29. Potro muchas gracias por el tutorial! Justo lo que necesitábamos! Un saludo

    ResponderEliminar
  30. Potro solo comentarte que al poner otros iconos de iconfinder, y al subirlos en imageshack se nos corta mitad del título. (que tenemos situados a la derecha) si entras en el blog no lo verás ya que al poner los que has puesto por defecto en la entrada todo sale bien. Alguna idea de porque pasa esto? Gracias

    ResponderEliminar
    Respuestas
    1. Tendría que verlos puestos para saber porqué ocurre lo que mencionas, ponlos y me avisas para revisar.

      Eliminar
  31. Hola Potro, mira cómo me aparecen: http://akimiopinion.blogspot.com.es/
    Cómo podría hacer para que aparecieran a la derecha, debajo del cuadro de búsqueda y que no me desplace el título del blog hacia abajo¿? Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Ash_Teleco, no veo puestos los botones en ese blog, pero si los quieres ahí quizá tengas que ponerlos arriba de <!-- Top Menu -->

      Eliminar
    2. Muchas gracias, he probado donde me has dicho pero me queda mucho hueco entre hasta el menú de página así que lo he puesto en otro sitio y me gusta (ya cambiaré los iconos) lo que pasa que ahora me salen donde quiero, pero me no me aparecen las páginas (tenía Inicio y Contacto). ¿Sabes por qué pasa? Gracias.

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

    ResponderEliminar
    Respuestas
    1. Hola Feed, tendrías que conseguir una plantilla que tenga esa característica, no es fácil adaptarle esa opción.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
  33. Hola, he comentado antes, no se si lo has visto. No consigo poner los iconos debajo del cuadro de búsqueda: akimiopinion.blogspot.com

    ResponderEliminar
  34. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola, entré pero no veo puestos los botones.

      Pd. He eliminado el comentario por el aviso que está al final.
      Saludos.

      Eliminar
    2. Por cierto, revisa que el problema no sea que hayas eliminado una llave de cierre en los estilos:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  35. y como hago para agregarlo en un sitio que no esté creado con blogger???
    con wordpress, por ejemplo.

    ResponderEliminar
  36. Hola potro.
    Una preguntaa, como subir el contenido de una pagina estatica_???
    Es decir, que entre la cabecera y el contenido haya menos espacio.

    ResponderEliminar
    Respuestas
    1. Localiza el ID del contenedor de las entradas y aplícale un margen superior negativo, por ejemplo margin-top:-10px;
      Esos estilos deberán ir en una condicional.
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Eliminar
    2. A vale ya lo entendi.) Gracias.

      Eliminar
  37. Hola Potro! solucionado...(a medias) era un problema con las medidas de los botones, hemos puesto la medida de los que tienes en la entrada y funciona. Te escribo en la entrada de orbit slider, para un pequeño inconveniente. Un saludo

    ResponderEliminar
  38. Saludos Potro, como puedo ponerlos abajo del todo?

    ResponderEliminar
    Respuestas
    1. ¿De todo el blog? Antes de </body>

      Eliminar
    2. Ya lo he probado y, me gustaria saber como ponerlo encima de lo que para ti seria 2012 © Ciudad Blogger. Otra duda que tengo es que, la barra de abajo, (en la tuya pone 2012 © Ciudad Blogger) hay un espacio en el que se ve el fondo del blog y, queda mal, como lo soluciono?

      Eliminar
    3. Localiza tú mismo el área en tu plantilla, no sé qué elementos tengas ahí, pero puedes ponerlo arriba de lo que tengas, das Vista Previa y ves si es el lugar adecuado.
      Para lo otro puedes aplicar un margen negativo a ese contenedor, a sus estilos, por ejemplo:
      margin-bottom: -40px;

      Eliminar
    4. antes de que se me olvide, como diferencio el margin-bottom? me aparecen varios y pruebo con todos pero, sigue sin verse bien. Aunque, de todos modos, gracias

      Eliminar
    5. Debes localizar el ID de tu contenedor donde tienes la barra, si a ese contenedor ya le habías aplicado estilos entonces ahí es donde debes poner ese margen.

      Eliminar
  39. Hola Potro, al final he puesto los iconos en otro lugar, pero ahora tengo una duda. Si entras a mi blog, verás en la sidebar (al final del todo) los iconos de redes sociales. Si te fijas justo debajo aparece una línea debajo de cada uno. Eso lo hace con cada nuevo widget la plantilla con esta instrucción:

    #sidebar .widget ul li {
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 8px 0 8px 5px;
    list-style: none;
    }

    Donde pone bottom 1px pues me lo pone a cada uno. Mi duda es como hacer que los demás widgets lo mantengan, pero quitárselo al de las dos imágenes de las redes sociales. Gracias.

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Hola de nuevo, he entrado pero no veo que los íconos tengan algún borde.
      Saludos.

      Eliminar
    2. Al final he quitado la línea que aparecía debajo de cada widget, me gusta más así. Gracias de todas formas. Una última duda si no es mucho pedir, habría alguna posibilidad de aumentar el texto de las entradas por píxeles y no solo entre 'normal', 'grande', 'la más grande'...¿? Gracias!

      Eliminar
    3. Desde el editor de entradas no, desde la plantilla sí, puedes establecer que la fuente de las entradas sea de mayor o menor tamaño, con estos estilos:
      .entry-content {
      font-size:15px;
      }

      Eliminar
    4. Muchas gracias! Eres un crack! :-)

      Eliminar
  40. Super chevere el post amigo y gracias por compartir tanta info...!!! Que tengas un buen fin de semana...!!! :D

    ResponderEliminar
  41. Muchisimas gracias por estos iconos tan geniales! Es justo lo que quería y posicionados dónde yo quería. Al principio también pensé que se trataba de botones de compartir y lo usé como por ensayar, pero al ver cómo quedo me pareció lo máximo. Y además que el proceso que pusiste para hacerlo es muy fácil. Gracias de verdad!

    ResponderEliminar
    Respuestas
    1. Qué gusto que hayan sido de tu agrado, ojalá pueda serle de utilidad a más personas.
      Buen fin de semana!

      Eliminar
  42. Hola muy bueno toda la página les quisiera hacer una pregunta no va referido a esto quizas me puedan ayudar!
    Estaba buscando algún código o cualquier cosa para poner varios videos dentro de una caja no se si me especifico , si me entendieron necesito ayuda!...

    ResponderEliminar
    Respuestas
    1. No me queda claro lo que buscas, pero aquí hay una galería de videos que quizá te pueda servir:
      http://ciudadblogger.com/2012/10/galeria-de-videos-para-el-blog.html

      Eliminar
  43. Potro me podrías explicar como los coloco en un gadget ???
    Gracias

    ResponderEliminar
    Respuestas
    1. Diseño > Añadir un gadget > HTML/Javascript, ahí pega el último código.
      Saludos.

      Eliminar
  44. Potro mira me esta sucediendo algo muy raro..

    Entro a mi categoria de "Gadgets y Widgets" y me sale el siguiente cartel:

    http://bloggerblogwidgets.googlecode.com está solicitando un nombre de usuario y una contraseña. El sitio dice: "Google Code Subversion Repository"

    Y me pide contraseña y eso, lo mas raro es que solo me aparece en la categoria que te digo:

    http://www.miltrucosblogger.info/search/label/Gadgets%20y%20Widgets

    Y hay un hilo abierto en el foro de blogger sobre este mismo tema y segun he leido a varios les ha pasado esto, tal ves tu sepas la solucion a este problema

    ResponderEliminar
    Respuestas
    1. Hola Juvinao, sí he visto que algunos scripts alojados en Google Code están pidiendo autorización, no sé si los autores de esos scripts hayan modificado algún permiso, o si Google Code esté teniendo algún problema. Si puedes busca el script para descargar y alójalo tú mismo, de preferencia en la plantilla, así no dependerás de ningún servidor que no sea blogspot.

      Eliminar
    2. Localice el script y lo elimine pero me sigue apareciendo ese cartel, la verdad no se que hacer.

      Eliminar
    3. Yo he entrado a esa etiqueta y no me aparece ningún cartel Juvinao.

      Eliminar
    4. potro soy muy olvidadiso y no se lo que hice ahora no se porque me sale el mismo mensaje soy novato me puede explicar como hacerlo detalladamente ese cartel sale cada vez que entro al blog por faor ayudame

      Eliminar
    5. potro soy muy olvidadiso y no se lo que hice ahora no se porque me sale el mismo mensaje soy novato me puede explicar como hacerlo detalladamente ese cartel sale cada vez que entro al blog

      Eliminar
    6. me sigue saliendo ese cartel potro ayuda

      Eliminar
    7. Hola josebna, no mencionas en cuál blog tienes el problema, pero mira la URL que aparece en el mensaje, busca esa URL en tu plantilla (con las teclas CRTL+F) y elimina esa URL, es un script, así que seguramente algo de tu plantilla que requiere ese script dejará de funcionar.

      Eliminar
  45. Hola El Potro! muy buenos los iconos!! ahora te hago una pregunta, como podria hacer para usarlos para compartir en facebook, twitter y google +?

    Otra pregunta: ¿Qué es el feed del blog?

    ResponderEliminar
  46. Hola El Potro! muy buenos los iconos!! ahora te hago una pregunta, como podria hacer para usarlos para compartir en facebook, twitter y google +?

    Otra pregunta: ¿Qué es el feed del blog?

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Pato, mira en la categoría "Facebook", ahí verás otras opciones que sí son para compartir. Respecto a tu otra pregunta, esto es el feed del blog.

      Eliminar
  47. Genial, me ha venido estupendo !!

    Concha
    http://birlocha.blogspot.com.es/

    ResponderEliminar
  48. Hola Potro, he agregado la caja de comentarios de FB a mi blog, y ahora por mas que he eliminado los códigos que usé para que apareciera la caja sigue apareciendo, que crees que puede ser?

    ResponderEliminar
    Respuestas
    1. Hola Hockster, si aparecen en el blog es porque ahí debe haber alguno todavía, revisa bien.
      Cualquier otra duda sobre ese tema deja la pregunta en esa entrada para no desviarnos del tema principal de este post.
      Saludos.

      Eliminar
  49. ¡Queda perfecto! Me recuerda a la camiseta que tienes en la cabecera.
    He diseñado unos más: https://www.dropbox.com/home/Public/Iconos%20sociales

    ResponderEliminar
    Respuestas
    1. Genial, aunque no pude ver las imágenes pero seguro te quedaron de lujo :)

      Eliminar
    2. Los puedes ver en www.vvalcoi.com, es uno de Bitácoras y otro de los premios 20 blogs

      Eliminar
  50. Hola Potro, tengo una pregunta aunque no esta relacionada con esta entrada.
    Como puedo borrar los estilos de los comentarios añadidos de mi blog para poder añadir estos "http://www.miltrucosblogger.info/2012/05/estilos-para-los-comentarios-anidados.html" u otros cualquiera?
    Esque para poder poner esos primero necesito borrar los que ya tengo.
    Este es el blog donde quiero hacer el cambio: http://www.proyectovhila.com/
    Muchas gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Vhila, no es aquí donde debes preguntar, sino en ese blog ;)

      Eliminar
    2. Y podrias decirme como poner los mismos estilos que tengo en los comentarios ponerlos tambien en los añadidos?
      Esque por más que lo intento no doy.
      Gracias

      Eliminar
    3. Yo aún no tengo ninguna entrada sobre los estilos de los comentarios anidados Vhila, en Vagabundia hay dos entradas sobre ese tema:
      http://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso.html
      http://vagabundia.blogspot.com/2012/01/comentarios-anidados-los-estilos-paso_19.html

      Eliminar
    4. Gracias, aver si lo arreglo ^^

      Eliminar
  51. Hola Potro, disculpam que te moleste, no tiene nada que ver con la Entrada pero te pregunto xq es importante, se me cayo mi blog, lo tenia con el dominio co.cc

    ResponderEliminar
    Respuestas
    1. No sé qué ha pasado con esos dominios, pero desde hace como 4 o 5 días dejaron de funcionar, incluso no se puede ingresar a la página del sitio.

      Eliminar
  52. Hola Potro de tiempos. Mi comentario no tiene q ver con el post.
    Tengo un blog: http://ojoderojas.blogspot.com/ en el cual no se porq a dejado de funcionar un botón q antes funcionaba abriendo una ventana emergente a mi correo. Si entras a cualquiera de las entradas te darás cuenta lo q digo. El botÓn es y está al final de cada entrada, y es "CORREGIR ORTOGRAFIA". Haber si lo revisas y me das el diagnóstico, de antemano gracias.

    ResponderEliminar
    Respuestas
    1. A mí me funciona bien efrain, he dado click y me abre la aplicación de correo que uso, en mi caso Mail para Mac.

      Eliminar
  53. no tienes algo similar a esto: www(punto)segelsoft(punto)com
    saludos y gracias por tu post!

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

    ResponderEliminar
    Respuestas
    1. Hola F3, el dominio no tiene nada que ver. Si quieres ocultar la sidebar en una entrada sigue los pasos de este post:
      http://ciudadblogger.com/2010/10/ocultar-sidebar-en-las-paginas.html

      Pero cambia esta línea:
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

      Por esta:
      <b:if cond='data:blog.url == &quot;URL de la entrada&quot;'>

      Estas dos entradas también te servirán:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
      http://ciudadblogger.com/2012/05/las-condicionales-de-blogger-y-las.html

      Eliminar
    2. Mil gracias potro! era lo que buscaba. Potro sos un Dios sabelo!

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

    ResponderEliminar
  56. Potro respondes, o ya no? Porque hace muchos días dejé una pregunta en: http://ciudadblogger.com/2012/05/slider-automatico-para-mostrar-las.html

    ResponderEliminar
    Respuestas
    1. Todas las preguntas son respondidas LegacyManga, incluyendo las tuyas. Recuerda que si ves el botón "Cargar más" debes darle click para que te muestre todos los comentarios.

      Eliminar
  57. Hola, mira lo que yo quiero hacer es quitar el sombreado del cuerpo de mi blog asi queda todo blanco. mi blog es http://www.trucosmundogaturro.com.ar

    ResponderEliminar
    Respuestas
    1. Hola Franco, agrega estos estilos:
      .content-outer {
      -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
      -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
      -goog-ms-box-shadow: 0 0 00px #333333 !important;
      box-shadow: 0 0 0px rgba(0, 0, 0, .15) !important;
      }

      Eliminar
  58. potro una pregunta dicen que la pagina http://vk.com no permite videos pornograficos pero hay miles almacenados y segun tengo entendido es una red social si estoy equibocado disculpa.

    ResponderEliminar
    Respuestas
    1. No conozco ese sitio, de hecho es la primera vez que sé de él, pero por ahí tiene su página de términos, ahí te enterarás qué se puede y qué no.

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

    ResponderEliminar
    Respuestas
    1. ¿A qué te refieres Martin? es que no veo algún otro comentario tuyo en esta entrada.

      Eliminar
  60. Hola potro de tiempos. una consulta q no es sobre el post en cuestión.
    En mi blog (ojoderojas.blogspot.com) hace tiempo cree y puse un botón al final de cada entrada (gracias a ti) que era para q los lectores q encontraran un error ortográfico le pincharan para q automáticamente el enlace del botón les llevara a mi correo. Ahora no se porque a dejado de funcionar ese botón: "CORREGIR ORTOGRAFíA". Para q veas ese botón tienes q entrar a una entrada. Te dejaría el código html para q me digas q está mal, pero lastimosamente no sale aquí

    De antemano gracias por la respuesta (halla o no halla solución).

    ResponderEliminar
    Respuestas
    1. Hola efrain, ya te he respondido esa pregunta, mira más arriba.

      Eliminar
  61. Hola Potro! Tanto tiempo....jaja tengo la siguiente inquietud: en el blog de asesoramientoconsorcios, están los botones para recomendar el blog arriba y me pasa que me gustaría resaltarlos de alguna manera, se puede poner como un cartelito al lado que diga "Recomendanos!" o algo así??? si los pongo como botones flotantes del lado izquierdo, quedará bien?? o quizá con la entrada que hiciste de efecto página doblada ahí se pueden poner los botones y poner eso....no sé....qué me recomendás??? Saludos!!!!

    ResponderEliminar
    Respuestas
    1. La verdad es que así como están yo los veo bien, con el page peel no quedará pues ahí lo que se le pone es una imagen, pero insisto, al menos yo los veo bien ahí.
      Saludos.

      Eliminar
  62. Hola Potro! Cómo está?

    Le hago un consulta, cuando doy clic en el botón Me Gusta de Facebook en mis blogs, se comparte la entrada en mi muro de la siguiente manera: http://i48.tinypic.com/347u0w5.png Mi pregunta es cómo hago para que en la imagen no aparezca el icono de editar los gadgets?

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Pozo+10™, quizá necesites agregar metas para Facebook, y ya de paso agregar microdatos:
      http://vagabundia.blogspot.com/2011/07/optimizar-las-etiquetas-meta-para.html
      http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html

      Eliminar
  63. Hola Potro,
    he puestp estos iconos en mi blog pero quedán muy al margen, yo queria que estuviesen encima del cuadro de busqueda, sabes como hacerlo??
    Gracias

    ResponderEliminar
  64. Potro una pregunta si subo mis fotos a http://imgbox.com/ y despues pego los cogidos para una entrada en mi blog no hay problemas con blogger o lo toma como spam.

    ResponderEliminar
    Respuestas
    1. Como SPAM no (a menos que las imágenes inserten publicidad), pero siempre es mejor subir las imágenes desde Blogger, para que no tengas límite de tráfico, y para que siempre tengas las imágenes disponibles.

      Eliminar
  65. Ya está, he decidido ponerlos en otro sitio, ahí me gustan más. Muchas gracias ^^

    ResponderEliminar
  66. No encuentro dicha línea...



    Tengo una plantilla dinámica puede ser por eso?

    ResponderEliminar
    Respuestas
    1. Sí, es por eso. En esas plantillas no he probado poner nada de esto porque la mayoría de las veces no funciona ahí.

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

    ResponderEliminar
    Respuestas
    1. Lo que sucede es que tienes la cabecera dividida, por eso se ve ese espacio del otro extremo. Lo que puedes hacer es ponerle una imagen de fondo a esa área después de #header2{ por ejemplo:
      background:url(URL de la imagen);

      Eliminar
  68. Hola el potro quisiera saber si se puede agregar usuarios con contraseñas a un blog como facebook o las redes sociales.
    Gracias

    ResponderEliminar
  69. hola Potro, tengo un lio.
    Instalo los miconos y quedan muy bien, pero a la hora de pinchar en ellos, me dice que la página no existe...en todos y cada uno de ellos, facebook, twitter, google+....no consigo entender por que, puedes ayudarme???
    El blog es: http://misdeliciosascomiditas.blogspot.com.es/
    muchas gracias!!!

    ResponderEliminar
  70. vale, olvida mi pregunta, puse mal los nombres de usuario...solucionado!!, gracias

    ResponderEliminar
  71. HEY MEN ES BREVE COMUNÍCATE CONMIGO, OK kestmolg10@hotmail.es

    ResponderEliminar
    Respuestas
    1. Todas las consultas sobre el blog se hacen por este medio.
      Saludos.

      Eliminar
  72. Me gusta tu blog, Felicidades. :)
    Dejo un enlace de mi blog si no molesta. Un saludo.

    http://blog.dagamaweb.com

    ResponderEliminar
  73. Sería posible ubicar los iconos a la izquierda de la página en vez de a la derecha??

    Cuál sería el cambio de script???

    Muchas gracias por tus consejos El Potro!

    ResponderEliminar
    Respuestas
    1. Para ponerlo del lado izquierdo cambia el text-align:right; por text-align:left; y el float:right; por float:left;
      Saludos.

      Eliminar
  74. Buenas,
    he puesto los iconos en mi blog de las redes sociales de tuiter y facebook y me salen en vertical me podrias explicar como ponerlas en horizontal y que tengo que poner? muchas gracias

    ResponderEliminar
    Respuestas
    1. Sin ver el blog donde lo has puesto me es imposible saber la causa del porqué te aparece así, pero quizá sea por esto:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  75. No entiendo el primer paso :( ayudame protico

    ResponderEliminar
    Respuestas
    1. Sólo tienes que pegar esos códigos donde se indica, la Edición de HTML está dentro de la sección "Plantilla".

      Eliminar
  76. Amigo, tengo una pregunta ¿como hago para centrar los iconos?

    ResponderEliminar
    Respuestas
    1. Para centrarlos cambia el width:100%; por un valor más bajo hasta que quede al centro, por ejemplo 40%

      Eliminar
  77. Buenas. En primer lugar darte la enhorabuena por la pagina. Respecto a la duda: ¿Como puedo cambiar la posicion de los botones para que queden justo debajo de "Buscar" y a la derecha del slideshow que hice con algunos de tus tutoriales? http://tusaquedepuerta.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Gracias jose luis, tendrías que ponerlos en un gadget y arrastrar ese gadget debajo del menú.

      Eliminar
  78. Che Potro probe con lo que me dijiste pero nada no aparecio ninguna imagen quedo como antes

    ResponderEliminar
    Respuestas
    1. No veo que tengas puesto el código del fondo en esa cabecera como te indiqué :/

      Eliminar
    2. No entiendo mucho de esto me podrias explicar un poco mejor :D

      Eliminar
    3. No entiendo mucho de esto me podrias explicar un poco mejor :D

      Eliminar
    4. Es la manera más sencilla que lo puedo explicar :(

      Eliminar
  79. ¡Hola Potro! Soy muy fan de tus tutoriales ya que me están ayudando mucho a crear mi blog :) Ya coloqué este tutorial y me encanta como queda aunque me gustaría saber si es posible moverlos de sitio y en vez de que queden arriba a la derecha quedasen debajo del "Blueli" de mi cabecera. (http://callmeblueli.blogspot.com) Estuve tocando los códigos pero no conseguí moverlo... ¿Es posible? ¡Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Blueli♥ :)
      Puedes poner el código de los iconos arriba de
      <div class='main-outer'>

      ¡Saludos!

      Eliminar
  80. Potro a mi me pasa exactamente lo mismo que a varios que he visto por aquí, al ponerlos en mi blog me salen en vertical y no se me animan, me pasa exactamente lo mismo con los slider no me salen y no se porque. ¿Tal vez sea porque eliminé los class:tabs al colocar el menu horizontal? Nose..

    ResponderEliminar
  81. te dejo el blog para que mires como me sale http://elretoalbienestar.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Yo los veo perfectamente horizontales :)

      Eliminar
  82. Hola Potro.

    Me gustaria poner los botones en el menu que tengo con las paginas adecuadas ya que quedaria mejor pero he probado con todo y nada nose porfavor necesito ayuda.

    Un saludo.

    Direccion del Blog ---> http://ata-systeem.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. No he podido verlo, dice que se ha eliminado el blog.

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

      Eliminar
    3. Se me ocurre que puedes subirlos añadiendo debajo de #social-iconos { esto:

      float: right;
      margin-top: -50px;
      margin-bottom: 60px;

      Eliminar
    4. Perfecto Potro eres un crack de verdad muchas gracias y felices reyes! :)

      Eliminar
  83. Buen tuto Potro! Me sirvió!
    ¡Saludos!

    ResponderEliminar
  84. Hola Potro. Para un "analogico" como yo es una delicia encontrar una joya de ayuda como la que tu prestas. he de decirte que he usado muchas de tus "propuestas", entre ellas esta de los iconos de redes sociales (magnifica). A tu "sugerencia" de agregar mas botones no me pude resistir. Así lo hice pero me surgió el problema de que me corta un poco (poquísimo) la imagen de la cabecera del blog. Soy muy cabezota y me gusta resolver los rompecabezas por mi mismo pero tengo que sucumbir pues he ido probando todo...o al menos eso creo. ¿Podrías decirme que medida debería modificar? Muchísimas gracias y como decía Woody a Buzz Lightyear, ¡Hay un amigo en mi!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario MALDIA, ¿en cuál blog los has puesto?

      Eliminar
  85. Lindos botones para el blog, sencillos y atractivos, saludos.

    ResponderEliminar

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
I Ciudad Blogger