Poner separadores en los gadgets

1 de junio de 2011 227 comentarios ,
Hace algún tiempo vimos cómo poner separadores en las entradas, y desde esa vez muchos han preguntado cómo poner separadores en los gadgets de la sidebar. La verdad es que es un procedimiento sumamente sencillo que no deberá quitarnos ni 3 minutos de tiempo.
Haremos algo similar como lo que hicimos para enmarcar entradas y gadgets sólo que aquí tendremos la opción de incluir una imagen como separador y así delimitar de forma estética el final de cada gadget.

Si usamos bordes tendremos un resultado como este.


Y si usamos imágenes podrá verse más o menos así.


Veremos cómo hacerlo para las plantillas antiguas de Blogger, y las hechas con el Diseñador de plantillas de Blogger. En cualquier de los dos casos entra en Diseño | Edición de HTML y luego...

Para plantillas hechas con el Diseñador de plantillas de Blogger

Si quieres que el separador sea un borde agrega antes de ]]></b:skin> lo siguiente:
.column-right-outer .widget, .column-left-outer .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

Si quieres que el separador sea una imagen entonces en lugar de lo anterior agrega esto:
.column-right-outer .widget, .column-left-outer .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}

Para las Plantillas antiguas de Blogger


De igual manera agrega antes de ]]></b:skin> lo siguiente si quieres que el separador sea un borde:
.sidebar .widget {
border-bottom:4px solid #000;
padding-bottom:20px;
}

O bien, si quieres que el separador de los gadgets sea una imagen entonces lo que deberás agregar será esto:
.sidebar .widget {
background: url(URL de la imagen)no-repeat 50% 100%;
padding-bottom:70px;
border:0;
}


Agrega la URL de la imagen del separador donde se indica si es que te decidiste por el separador con imágenes. Si la imagen fuera muy alta cambia donde dice padding-bottom:70px; por una valor más grande hasta que la imagen se muestre por completo.

En el caso de los separadores con bordes puedes modificar el grosor, tipo y color del borde, eso se hace donde dice border-bottom:4px solid #000;
4px es el grosor, solid es el tipo de borde, puedes cambiarlo por dotted, dashed, double, groove, ridge, outset, o inset, y #000 es el color del borde.
En donde dice padding-bottom:20px; podemos controlar la distancia entre cada gadget.

Como dije antes, es un procedimiento bastante simple que quizá la parte más difícil será decidirnos por un estilo que nos guste.


227 comentarios en:

" Poner separadores en los gadgets "

  1. Muy buen post potro, provaré haber si funciona, Gracias

    ResponderEliminar
  2. Estas dos entradas tuyas (la de ayer y ésta) tengo que guardarlas como oro en paño para cuando tenga tiempo para por lo menos pensar cómo quiero las separaciones.., ;). ¡Que no se me despisten!..:)
    Muchas gracias, Potro

    ResponderEliminar
  3. Esa es la parte que a todos nos toma más tiempo, pensar qué queremos poner de separadores.
    Estoy seguro que cuando lo apliques tendrás un resultado impecable como siempre :)

    ResponderEliminar
  4. Hola Potro.
    Muy bueno, éste lo gasto seguro, pero... ¿y si sólo quiero separar algunos?, ¿es posible?.
    Me gustaría separarlos según contenido o temática. Ya contarás.
    Gracias como siempre y hasta pronto.

    ResponderEliminar
  5. Hola amigo, tengo problemas con mi blog, no se puede ver en algunos navegadores de internet.¿Que hago para solucionarlo?

    ResponderEliminar
  6. Hola de nuevo.
    Mientras salía me ha surgido otra duda: ¿se podrían separar como te comentaba antes, sólo en la principal?.
    Un saludo.

    ResponderEliminar
  7. Hola Tapestryworkerman ,

    Si quieres hacerlo con un gadget específico sólo cambia esta línea:
    .column-right-outer .widget, .column-left-outer .widget {

    Por esta:
    #ID

    Donde ID es la ID del gadget al que le quieres aplicar el separador.

    En cuanto a la otra pregunta todo eso se hace usando las condicionales, al final de esa entrada hay un ejemplo se cómo se aplican en los elementos.

    Saludos.

    ResponderEliminar
  8. Hola JUVENTUD MINCA,

    Entré desde Google Chrome, Firefox, Safari y Opera y en todos se ve bien, en el único que hay un problema es con IE, después de cargar aparece un error.
    Ese error podría estar relacionado con el script de la barra de chat que tienes, o bien, por la plantilla que usas, usualmente las plantillas hechas con Aristeer presentan muchos problemas en IE debido a que usan muchos scripts.

    ResponderEliminar
  9. Gracias amigo, tu truco ya lo puse en proceso, esperemos a ver como me va!.... ;)

    ResponderEliminar
  10. Muchas gracias Potro, hoy llegué un poco tardee jeejeje, un abrazo ;-)

    ResponderEliminar
  11. Buen Dia Amigo.
    Quiero decirte que cada dia tu blog esta mas y mucho mas elegante con todos los tuturiales que pones a disposicion de nosotros tus amigos. "Felicidades"

    Tambien quiero perdirte que me ayudes con lo siguiente y es de que si me puedes ayudar con lo siguente. Quisiera poner una lista o un menu de todas las entradas que hay en mi blog quiza tu me puedas orientar como hacerlo y tambien quiero saber como hacer para crear cuentas para usuarios es decir que se registren en mi blog para obtener ciertos beneficios.

    Espero y me puedas ayudar querido amigo.
    Feliz dia....

    ResponderEliminar
  12. HOLA POTRO TENGO UNA PREGUNTA LO QUE PASA QUE KIERO ESTA PLANTILLA
    http://btemplates.com/2011/blogger-template-diazo/demo/
    NO MAS QUE AL INSTALARLA NO TINE LA OPCION DE AÑADIR GATGE DE VAJO DEL MENU QUISIERA SAVER SI ME PUDES AYUDAR SALUDOS

    ResponderEliminar
  13. Hola potro una pregunta lo que pasa que me gusto esta plantilla
    http://btemplates.com/2011/blogger-template-diazo/demo/
    no mas que veo que no tine la opcion de añadir un gatge devajo del menu quisiera saver si me pudes ayudar saludos

    ResponderEliminar
  14. Hola potro! Te hago una consulta , ya que hablamos del tema entradas , como hago para visualizar mis entradas sin el "leer mas" ( es decir que se vena de forma completa! Saludos

    ResponderEliminar
  15. ): no me funciono (plantilla antigua) pero igual coloqe una imagen al final del html de cada gadget no se ve tan mal

    www.zonegeek.com.ar

    D:

    ResponderEliminar
  16. Adm, hay dos opciones para eso, una es que pongas un site map por etiquetas, o que pongas un site map por fechas. ¡Saludos!

    Gerardo Anaya, no conozco esa plantilla, pero prueba arrastrando el gadget debajo de esa área.

    Hugo, mira esta entrada, ahí habla de cómo incluir el Leer más, sólo busca los códigos que se supone debes pegar pero tú lo harás al revés, los quitarás y pondrás lo que se supone hubieras eliminado. Sólo procura antes hacer una plantilla de respaldo por si algo no saliera bien.

    ResponderEliminar
  17. Wii ya pude :D Cambie:

    .sidebar .widget {
    background: url(URL de la imagen)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }

    A

    .colRight .widget {
    background: url(URL de la imagen)no-repeat 50% 100%;
    padding-bottom:10px;
    border:0;
    }

    Gracias! -> http://zonegeek.com.ar

    ResponderEliminar
  18. Es que esa no es una plantilla antigua sino una plantilla personalizada ;)
    De todas formas, qué gusto que hayas encontrado la forma de aplicarlo a tu plantilla :)

    ResponderEliminar
  19. Si es qe soy pro, aaah te creas xD
    poes con firebug me guio mucho me ha seeervido de mucho esa extencion y ps en mi plantilla no hay nada .sidebar ni .widget asi q mire q era .colRight y lo cambie y ya ;) Grax!

    ResponderEliminar
  20. Gracias potro,quiero aclararte que tengo solo 10 años,y tu blog me a ayudado mucho, échale un ocrayo y mira como me quedo,http://ben10xsiempre.blogspot.com/

    ResponderEliminar
  21. Aunque no lo creas una gran parte de los que leen este blog tienen tu edad y es sorprendente el trabajo que realizan en sus blogs, seguro que ustedes tienen mucho potencial, no me cabe la menor duda :)

    ResponderEliminar
  22. Lol me siento raro ahora

    PD: No tengo 10 años o.o

    ResponderEliminar
  23. Amigo potro nopodrias hacer un videopara mi esque no pude Gracias

    ResponderEliminar
  24. No Guapo2222, pero si me explicas en qué parte te estás atorando y en cuál blog lo has puesto con gusto vemos cómo ayudarte para que lo consigas.

    ResponderEliminar
    Respuestas
    1. hola potro mira yo ise una pantilla con artister pero a hacer esto no me sale que puedo hacer

      Eliminar
  25. Nose como decirte, vesque, se ponen los dos códigos o solo 1?

    ResponderEliminar
  26. En este blog lo quiero poner eso http://guapo2222.blogspot.com/

    ResponderEliminar
  27. En tu caso debes seguir las intrucciones que dice Para plantillas hechas con el Diseñador de plantillas de Blogger.

    Si quieres que el separador sea una línea pon el primer código que aparece, si quieres que sea en una imagen entonces no pongas ese sino el que está abajo de él.

    ResponderEliminar
  28. Si y solo pongo el codigo y no agrego nada mas?

    ResponderEliminar
  29. Quito url (url de la imagen)o eso lo dejo?

    ResponderEliminar
  30. .column-right-outer .widget, .column-left-outer .widget {
    background: url(http://trucosryky99.files.wordpress.com/2011/06/xat.png?w=200&h=70)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }

    Asi yo le hago porfavor corigeme en lo que estoy mal

    ResponderEliminar
  31. Así parece no no haber ningún error, pero no veo que lo tengas puesto en el blog. Es necesario que lo pongas para que pueda ver dónde puede estar el error.

    ResponderEliminar
  32. Ese codigo se pone en un gadget html o no?

    ResponderEliminar
  33. No. Lee de nuevo la entrada, ahí están las indicaciones precisas sobre dónde debe colocarse.

    ResponderEliminar
  34. Hola potro tiempo que no te visito y bueno ya que estuve revisando lo ultimas entradas q pusistes, y vi esta, curiosamente yo quiero algo parecido, me explico yo no quiero poner un separador, pero quiero q mis gadgets esten mas pegados... mas juntitos asi como hermanos xD me entiendes ? me podrias enseñar a unir mas los gadgets la verdad q dejan mucho espacio entre ellos..
    mi blog

    http://cine-dvdrip.blogspot.com/

    ResponderEliminar
  35. Prueba agregando este estilo:
    .widget {margin-top:10px;}

    Si sigue quedando muy separado reduce ese valor.

    ResponderEliminar
  36. esto disculpa donde coloco esto ??

    ResponderEliminar
  37. pues a mi no me sale el separador y tengo el codigo aunque la opción de unir más los gadgets tambien me atrae pero no entiendo lo que dices, solo hay que poner ese codigo antes de ]]>

    ResponderEliminar
  38. ¿En cuál blog has puesto los separadores que no aparecen?

    ResponderEliminar
  39. Hola!!
    Puede ponerse solo para separar algunos gadgets o tiene que ser en todos??


    Otra pregunta sobre los gadgets que quería hacerte es si se puede acortar la distancia entre algunos gadgets.

    Saludos.

    ResponderEliminar
  40. Debería de poder hacerse (lo de los separadores), prueba cambiando la primera línea:
    .column-right-outer .widget, .column-left-outer .widget {

    Por esta:
    #ID {

    Donde ID es la ID del gadget al que le quieres aplicar el cambio.
    Para disminuir distancia entre algunos quizá con algo similar:

    #ID {
    margin-top: -30px;
    }

    ResponderEliminar
  41. He probado ha poner los separadores en ciertos gadgets, se queda un espacio entre los gadgets pero no aparece la imagen que pego,

    El otro código para disminuir la distancia perfecto.

    Mil gracias

    ResponderEliminar
  42. ¿El cuáles gadgets lo has puesto para echarle un vistazo?

    ResponderEliminar
  43. Entre lista de blogs y entradas populares.

    ResponderEliminar
  44. Se me olvidaba mi blog: http://nancyesunica.blogspot.com/

    ResponderEliminar
  45. Hola Mariajo,

    Entré a tu blog y he visto sin problema la imagen de estrella rosa que está entre esos gadgets. Supongo que ya has resuelto el problema.

    Saludos.

    ResponderEliminar
  46. Hola Potro!!
    Yo uso el explorer y no se ve, he probado con el firefox y si se ve,
    hay alguna forma para que se pueda ver también con el explorer, que el que yo uso habitualmente?

    Saludos

    ResponderEliminar
  47. Prueba cambiando esto:
    background: url(http://lh4.ggpht.com/_BJo2sJZzI3g/Sap-9MvB9sI/AAAAAAAADl4/flAc6_5BpIE/s400/flor7.png) left center no-repeat;

    Por esto:
    background-image: url(http://lh4.ggpht.com/_BJo2sJZzI3g/Sap-9MvB9sI/AAAAAAAADl4/flAc6_5BpIE/s400/flor7.png);
    background-position: left center;
    background-repeat: no-repeat;

    ResponderEliminar
  48. Esta vez si que se ve la imagen,
    pero en lugar de abajo del gadget se ve
    en medio de mi lista de blog.
    No se si algo no estaré haciéndo bien.

    Perdona las molestias.

    ResponderEliminar
  49. Prueba cambiando el left center por left bottom
    Saludos.

    ResponderEliminar
  50. Lo he probado y ahora si se ve abajo pero se encima un poco en último título de mi lista de blogs.

    Millones de gracias.

    ResponderEliminar
  51. ¿se puede hacer algo para que el separador quede un poco mas abajo y no se encime en la lista de blog, ya no pasa como antes que se quedaba en medio de la lista de blog, lo cambié por left bottom como me dijiste,
    pero si que queda un poco alto, en el último título de mi lista mas o menos.
    Saludos

    ResponderEliminar
  52. Prueba cambiando el left bottom por 0% 95%
    Si queda muy abajo pon un valor más bajo en 95%

    ResponderEliminar
  53. Mi querido Potro,
    Ya sabes que hace mucho tiempo que tengo pendiente decirte, contarte y consultarte unas cuantas cositas, como se me ha complicado todo me ha sido imposible....Y te pido perdón porque no me gusta nada no estar al día de tus cosas. Pero lo tengo todo un poco en suspenso.... en cuanto pueda retomo y volvemos a esas maravillosas charlas, ¿Querrás?
    No sé muy bien dónde dejarte esta consulta que es más bien un querer saber, ya que, de no saberlo tu, no lo sabrá nadie.
    El blog me ha amanecido raro por dos razones, el background se ha desajustado, no lo puedo arreglar y en la parte de abajo, donde podías incluir y yo tengo "Acceder | Nueva Entrada | Configuración | Diseño | Edición HTML | Salir" ahí, a la izquierda aparecían unas herramientas delante de acceder de modo automático y ahora sale una especie de dibujo advertencia, esto, no sé porqué es, así que he cambiado el dibujo, pero no entiendo si es que ha habido alguna modificación de blogger o de firefox o de qué, y tal vez puedas ayudarme
    Un besito, como siempre, enorme, que te echo mucho de menos
    Patricia

    ResponderEliminar
  54. Hola Patricia,

    Qué gusto saber nuevamente de ti, también te echaba de menos.
    ¿Has actualizado el navegador o lo has cambiado? Es que desde aquí en Google, Firefox, Opera y Safari el fondo del blog lo veo bien.
    Lo del dibujo de advertencia no me queda muy claro, ¿te aparece eso en tu escritorio de Blogger o en el blog? porque ahí tampoco lo veo.

    De cualquier manera prueba ver el blog desde otro navegador para confirmar si todo lo anterior puede ser causa del navegador o de alguna otra cosa.

    ¡Un beso!

    ResponderEliminar
  55. Hola, disculpa sabras como recortar el espacio marcado en rojo en los gadget http://i52.tinypic.com/73f1wm.jpg

    mi blog: http://itnetgames.blogspot.com/

    gracias !

    ResponderEliminar
  56. Hola León,

    Agrega antes de ]]></b:skin> esto:
    .main-inner .widget .widget-content {padding:0 !important;}

    Con eso deberán eliminarse los espacios de los lados.

    ResponderEliminar
  57. Hola potro.

    Quiero hacer una cosilla pero no sé si se podrá hacer.

    ¿Podemos poner un separador (imagen) entre las entradas y la sidebar?

    En caso de respuesta afirmativa, ¿como lo hacemos?

    En caso de respuesta negativa, yo no puedo poner una linea separadora desde el diseñador de plantillas porque mi plantilla no es compatible. ¿Como puedo ponerla manualmente en el código? ¿Cómo doy formato a ese borde que separa la sidebar de las entradas si desde el diseñador de plantillas no tengo acceso?

    Gracias como siempre.

    ResponderEliminar
  58. Hola William,

    Sí se puede, en el caso de tu plantilla sólo tienes que colocar debajo de:
    #sidebar-wrapper {

    Esto:
    background:url(URL de la imagen)repeat-y left;

    Eso es si quieres que el separador sea una imagen, si quieres que sea una línea entonces el código es este:
    border-left:3px solid #000;

    ResponderEliminar
  59. Perfecto, ya la puse.

    Fijate, me gustaría moverla un poco hacia la izquierda pues se come un poco los gadgets de la sidebar, ¿tiene solución?

    ResponderEliminar
  60. Por si acaso te dejo el link del blog:

    www.elultimoduelo.com

    ResponderEliminar
  61. Quizá poniendo también padding-left: 15px; sólo verifica que eso no afecte el blog en los distintos navegadores.

    ResponderEliminar
  62. Nada. Eso lo probé ayer.

    Si hago eso la sidebar termina debajo de las entradas.

    ¿Se te ocurre algo más que podamos hacer?

    Este es el código de mi sidebar:

    #sidebar-wrapper {
    background:url(http://dl.dropbox.com/u/28407657/IMAGENES%20ARTICULOS/separador%20sidebar3.png)repeat-y left;
    width: 195px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    color: #4c3c2d;
    margin: 15px 20px 0 0;
    }

    ResponderEliminar
  63. Una opción sería que, agregues el padding que te decía, pero que esos 15px se los reduzcas al ancho de la sidebar.

    ResponderEliminar
  64. Nada. No hay manera.

    Tanto si aumento el ancho como si lo reduzco la imagen (o línea) se come los gadgets por la izquierda.

    No sé que hacer :S

    ResponderEliminar
  65. No, lo que debes reducir no es la línea, sino el ancho de la sidebar. Por ejemplo, si estás poniendo 15px de espaciado, entonces si la sidebar midiera (por decir algo) 200px, entonces tienes que restarle esos 15px, de modo que el ancho (width) sería de 185px.
    Si eso no lo arregla, entonces también restale el ancho de la imagen.

    ResponderEliminar
  66. Eso hice.

    Reduje el ancho de la sidebar, del cuerpo de las entradas, de la imagen y seguimos igual.

    No entiendo como puede ser tan complicado Potro. No sé que hago mal, se supone que esto es un detalle tonto en el código.

    Empiezo incluso a sentirme mal por acaparar tu tiempo con algo tan estúpido :(

    ResponderEliminar
  67. Este es el código antes de tus consejos:

    }
    #sidebar-wrapper {
    background:url(http://dl.dropbox.com/u/28407657/IMAGENES%20ARTICULOS/separador%20sidebar3.png)repeat-y left;
    width: 195px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    color: #4c3c2d;
    margin: 15px 20px 0 0;
    }

    Este es el código con tus consejos:

    }
    #sidebar-wrapper {
    background:url(http://dl.dropbox.com/u/28407657/IMAGENES%20ARTICULOS/separador%20sidebar3.png)repeat-y left; padding-left: 15px
    width: 180px;
    float: right;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    color: #4c3c2d;
    margin: 15px 20px 0 0;
    }

    Como puedes ver aplico el padding y reduzco despues el ancho 15px de la sidebar.

    ¿Resultado?

    El contenido de la sidebar se coloca bajo el cuerpo de las entradas y la sidebar queda vacía.

    ResponderEliminar
  68. Hombre no te preocupes que no pasa nada, sólo es un código.
    Hagamos esto, pon el código como te he dicho, (aunque se caiga la sidebar), pero ya puesto me dices para que entre de inmediato a verlo y ver qué puede estar pasando. Porque de hecho yo desde el navegador "edito" tu plantilla y me funciona bien, así que algo debe estar saliendo mal, pero necesitaría que esté puesto para identificar el problema.

    ResponderEliminar
  69. Lo cierto es que mi web acoge a una comunidad de 40.000 personas no puedo dejar la web asi todo el día.

    Lo mejor que podemos hacer es lo siguiente. Verás que tengo un chat en la web. Solo tienes que hablarme por ahi cuando tu tengas un momento (yo permanezco practicamente todo el día conectado) dime que eres potro, lo cambio y lo miras.

    ¿Te parece bien?

    ResponderEliminar
  70. Lo he pensado mejor y no estoy en posición de abusar de tu tiempo, bastante ayuda me prestas siempre. Haré lo que me dices y dejaré un cartel de aviso por mantenimiento.

    Gracias potro.

    Chequealo cuando quieras.

    ResponderEliminar
  71. Descuida, que justo ando ahora frente a la computadora (estaba por apagarla un rato).
    Me he fijado que cuando pones el código te falta agregar el punto y coma al final de la declaración del padding, y eso está haciendo que se baje la sidebar, o al menos ese parece ser el problema.
    Lo tienes así:

    #sidebar-wrapper {
    background:url(http://dl.dropbox.com/u/28407657/IMAGENES%20ARTICULOS/separador%20sidebar3.png)repeat-y left; padding-left: 15px
    width: 180px;

    Y debe ser así:
    #sidebar-wrapper {
    background:url(http://dl.dropbox.com/u/28407657/IMAGENES%20ARTICULOS/separador%20sidebar3.png)repeat-y left; padding-left: 15px;
    width: 180px;

    Si te fijas, después de ese 15px está faltando el ;

    ResponderEliminar
  72. Perfecto. Ahora sí que si jajajaja

    Por un fallo tonto la de vueltas que hemos dado.

    Muchas gracias potro!

    ResponderEliminar
  73. Querido Potro, tarde mal y nunca respondo a tus consejos.
    Si, actualicé firefox y con eso se lió una buena en el background, cierto es que si no lo actualizas, se vé bien....que desastre ¿?
    En cuanto a la señal de advertencia, yo entro en el blog siempre habiendome identificado primero y puse en la parte de abajo un gadget html con las siguientes indicaciones, como te decía "Acceder | Nueva Entrada | Configuración | Diseño | Edición HTML | Salir", a ver si consigo explicarme, cuando entras de ese modo en el blog siempre en cada apartado aparecen unas herramientas que te permiten entrar y modificar, bien, pues antes de la palabra acceder a mi me aparecían, ahí es donde luego paso a estar una señal de advertencia, un triángulo negro con una admiración y decia que esa imagen ya no estaba disponible, no entiendo porqué, ya que al ponerlo, yo no había incluido imagen alguna, pero en fín. Lo que hice, fué poner otra que encontré con unas herramientas y ahora no aparece la advertencia y si la nueva imagen, pero el caso es que no comprendo porqué pasó....¿Se te ocurre?....Ya que soy un plomo y me gustan las explicaciones....pero si tu no sabes....¿A dónde iría yo?. Gracias, muchas....

    ResponderEliminar
  74. Quizá esa imagen estaba alojada en la cuenta de alguien más y ese alguien cambió los permisos de la imagen o la eliminó. Sólo hay dos razones por la que esa imagen negra aparece, porque se ha eliminado la foto (o no está bien la URL de la imagen), o porque se cambiaron los permisos del álbum a privado. Así que, alguna de esas dos causas ha de haber sido la responsable de que vieras eso, pero, me alegro que hayas actuado de inmediato y lo hayas resuelto exitosamente :)

    ResponderEliminar
  75. pregunto, se puede poner separadores asi pero en las entradas? como seria ?

    ResponderEliminar
  76. Justo al inicio de la entrada hay un enlace, ese enlace tiene la información que buscas. Saludos.

    ResponderEliminar
  77. Gracias Potro, la verdad esta sencillo, como dices en el #3 la parte difícil es pensar el diseño del color, grosor y esas cosas. Saludos

    ResponderEliminar
  78. Acabo de empezar a realizar mi primer blog y me ha resultado de gran ayuda consultar tu blog.
    Tengo un problema con "Poner separadores en gadget", porque no los consigo visualizar. ¿Tiene solución?
    Gracias

    ResponderEliminar
  79. De acuerdo:
    http://chapisteriadecerebros.blogspot.com/

    ResponderEliminar
  80. Hola José Luís,

    Entré a tu blog pero no vi puestos los códigos de los separadores, supongo que los has quitado, pero es necesario que estén puestos para que pueda ver dónde puede estar el error.

    Saludos!

    ResponderEliminar
  81. Hola Potro,
    Gracias. Ya está puesto el código, y en las "entradas" si se ven los bordes, pero en los gadgets de las columnas de la derecha, no aparecen.

    También te quería preguntar si es posible que no aparezcan las entradas y que sólo se visualicen pinchando en los resúmenes.

    ResponderEliminar
  82. Pues nada, regreso de nuevo pero sigue igual sin el código.

    Lo otro no he entendido bien, ahora usas unos resúmenes en la portada, para poder ver la entrada completa es necesario hacer click en el título o en el enlace, pero eso ya lo tienes puesto, no sé si es a eso a lo que te referías.

    Saludos.

    ResponderEliminar
  83. Lo siento, pero lo puse en "Si quieres que el separador sea un borde agrega antes de ]]>" y el código:
    .column-right-outer .widget, .column-left-outer .widget {
    border-bottom:4px solid #000;
    padding-bottom:20px;
    }

    Yo sí que lo veo y no me funciona, así que no se que puede estar pasando.

    Entre el envío del MSG anterior y tu contestación coloqué tu "truco", "Enmarcar entradas y gadgets", que funciona de maravilla.

    Saludos y gracias

    ResponderEliminar
  84. Gracias José Luís, ahora sí he podido ver puesto el código.
    El problema está en que cuando lo has puesto has eliminado la llave de cierre de los estilos que estaban arriba.
    Lo tienes así:

    #menu li ul a:hover {
    color: #1f52ec; /* Color del texto de las subpestañas al pasar el cursor */
    background: #6fa8dc6; /* Color de fondo de las subpestañas al pasar el cursor */
    .column-right-outer .widget, .column-left-outer .widget {
    border-bottom:4px solid #000;
    padding-bottom:20px;
    }
    }

    Y debe ser así:
    #menu li ul a:hover {
    color: #1f52ec; /* Color del texto de las subpestañas al pasar el cursor */
    background: #6fa8dc6; /* Color de fondo de las subpestañas al pasar el cursor */
    }
    .column-right-outer .widget, .column-left-outer .widget {
    border-bottom:4px solid #000;
    padding-bottom:20px;
    }

    En esta entrada se habla sobre ese tipo de errores que son bastante comunes pero por suerte rápidos de arreglar ;)

    Saludos.

    ResponderEliminar
  85. Pues, enormemente agradecido.

    Voy a mirar el código HTML para no volver a cometer estos errores.

    Saludos

    ResponderEliminar
  86. Qué gusto que ya está todo resuelto :)
    Saludos.

    ResponderEliminar
  87. potro , sabras como hacer que el separador quede una cosa asi como esta pagina http://www.indiehoy.com/ como separador o como fondo del titulo del gadget es para www.indiestacio.com saludos :D

    ResponderEliminar
  88. Disculpa Saintrock, ¿pero qué tiene de especial esa página? es que no encontré un separador ahí o no sé a qué te refieras.

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

    ResponderEliminar
  90. http://dl.dropbox.com/u/28520389/titulo.png me refiero a lo que marque en azul , si esque se puede hacer un separador de esa manera o una cabecera de los gadget comos e muesta en esa pagina

    ResponderEliminar
  91. Ahí lo que tienes que hacer es poner una imagen en el título de los gadgets, el procedimiento es sencillo pero lo tienes que hacer uno por uno.

    Saludos.

    ResponderEliminar
  92. potro ya e logrado poner la imagen , pero lo que quiero esque la imagen se salga del margen establecido por mi plantilla , para eso uso el position:absolute y funciona , se sale del margen pero la imagen queda montada en el gadget , porque si te fijas en esta imagen http://dl.dropbox.com/u/28520389/FACES.png la parte de adelante debe quedar justo alineada cn el margen , nose si me exprese bien , si puedieses ayudarme porfavor :c

    ResponderEliminar
  93. Necesitas aplicar márgenes para que se salga, por ejemplo:
    margin-left: -15px;

    ResponderEliminar
  94. Hola Potro!
    Yo te persigo por varios post... ¡Qué pesada y qué burra! ¡¡NO puedo poner los separadores de gadget!!! Miré el post de "errores" que me aconsejaste pero no encontré el error :S Ahora lo dejé puesto en La sonrisa... para que te pases y veas. Igual te copio cómo quedó en HTML y me digas qué hago mal...

    color: #06b5c9;
    padding-right: 2px;
    }.column-right-outer .widget, .column-left-outer .widget {
    background: url(http://media.smashingmagazine.com/images/hr-images-yes/lavilla.gif)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }]]>


    Cariños...

    ResponderEliminar
  95. Hola Estela,

    Es que el error está un poco más arriba. Tienes todo este código:

    .post blockquote {
    border-left: 2px solid #06b5c9;
    border-right: 2px solid #06b5c9;
    border.radius: 10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;
    background: url(http://www.thecutestblogontheblock.com//images/rsgallery/display/natural%20wave%20free%20stretch%20blog%20background%20cream.jpg.jpg);
    padding: 10px;
    font-size: 12px;
    color: #866e03;
    font-family: segoe print;
    .post-body:first-letter {
    font-size: 40px;
    color: #06b5c9;
    padding-right: 2px;
    }.column-right-outer .widget, .column-left-outer .widget {
    background: url(http://media.smashingmagazine.com/images/hr-images-yes/lavilla.gif)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }

    Y debe ser así:
    .post blockquote {
    border-left: 2px solid #06b5c9;
    border-right: 2px solid #06b5c9;
    border.radius: 10px;  
    -moz-border-radius:10px;  
    -webkit-border-radius:10px;
    background: url(http://www.thecutestblogontheblock.com//images/rsgallery/display/natural%20wave%20free%20stretch%20blog%20background%20cream.jpg.jpg);
    padding: 10px;
    font-size: 12px;
    color: #866e03;
    font-family: segoe print;
    }

    .post-body:first-letter {
    font-size: 40px;
    color: #06b5c9;
    padding-right: 2px;
    }
    .column-right-outer .widget, .column-left-outer .widget {
    background: url(http://media.smashingmagazine.com/images/hr-images-yes/lavilla.gif)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }

    Si te fijas ahí, la primer llave de cierre que he puesto es la que está faltando, y como no está puesta invalida todos los estilos que haya debajo, incluyendo el del separador.

    Saludos.

    ResponderEliminar
  96. No sé por qué pero no me funciona (y he probado todos los códigos por si acaso).
    Mi blog es http://eselibromegusta.blogspot.com/ y el código que he puesto es:
    .blog-pager-older-link, .home-link,
    .blog-pager-newer-link {
    background-color: $(content.background.color);
    padding: 5px;

    .column-right-outer .widget, .column-left-outer .widget {
    border-bottom:4px solid #585858;
    padding-bottom:20px;
    }

    #navbar-iframe { height:0px; display:none; visibility:hidden; }
    }]]>

    (he copiado un poco más por si hay algún problema)

    ¿Me podrías ayudar a encontrar el fallo? :)

    ResponderEliminar
  97. Gracias por poner el código extra Sedy, de hecho sí, justo en el código extra es donde está el problema. Si te fijas el código que está arriba donde lo pusiste eliminaste una llave de cierre }
    Eso ha hecho que eso deje de funcionar.
    Debe quedar así:

    .blog-pager-older-link, .home-link,
    .blog-pager-newer-link {
    background-color: $(content.background.color);
    padding: 5px;
    }

    .column-right-outer .widget, .column-left-outer .widget {
    border-bottom:4px solid #585858;
    padding-bottom:20px;
    }

    #navbar-iframe { height:0px; display:none; visibility:hidden; }


    Con eso deberá funcionar, de todas formas aquí hay más información sobre ese tema:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    Saludos.

    ResponderEliminar
  98. Siento volver a molestarte y sí, me he leído el artículo. Lo que pasa es que no sé encontrarme los errores :S
    He suprimido lo que me has dicho y sigue sin funcionarme y he revisado buscando fallos y no soy capaz de encontrarlos. ¿Dónde lo soluciono?
    Disculpa las molestias; me sabe fatal preguntarte tanto.

    ResponderEliminar
  99. Hola de nuevo Sedy,

    No veo que tengas puesto el código en tu blog, pero...
    He visto que además de ese error que te mencionaba tienes otro error igual más arriba. Este código:

    .post img {
    border: 0px solid #ebebeb
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 2px;
    background: 4px #ffffff;
    border: 1px solid #ebebeb;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

    Si te fijas, el .post img { lo has dejado sin la llave de cierre. Todo ese código debe quedar así:

    .post img {
    border: 0px solid #ebebeb
    }
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    padding: 2px;
    background: 4px #ffffff;
    border: 1px solid #ebebeb;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

    ResponderEliminar
  100. Lo olvidaba. No te sientas mal en preguntar, para eso está el área de comentarios y mientras pueda estaré encantado de ayudarte :)

    ResponderEliminar
  101. Gracias :)
    Tengo una última preguntita, porque creo que no me expliqué bien.
    He puesto separadores entre gadgets y se crea una separación entre ellos. El padding sólo me ajusta a qué altura poner el divider, pero no puedo acortar el espacio :S

    ResponderEliminar
  102. Ese espaciado ya lo tiene la imagen, si abres la imagen verás que tiene mucho espacio tanto arriba como abajo. Edita la imagen para que no tenga tanto espacio y los gadgets perderán ese espaciado que tienen.

    ResponderEliminar
  103. No se soluciona :S
    Ésta es la imagen: http://3.bp.blogspot.com/-jJd3jPVRf1U/Ts4frpEn56I/AAAAAAAAAoQ/_BMIBONTdxk/s1600/gad.jpg

    ResponderEliminar
  104. Se redujo un poco pero parece que hace falta unos toques.
    Cambia este código:

    .column-right-outer .widget, .column-left-outer .widget {
    background: url(http://3.bp.blogspot.com/-jJd3jPVRf1U/Ts4frpEn56I/AAAAAAAAAoQ/_BMIBONTdxk/s1600/gad.jpg)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;
    }

    Por este otro:
    .column-right-outer .widget, .column-left-outer .widget {
    background: url(http://3.bp.blogspot.com/-jJd3jPVRf1U/Ts4frpEn56I/AAAAAAAAAoQ/_BMIBONTdxk/s1600/gad.jpg)no-repeat 50% 100%;
    padding-bottom: 25px;
    margin-top: -20px !important;
    border:0;
    }

    ResponderEliminar
  105. Ahora sí que me funciona :)
    Muchísimas gracias. Yo sola no lo hubiera solucionado ;) ¡Y gracias a tu blog estoy cambiando por completo el aspecto del mío! :D

    ResponderEliminar
  106. Qué bueno que todo ha salido bien Sedy :)

    ResponderEliminar
  107. No me funciono, intente de las 2 formas que pusiste, y nada. Espero tu ayuda potro
    www.tecnologianice.blogspot.com

    ResponderEliminar
  108. Tienes un código más arriba al que no le pusiste llave de cierre y eso hace que todo lo que pongas debajo no funcione.
    Está así:
    .Header img {margin:0 auto;}table#RedesSociales{
    position:fixed;
    top:310px;
    left:30px;
    z-index:200;

    Y debe ser así:
    .Header img {margin:0 auto;}table#RedesSociales{
    position:fixed;
    top:310px;
    left:30px;
    z-index:200;
    }

    ResponderEliminar
  109. hola potro un saludo me gustaria saber si tienes una entrada donde pueda poner separadores pero a las etiquetas de imagen con el abecedario el pensado es poner separadores y que al darles click despliege las entradas por la letra que el usuario indica el efecto que te menciono esta en este blog http://itaka-fan.blogspot.com/ es que manejo muchas etiquetas y quiero que en mi nueva plantilla queden con ese efecto saludos

    ResponderEliminar
  110. ¿En qué parte de esa página está lo que mencionas? Porque no veo etiquetas por ningún lado.

    ResponderEliminar
  111. hola potro lamento no haberme hecho entender entras a esta pagina http://itaka-fan.blogspot.com/
    luego en el menu de la derecha un poco mas abajo encuentras algo que dice anime(VL), si le das click se expande (esto de expandir ya lo se hacer y gracias a ti), ese gabget de etiquetas lo que quiero saber es si me puedes ayudar a meter esas imagenes dentro de este gabget hago referencia a las imagenes de las letras #,A,B,C,.....,z o mejor dicho como puedo hacer un menu parecido a ese ya que es de mucha utilidad para los que manejamos tantas etiquetas saludos

    ResponderEliminar
  112. Gracias por los detalles extra razhiel9004. Ahí lo que hacen es usar el método de expandir el gadget que creo ya sabes hacer. Luego, en un elemento HTML/Javascript (que es el que se expande) han puesto spoilers para ver y ocultar contenido, de esa manera cuando haces click en un icono aparece una pequeña lista de links que enlazan a las etiquetas y páginas que quieren. Pero es eso lo que tienen, spoilers; no es algo automático con el gadget ni con el gadget de Etiquetas.

    Saludos.

    ResponderEliminar
  113. gracias potro empezare a armar la nueva plantilla saludos hay te agradezco mi ayuda un saludo

    ResponderEliminar
  114. Gracias por todos los concejos de ante mano lo que pasa es que el formulario que tengo en la sidebar queda oculto, como hago para que el gadget quede adelante sin modificar el ancho de la sidebar, osea que rompa los limites y quede una parte en la sidebar y la otra quede en el background

    ResponderEliminar
  115. que pena el blog es: www.alojaquindio.com

    ResponderEliminar
  116. Si tuvieras acceso a la edición del código de los formularios busca donde dice algo como:
    <input type="email" class="form-textbox validate[required, Email] form-validation-error" id="input_5" name="q5_email5" size="30" placeholder="ex: myname@example.com">

    Cambia ese 30 por un valor más bajo, por ejemplo 27
    Lo mismo en esta parte:
    <textarea id="input_13" class="form-textarea" name="q13_comentarios" cols="25" rows="6"></textarea>

    Por un valor como 20
    Eso será mucho más fácil que si modificas la plantilla, ya que en esas plantillas es todo un lío meterse en ese tipo de modificaciones :/

    Saludos.

    ResponderEliminar
  117. muchas gracias por el concejo, voy a buscar soluciones alternativas en este caso ya que es un lio modificar la plantilla muchos éxitos y felicitaciones por ayudar a tantas personas

    ResponderEliminar
  118. hola potro, que puedo hacer para reducir el espacio que hay entre los gadgets de la cabecera y las entradas.
    gracias espero me puedas ayudar.
    y Feliz Año nuevo, que el 2012 sea el mas prospero de todos tu años

    ResponderEliminar
  119. Feliz Año zona lerh :)
    ¿En cuál blog deseas reducir ese espacio?

    ResponderEliminar
  120. este es mi blog.

    http://ayudaparatupcparaprincipiantes.blogspot.com/

    ResponderEliminar
  121. Agrega un margen antes de ]]></b:skin>

    .main-outer {
    margin-top: -30px;
    }

    ResponderEliminar
  122. Hola, soy yo, No encontre ninguna entrada que tenga lo que yo quiero. Y eso eso un gadget que muestre las entradas más importantes del día pero debajo del gadget de paginas y con imagenes, como tiene este sitio: http://justjaredjr.buzznet.com/ Ya se que es mucha molestia, pero hace mucho tiempo estoy buscando algo asi por que mi blog es de noticias de música y cine y necesita algo asi.
    Te agradesco mucho si tenes la solución a mi pedido. Pero igual Muchas Gracias POTRO!!
    Mi blog: zerooficial.blogspot.com

    ResponderEliminar
  123. Hola Zero,

    Existe el gadget de Entradas Populares que provee Blogger, aunque los muestra en forma vertical; alguna vez supe que había trucos para ponerlo en forma horizontal pero no recuerdo dónde lo vi.
    También puedes usar algún slider, en la sección Slideshows puedes encontrar algunos.

    Saludos.

    ResponderEliminar
  124. nose donde esta ]]> estolo busque mucho en mi edicion html potro ayudaaaa

    ResponderEliminar
  125. Usa las teclas CTRL + F, de esa forma te será más fácil encontrar el código.

    ResponderEliminar
  126. Me gustaría saber como poner un separador (línea fina) después del título de cada entrada que coja el ancho de la entrada. Muchas gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Ana. Debajo de .post-header { agrega esto:
      border-bottom: 1px solid #000;

      Eliminar
  127. Cuando estas EDITANDO un gadget agregandoles HTML SCRIPT, lo GUARDAS, y la ver el efecto en el BLOG PRINCIPAL, aparece el efecto pero a la vez la cajita del gadget vacio, y en algunos caos con un avatar inferior de todas las cajas de gadgets (imagen de herramientas)

    Como ocultar en el blog principal este gadget vacio y tambien dicho avatar inferior que a veces aparece en todas las cajitas de gadgez, que la hacer clik te lleva a tu entradas de datos al blog?

    MI BLOG: http://frogelider.blogspot.com

    MUCHAS GRACIAS POR TODOS..

    FELICITACIONES POR ESTE MAGNIFICO BLOG

    ResponderEliminar
    Respuestas
    1. Lo ideal sería poner el gadget hasta abajo, para que no se note ese espacio vacío. Puedes intentar ocultarlo con una condicional, pero podría ser que el script no cargue, sería cosa de que intentes:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Saludos :)

      Eliminar
  128. Que piña....
    Lamentablemente NO se ve el efecto al ocultar el gadget....
    Empezo a aparecer esa cajita vacia la pagina principal del blog, cuando empce a editar constantemente mi BLOG, colocandolo gadgets con HTML SCRIPTS...

    De todas manera muchas gracias.

    ResponderEliminar
    Respuestas
    1. Otra opción es que el script que tienes lo pongas en la plantilla, antes de </head>
      También puede funcionar.

      Eliminar
  129. Hola que tal? Me pregunto si se puede poner lo mismo en los gedget que tiene abajo el blog? Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Carlu, ¿en cuál plantilla?

      Eliminar
    2. Este es mi blog http://complicacionesdiarias.blogspot.com.ar/
      Yo quiero ponerle separadores en los gadget que tengo abajo. Si Si te fijas tengo uno que va centrado, y otras dos colmunas mas abajo. Saludos. Gracias por tus conocimientos, han sido de mucha ayuda

      Eliminar
    3. Otra duda mas, como puedo hacer para que los gadget de las dos columas que tengo abajo tengo el mismo tamaño y que no se sobrepasen de su lugar.

      Eliminar
    4. Cambia esta línea:
      .column-right-outer .widget, .column-left-outer .widget {

      Por esta:
      .footer-inner .widget, .column-right-outer .widget, .column-left-outer .widget {

      Con eso los separadores también se aplicarán a los gadgets del footer.
      Lo otro que preguntas depende del tamaño de tus imágenes, así que lo ideal es que pongas imágenes del mismo tamaño.

      Eliminar
    5. Muchas gracias. Saludos

      Eliminar
  130. Buenas tardes Potro,

    Nuevamente haciendo consultas sobre mi blog. Quería que le echaras un vistazo porque he marcado una línea de biselado en los gadgets con la Plantilla> Personalizar> Avanzado> Fondo del Gadget.

    Sin embargo, aunque me parece bonito me he encontrado con que la longitud de este biselado es variable en la columna derecha de mi blog: querría eliminar la línea que hay debajo del título "abril 2012 (2)" y extender la que existe debajo del título "Enlaces de interés". No sé si se podrá hacer o cómo conseguir un efecto parecido.

    Por otra parte, he estado viendo tus entradas sobre los menús horizontales con subpestañas. Me ha parecido muy interesante y, aunque ahora mismo recién acabo de comenzar mi vida con blogger, no quiero descartar esta idea para un futuro. Le daría al blog un estilo web y es práctico porque permite ordenar el contenido. No obstante, tengo algunas dudas sobre esto que te haré en las próximas semanas.

    Mientras tanto también ¿podrías decirme de qué manera puedo mejorar estética y funcionalmente mi blog?

    Muchas gracias por tu ayuda. Un saludo.

    ResponderEliminar
    Respuestas
    1. Perdón, se me olvidó añadir la dirección del blog:

      http://mensicorpore.blogspot.com

      Eliminar
    2. Hola Prof. Psyche, si quieres que en ese gadget no aparezcan los bordes entonces agrega esto en los estilos:
      .main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
      border:0 !important;
      }

      Suerte con el menú que elijas ;)

      Eliminar
    3. Muchisímas gracias. Aplique el código y se ve estupendamente.
      Te iré comentando próximamente sobre el menú.

      Eliminar
  131. hola muy bueno tu post pero tengo una duda resulta que el divider que elegi es muy corto y me gustaria que fuese mas ancho
    me fije en un punto de su truco la parte de no-repeat

    .sidebar .widget {
    background: url(URL de la imagen)no-repeat 50% 100%;
    padding-bottom:70px;
    border:0;

    y lo que realmente me gustaria es que se repitiera algun truco con eso?
    porque busque en las condicionales
    y no he encontrado ninguno :(
    agradeceria muuucho tu respuesta (:
    }

    ResponderEliminar
    Respuestas
    1. y otra cosita que se me olvidaba
      era como poner un separador en medio
      de las entradas y el pie de pagina!!
      y uno entre el titulo de la entrada y
      el cuerpo de la entrada
      ya lo intente con

      border-bottom: 1px solid #000;

      pero me une el titulo con las
      etiquetas ya que las pase de abajo hacia arriba
      ademas me gustaria poner un divider y
      Graciass de ante mano
      espero no haber molestado tanto!! xD jejeje

      Eliminar
    2. Tendrás que editar la imagen o buscar una más grande, eso no es algo que se modifique con los códigos.
      Lo otro no sé si entendí bien, pero pon este código, quizá es lo que buscas:
      .post-body {
      border-top:1px solid #000;
      border-bottom:1px solid #000;
      }

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

    ResponderEliminar
  133. Muy buenas Potro,

    Yo estoy intentando poner una especie de barra debajo de cada título del Gadget. Por lo cual me voy a la Edición HTML y busco cada Gadget. Debajo del título le meto la etiqueta "hr" y funciona bien, se crea la barra y todo. El problema es que el espacio entre el Título del Gadget y la barra es muy grande. ¿Hay alguna forma para reducir ese espacio? Y que quede como si estuvieran pegados o muy cerca?

    Muchas gracias de antemano! =)

    ResponderEliminar
    Respuestas
    1. Al HR le puedes poner estilos como cualquier otro elemento, eso incluye márgenes para manipular la distancia. Por ejemplo:
      style="margin-top:-20px;"

      Eliminar
    2. Muchas gracias como siempre, Potro :D. Pero tengo un problema al intentar ponerlo debajo del título del Gadget de Seguidores. No sé porqué, pero no me deja. Y sigo el mismo procedimiento que con los otros.

      ¿Sabes porque puede pasar esto? ¿O como arreglarlo?

      Un saludo!

      Eliminar
    3. El gadget de Seguidores poco se puede editar, cuando haces cambios directo en el gadget no se aplica :/

      Eliminar
  134. Buenas noches, mi querido Potro,

    Hace mucho tiempo que no te escribo, no por falta de ganas, sino por problenas en casa de salud muy, muy complicados; la vida y su dureza.
    Pero tengo que hacer algunas cosas de la tienda y en el blog estaba intentando también poner alguna que otra.
    Yo antes al subir imagenes a picasa cuando quería que tuvieran fondo transparente porque de hecho lo tienen usaba el sistema antiguo, pero, este ha desaparecido y ahora al intentar poner una imagen, no lo respeta y se vé con fondo blanco, ¿se te ocurre cómo podría hacerlo?
    Gracias, como siempre, por tu generosísima ayuda para conmigo.

    El otro problema que tenía, no era el modificar el alto de los comentarios, no me expliqué debidamente, era el alto de donde estan los botones y etiquetas, y, lo conseguí arreglar, aunque no te lo pude contar por todas estas cosas que me han tenido out completamente....y que aquí realmente no es cuestión de contar, aquí sólo alegrías, dudas y tus maravillosas soluciones.
    Muchos cariños

    Perdona que pregunte aquí, pero no encuentro, naturalmente, por torpeza, el lugar adecuado....

    ResponderEliminar
    Respuestas
    1. Hola Patricia, lamento que estés teniendo problemas de salud, espero en Dios que tengas una recuperación pronta.

      Las imágenes transparentes (PNG) se pueden subir tanto desde Picasa como desde Blogger, en sí no hay diferencia en ello, yo las subo desde Blogger y todo funciona bien. De hecho, he entrado a tu blog y veo unas imágenes con transparencia, y ninguna tiene algún fondo blanco o algo similar.

      Gracias por los cariños.
      Besos.

      Eliminar
    2. Gracias, mi niño, otra vez, por todo.
      No, es mi Padre, estamos muy preocupados y es muy difícil, pero yo también tengo Fe en que Dios está siempre con nosotros y espero que nos ayude un poquitín.

      En cuanto a la imagen, las que ves en el blog,son con el sistema antiguo que te mencionaba. Ésta pretendía ponerla en la presentación de zapatos de Góndora, en esa página, y la verdad, quedaba tan mal, que la quité. Es en gif, no en png, quizá deba transformarla, no sé, pero en principio, la imagen es transparente. Es una línea divisoria.... Con fondo blanco queda que te puedes imaginar....

      Porfa.... Un poquito de tu luz, si quieres la pongo para que la veas, o te la mando, o lo que me digas....

      Y cariños, más y más, todos los del mundo, como ya te he dicho alguna vez, eres un ser excelente....

      Eliminar
    3. Hola de nuevo Patricia. Desde Picasa a mí me sigue funcionando subir cualquier tipo de archivos, incluyendo los GIF, los cuales suben con animación y transparencia (en caso de que la tenga).
      Asegúrate que la imagen tenga transparencia, quizá no la tiene.
      Espero que tu padre se alivie.
      Un beso.

      Eliminar
  135. holaa potroo mita, kisiera saber como poder pegar mas los gadgets, osea ke los tengo muy separaos uno de otro, te dejo una imagen pa ke me entiendas http://i.imgur.com/qDSb3.png espero tu respuesta gracias

    ResponderEliminar
    Respuestas
    1. Pues esa es la separación normal. ¿En cuál blog quieres hacerlo?

      Eliminar
  136. Hola Potroo.. no me funciona! Y probé con todas las opciones (las de para agregar una imagen de separador), ya lo habia usado con un blog anterior y funcionó bien pero con este no. Acá esta mi blog http://mividagiraatualrededor.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Carla, yo veo un separador al final de cada entrada.

      Eliminar
  137. Siii, pero ahora quisiera ponerlo tambien en los gadgets.. será que no puedo porque estan enmarcados?

    ResponderEliminar
    Respuestas
    1. No lo sé, pero siguiendo los pasos de la entrada (en plantillas originales de Blogger) debe funcionar.

      Eliminar
  138. Una pregunta en Gadget de texto, sirve para SEO osea las palabras que hay escriba pueden influenciar un poco en el SEO?

    ResponderEliminar
    Respuestas
    1. Si, aunque los robots se concentran más en el contenido de las entradas.

      Eliminar
  139. hola potroo.. otra vez molestandote xD, mira el motivo de este mensaje es pa saber como puedo reducion la separacion ke hay entre cada Gadget, te dejo una foto pa explicarme mejor, http://i.imgur.com/8JoPc.jpg ... en la imagen te dejo marcado en un cuadro color rojo, la sepacion ke deja cada gadget, lo ke kiero es poder unirlo un poco mas... ke los veo muy separadoo... espero tu respuesta gracias

    ResponderEliminar
    Respuestas
    1. Hola, prueba agregando estos estilos:
      .sidebar .widget {
      margin: 0px 0px;
      }

      Eliminar
  140. uuufff perfectoo graciass potroo ere un makinaa xabal

    ResponderEliminar
  141. Ola potro! me gusta mucho tu blog (:
    tengo un problema, al poner el código si me pone el separador pero me cambia el fondo de mi gadget al color de fondo de barra lateral y no se porque :S podrías ayudarme? (:

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

      Eliminar
    2. Pues lo puse en este http://ffooreveryoungg.blogspot.mx/ pero lo quite porque no me respetaba el fondo blanco de mis gadgets y lo volvía rosa. =S

      Eliminar
    3. Entiendo, pero necesito verlo puesto para ver por qué sucede eso.

      Eliminar
    4. Perdón, ya lo he visto, pero no veo que tus gadgets tengan fondo rosa, los veo con fondo blanco y sí un rosa pero al rededor, causado por los estilos de tu plantilla y no por el separador.

      Eliminar
  142. Super util! muchas gracias! Una consulta.., hay alguna manera de poner el separador en algunos gadgets (los que tu quieras) no en todos?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Se puede aunque requiere más trabajo. Mira el comentario #7
      Saludos.

      Eliminar
    2. Gracias! Y perdona, no habia leido los comentarios, jejeje, como son muchos.. Bueno, voy a ver si me aclaro.. sino, da igual, queda genial como se me ha kedado tambien :)

      Felicitaciones por tu magnifico blog :)

      Eliminar
    3. Gracias! Y perdona, no habia leido los comentarios como son muchos... jejeje.

      Voy a ver si me aclaro, y sino.., no pasa nada, ha kedado genial :)

      Felicitaciones por tu blog :)

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

    ResponderEliminar
    Respuestas
    1. No he comprendido bien Alison, ¿tienes problema con agregar el separador que se menciona en la entrada o es otro elemento de tu sidebar? ¿en cuál blog?

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

    ResponderEliminar
    Respuestas
    1. Es complicado Alison, usualmente las plantillas que tienen de esa forma los gadgets es porque hasta la estructura de los gadgets es distinta, ya que no puedes poner dos imágenes a un mismo contenedor :(

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

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

    ResponderEliminar
    Respuestas
    1. Se me ocurre que podrías agregar esto:
      .sidebar .widget {
      background: url(URL de la imagen de abajo) bottom center no-repeat;
      }

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

    ResponderEliminar
    Respuestas
    1. No veo puesto el código que te di, y tampoco sé cuál sea la otra plantilla de la que hablas :/
      Pon el que te di y vemos qué resultado da.

      Eliminar
    2. Ah, y gracias por los bechotes :)

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

      Eliminar
    4. Eso te lo debo Alison, no tengo una entrada sobre ello, pero en los tutos que hay en la red puedes preguntar, seguro sólo es cuestión de reemplazar el ID de tus contenedores.

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

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

    ResponderEliminar
    Respuestas
    1. No he comprendido Alison, tampoco he podido ver el blog, sólo admite invitados.

      Eliminar

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

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger