Enmarcar entradas y gadgets

30 de mayo de 2011 294 comentarios ,
Algunas veces las plantillas suelen ser muy "planas" y nos hacen sentir como que los gadgets o las entradas se pierden entre ellos mismos pues no se distingue dónde empiezan y dónde acaban.
Así que una opción para delimitar los espacios de éstos es enmarcar las entradas y gadgets del blog y así definir cada uno con un borde. Por supuesto que podemos elegir si se lo aplicamos sólo a las entradas, o únicamente a los gadgets.

Haremos que las entradas se vean más o menos así.


Y los gadgets así.


Veamos pues cómo enmarcar entradas y gadgets tanto en las plantillas "nuevas" como en las "antiguas" de Blogger. Para cualquiera de las dos entra en Plantilla | Edición de HTML, y ahora...

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

Antes de ]]></b:skin> agrega esto:
.post-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 20px 0;
}
.column-right-outer .widget, .column-left-outer .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}
.footer-inner .widget {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:10px;
margin: 10px 0;
}

El tamaño, tipo y color del borde se modifica en border: 1px solid #000;
También puedes elegir que los bordes sean redondeados, sólo cambia los valores en color azul por unos más altos, por ejemplo 10px entre más alto sea el valor más redondeadas serán las esquinas.

El primer bloque corresponde a los bordes de las entradas, el segundo bloque a los bordes de los gadgets de la sidebar, y el tercer bloque a los gadgets del footer. Si no quieres aplicar el enmarcado a una de estas áreas sólo elimina el que le corresponde.

En el caso de algunos diseños de las plantillas Awesome Inc y Ethereal en lugar del primer bloque, el que utilizaremos será este:
.date-outer {
border: 1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
padding:15px;
margin: 40px 0;
}

Para las Plantillas antiguas de Blogger

Antes de ]]></b:skin> agrega esto:
.post {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
}
.main .post {margin:20px 0; padding:15px;}
.sidebar .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
.footer .widget {
border:1px solid #000;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
margin:15px 0;
padding: 10px;
}
De igual forma el primer bloque es para las entradas, el segundo para la sidebar, y el tercero para el footer.

Ya sea que uses una plantilla del Diseñador, o una plantilla antigua, quizá tengas que modificar la separación del borde pues en algunos casos podrá quedar muy pegado al contenido. Esa separación se modifica en el padding que aparece en los estilos. Y en el caso de la distancia entre gadgets y gadget o entrada y entrada, esa se controla en el margin, el primer valor es el margen superior e inferior, y el segundo valor es el margen izquierdo y derecho.

Estos métodos son únicamente para plantillas oficiales de Blogger, para cualquier otra plantilla personalizada les recomiendo contacten al autor de su plantilla para preguntar sobre el procedimiento.


294 comentarios en:

" Enmarcar entradas y gadgets "

  1. interesante potro lo voy aplicar en una web que tengo....potro una pregunta como hago para colocar entradas destacadas y que se actualizen en donde aparecen las imagenes en carruzel que tengo en esta web...www.cienciaverde.co.cc

    ResponderEliminar
  2. Ha! no Fui el primero pero el segundo si! muy buen post @potro, y por cierto MUY Util!.....

    ResponderEliminar
  3. Gracias, Potro, siempre he querido algo así y no sabía cómo hacerlo..¡ahora sí!, :)
    Un beso

    ResponderEliminar
  4. Hola Potro, estupendo trabajo... mil gracias como siempre ;-)

    ResponderEliminar
  5. Full como siempre potro, andas volando !!!
    Muchas gracias men!...

    Suerte y Exitos!... ;)

    ResponderEliminar
  6. ciencia, usando un slider puedes poner entradas destacadas (en el buscador de aquí encontrarás algunos), pero si quieres que se actualicen automáticamente me parece que en Pizcos tienen una entrada sobre eso.

    Sergio Molina, gracias Sergio, por cierto, muy bueno el cambio en Ejoy-nate :)

    Sofía Serra Giráldez, qué gusto leerte de nuevo por aquí, y digo por aquí porque por tu blog siempre ando aunque ande de incógnito :)

    MaG@S RaDioMuSiC, gracias a ti por tu visita!

    Circulo W.H., suerte y éxitos para ti también!

    ResponderEliminar
  7. potro una pregunta.. como puedo agrandar el main pero que quede centrado porque se agranda para el lado derecho solamente.. lo que hice fue poner margin-left -10px en post h3 y se centra pero la `parte izquierda se ve cortada.. que hago?

    ResponderEliminar
  8. Si Potro, con lo de la caida de blogger... se me daño todo, y decidi hacer un cambio de ultima hora, que a la final quedo bn :)

    ResponderEliminar
  9. Eres un fenómeno Potro, mil gracias.

    ResponderEliminar
  10. Muy útil esto, me cae de perlas para una plantilla que esto haciendo.
    Potro una pregunta, de casualidad sabes como se llama el aviso que sale en esta página cuando se llega al final del post. Que muestra un post relacionado. He intentado encontrar un tutorial sobre como ponerlo pero la verdad no doy con ninguno y sin saber el nombre del truco más díficil encontrarlo. Si conoces un tutorial donde expliquen, como hacerlo te lo agradezco.

    ResponderEliminar
  11. Hola, Potro! Hay algo que no entiendo:Cuando dices que quizás haya que modificar la separación del borde, dices que:

    "Esa separación se modifica en el padding que aparece en los estilos". ¿Qué es el padding de los estilos, dónde lo busco?

    También te quería comentar : si tengo un slider justo en la sidebar y es ahí donde quiero enmarcar los gadgets, ¿con el Slider no funcionará y dará problemas, no?
    Gracias!

    ResponderEliminar
  12. PokerPRO, no me ha quedado claro, ¿quieres agrandar el área de las entradas? ¿en cuál plantilla?

    FRANCISCO, Jorge Donato, gracias a ustedes!

    ResponderEliminar
  13. Adalberto, no conocía ese gadget, a ver si luego doy con un tutorial que hable sobre ello.

    No sin MyMakeUp, en el código que se agrega verás que hay tres padding, esos son los padding que se tienen que modificar en caso de que sean necesarios. Si el slider está en la sidebar también se enmarcará, pero no veo por qué te daría problemas :/

    ResponderEliminar
  14. potro estuve buscando en pizcos pero no encontre entradas destacadas automaticas

    ResponderEliminar
  15. en la plantilla minima.. quiero agrandar el main-outer pero al hacerlo solo se agranda para el lado derecho.. no se como centrarlo..

    ResponderEliminar
  16. potro necesito ayuda contactame a este correo mxla12@hotmail.com

    ResponderEliminar
  17. ciencia, entonces pregúntale a él en una entrada sobre ese post, yo alguna vez lo vi pero no recuerdo el nombre del gadget.

    PokerPRO, hazlo y ya hecho me dices en cuál blog lo has puesto para poder mirarlo y entender el problema.

    Maiik'r, arriba hay un enlace de Contacto por si necesitas ayuda sobre un tema que no esté publicado en el blog.

    ResponderEliminar
  18. listo potro esta en el de www.poker-maestro.blogspot.com.. ayuda.. un abrazo!

    ResponderEliminar
  19. Supongo que te refieres a reducir el margen izquierdo del contenido de las entradas. Si es así busca esta parte:

    #main-wrapper {
    width: 520px;
    float:left;
    word-wrap: break-word; margin:0 0 0 35px;

    Cambia ese 35px por 25px o un valor que se adecue a tus necesidades.

    ResponderEliminar
  20. Vaya ésto también me interesa, pero más exactamente me gustaría enmarcar y cambiar el fondo de una parte del texto de la entrada ¿es posible? Mil gracias.

    ResponderEliminar
  21. Gracias, Potro, ya me enteré de lo del Padding. Pero aunque en vista previa me salía más o menos bien, cuando realmente hice el cambio, me dio error de blogger y me superponía unos gadgets sobre otros!!! Así que tuve que deshacer cambios :(

    ResponderEliminar
  22. Muchas gracias Potro, está genial. Lo he hecho en la sidebar y sin ningún problema, pero tengo una pregunta: puedo cambiar también el color de fondo de los gadgets?
    Saludos!!!
    Lyra

    ResponderEliminar
  23. Lo he utilizado para enmarcar mi post-footer y me gusta como me ha quedado. Gracias.
    http://mpmoreno.blogspot.com/

    ResponderEliminar
  24. Potro como siempre grandioso me has leído la mente mil gracias

    ResponderEliminar
  25. Solo una pregunta por que al inicio de las entradas no me cierra el margen como lo podrás ver aquí en mi blog http://cityvilleextreme.blogspot.com/

    ResponderEliminar
  26. María, sí es sólo un párrafo específico el que deseas enmarcar encierra el texto en este código:

    <div style="background:#ccc; border:1px solid #000; padding:10px;"> ...Aquí va el texto... </div>

    El background es el color de fondo, y el border es el borde.

    ResponderEliminar
  27. No sin MyMakeUp, posiblemente hubo algún error en la modificación, pero igual si lo guardas sin hacer ningún cambio seguro te saldrá bien, ya después puedes personalizarlo un poco.

    Lyra, claro, ahí mismo en este código que agregaste añade debajo de border: 1px solid #000; esto:
    background:#ccc;

    ResponderEliminar
  28. m.p.moreno, a mí también me gusta el resultado que has conseguido :)

    TH3 V1P3R, yo lo veo todo bien.

    ResponderEliminar
  29. Muchísimas gracias Potro, me encanta como ha quedado;-)

    ResponderEliminar
  30. Perfecto Potro! Solo me volví un poco loca para elegir un color que me gustara, muchas gracias.

    ResponderEliminar
  31. hote queria pedir un favor creo que debe ser muy simple para ti pero muy problematico para my es que en my blog que es este http://cinecolombi.blogspot.com/ en la parte de arriva en al lado del favicon que es el titulo del blog que dice cinecolombi-estrenos hD me gustaria que ese mensaje ese titulo solo se vea en la pagina principal del blog no en todas las entradas y paginas para que se vea el titulo de la entrada muchas gracias espero averme expresado bien y buen dia :D

    ResponderEliminar
  32. Sólo necesitas optimizar los títulos del blog para que en las entradas se vea primero el nombre de la entrada y después el título del blog.
    Saludos.

    ResponderEliminar
  33. potro como hago para colocar canales en vivo en mi web con ustream, yo coloque un canal pero me sale que solo se tiene que ver directamente en la pagina de ustream.tv

    ResponderEliminar
  34. Sí, es cierto que hacía tiempo que no venía, Potro, huracanes interiores que me han traído a mal traer, perdón por la redundancia, :).

    Me halagas con eso que me dices, que visitas mis blogs, gracias.
    Un beso enorme.
    Por cierto , algún día podrías decir como es eso de "incógnito"...yo es que soy más inocente que un cubo boca abajo, por muchos años que lleve en esto, :D.....o muy tooonta,;)

    ResponderEliminar
  35. ciencia, no lo sé, nunca he usado ese servicio.

    Sofía Serra Giráldez, es sólo un decir, refiriéndome a que siempre me doy mis vueltas aunque nunca dejo un comentario, tendrás que disculparme por eso pero muchas veces me quedo corto de palabras para expresarme. Y nada, que de tonta no tienes ni una pizca ;)

    ResponderEliminar
  36. potro por hay me di cuenta que blogger no esta dejando que una añada gadget en el panel de control ni que actualize el gadget....

    ResponderEliminar
  37. Prueba hacerlo desde otro navegador, o borrando cookies, historial y chaché del navegador.

    ResponderEliminar
  38. Gracias por echar un vistazo a mi blog. No sé como llegas a todo. Te sigo via email.

    ResponderEliminar
  39. Hola potro, ya utilice este post pero no me queda no se porque, utilice los tres bloques pero ni los gadgets se enmarcan me podrías ayudar por favor?
    este es mi blog

    http://conta-lerh.blogspot.com/

    Pd. uso la plantilla fantástico S.A.

    ResponderEliminar
  40. Recuerda que para las plantillas Fantastico S.A (Awesome Inc.) y Ethereal el código varía por otro que se menciona ahí.

    Si no te da resultado haciendo ese cambio prueba ponerlo debajo de:
    /* Footer
    ----------------------------------------------- */

    ResponderEliminar
  41. Potro, cres que se pueda hacer esto pero para determinadas entradas? Digamos, solo las entradas con "x" categoría? Un saludo.

    ResponderEliminar
  42. Claro, usando las condicionales. Antes de </head> esto:

    <b:if cond='data:blog.url == &quot;URL de la etiqueta&quot;'>
    <style type='text/css'>

    ...Aquí el código de los estilos para enmarcar...

    </style>
    </b:if>

    ResponderEliminar
  43. ya lo hice potro cambie el codigo antes de ]]></b:skin>
    y despues de:

    /* Footer
    --------------------------------------------- */

    cambiando el primer bloque por este

    .date-outer {
    border: 1px solid #000;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:15px;
    margin: 40px 0;
    }

    y no me queda no se que estoy haciendo mal, gracias por tu ayuda potro

    ResponderEliminar
  44. Pues no entiendo porqué no surge efecto, yo lo pruebo cada vez en la misma plantilla y funciona sin problemas :/

    Como último recurso pon este código:


    .main-inner .widget {
    border: 1px solid #000 !important;
    }
    .date-outer {
    border: 1px solid #000 !important;
    }

    ResponderEliminar
  45. pues no se que es lo que pasa pero ni con el ultimo código se puede cambiare la plantilla con la sencilla, gracias por todo potro eres increible

    ResponderEliminar
  46. cambie la plantilla y ya quedo, solo una cosa potro que podria hacer para que lo que sale al final de la entrada (autor, etiquetas y comentarios) solo se vean en las entradas y no en la paginas
    gracias

    ResponderEliminar
  47. Por supuesto, sólo es cuestión de encerrar los datos del post-footer dentro de una condicional.

    ResponderEliminar
  48. Hola potro yo hace mucho tiempo tenia un blgo con una plantilla de esta manera parecia

    www.megapeliculasgratis.com me refiero q era asi la presentacion de mi portada, una vez te mande la plantilla, bueno la idea es q perdi la plantilla (el respaldo) y bueno nunca mas pude saber como voler hacerlo de esta manera mi blog, serias tan amable de enseñarme como hacerlo de esta manera ?? gracias o tal vez poner la plantilla que te envie ?

    ResponderEliminar
  49. Pues si quieres dame algún dato que agregaste en ese correo, ya sea el nombre que usaste, o mejor aun la dirección de correo electrónico, así localizo ese mail y te envío el respaldo que en aquella ocasión me enviaste.

    ResponderEliminar
  50. bueno la direccion con la que te envie recuerdo q te envie un correo y tb te contacte por el link de contacto de tu blog, la direccion de correo debe ser esta cuta_beer@hotmail.com

    y me acuerdo que te lo mande en un link de megaupload

    ResponderEliminar
  51. Gracias, con ese dato ya encontré el correo donde adjuntaste la plantilla así como el enlace de descarga a ella, ahora mismo te la mando a esa dirección.

    ResponderEliminar
  52. Gracias potro recibi el mail y probe la plantilla en uno de mis blogs, pero no kedo de igual manera las imagenes de arriba no se por q kedan deslizandoce hacia abajo y si notas las entradas tienen el titulo pero salen cortados es decir no sale todo el titulo, podrias ayudarme a recostruir esta plantilla ? la verdad esta plantilla la hiso un amigo mio pero el ya no esta ... te la coloco en un blog para q veas como keda ahora (es extraño deberian kedar bien las imagenes de la parte de arriba) pero bueno la idea es que kede centrado y si por favor podrias ayudarme ah mejorarlo poniendo centrado kitando esas cortinas de los costados y expandir ese parte del blog para que kede centrado, el blog donde lo eh colocado es este

    http://peliculas-revo-online.blogspot.com

    ResponderEliminar
  53. lo que comente del titulo es algo que deberias tomar en cuenta por q en el estilo magazine (3) lo que hace q salga mas las entradas es el titulos pues algunos son demasiados largos y otros cortos y descuadra la imagen que va al centro por eso opte por recurrir a esta antigua plantilla porfavor ayudame

    ResponderEliminar
  54. Sino me equivoco esas imágenes son parte de una galería hecha con jQuery la cual no conozco, pero a simple vista sí he podido notar que al menos dos de los archivos que hacen que esa galería funcionen están alojados en un sitio que está inactivo y por lo tanto los archivos no funcionan y como resultado la galería tampoco.

    Los títulos no veo que ninguno se salga del contenedor, pero de ser así se puede arreglar ocultando el texto sobrante, y digo ocultar porque en las plantillas tipo magazine los títulos siempre deben ser cortos, ten en cuenta que la idea es mostrar en poco espacio poca información.

    Las cortinas son una imagen, sólo busca en la plantilla esa imagen y elimínala.
    Ahora, no es que la plantilla no esté centrada, lo que pasa es que tienes una sidebar que no tiene nada y ese espacio vacío da la apariencia que no está centrado.
    Sin embargo sí puedes quitar un espacio sobrante (que ignoro porqué lo pusieron).

    #centermeio {
    width:1012px;
    padding-left:70px;

    ResponderEliminar
  55. Potro hola de nuevo yo, me veras muchooo por acá, encontré mi lugar ideal jeje, mir, hice todo lo que dices y me queda bien ene le sidebar y el footer funciona en ciertos gadget, pero en las entradas no.

    Este es el blog que estoy intentando re-modelar
    http://teambookbl.blogspot.com/

    ResponderEliminar
  56. Potro, respecto a tu comentario numero 48 debo decirte que no me funciona lo de esconder los datos del post-footer en condicionales, me ayudas plisssss

    ResponderEliminar
  57. gracias potro por responder esos archivos q mencionas q estan alojados en un sitio inactivo los puedo descargar y colocarlos en algun sitio nuevo ? o o podrias averiguar algo sobre ese jQuery creo q la version q esta usando esa plantilla es la 1.3.2 y creo q ya hay mas actualizados

    bueno lo que yo decia de la quitar la cortina y que kede centrado me referia ah como esta ahora si te fijas ya quite la imagen de la cortina que venia con todo y titulo aparte del titulo que tiene, y bueno kedan a los costados 2 espacios muy grandes, ademas creo q esta plantilla fue hecha para poder vizualizarce en una pantalla LED.

    por lo que yo lo veo asi

    https://lh4.googleusercontent.com/-gKEAfB_u4Ec/TfvkLMaMaNI/AAAAAAAABKE/Ll7ePWyVkoI/s104/asi%2Blo%2Bveo.JPG

    si te fijas en la imagen veras q no tengo para ver mas al costado --> donde se supone la plantilla continua si achico la visualizacion de mi imagen en mi monitor con la tecla control y apretando el boton - recien puedo verlo completamente y veras que como no estan las cortinas se ven 2 muros enormes a los costados,

    eso me pregunto si se puede espandir ah eso me referia con centrarlo al kitar las cortinas espero puedas ayudarme

    ResponderEliminar
  58. Hola AMAFLE ,

    Yo encantado de que visites este blog así que puedes venir las veces que lo desees ;)

    En las entradas no te ha funcionado porque te ha faltado un pequeño y diminuto punto en el primer código, si te fijas debe ser así esta primera parte:

    .post {

    Y tú lo has puesto así, sin el punto:
    post {

    En cuanto a los del post-footer sólo localiza los códigos que se muestran en aquél enlace y enciérralos con la condicional que es para que se muestre SÓLO en las entradas individuales.

    Saludos.

    ResponderEliminar
  59. Hola de nuevo FarStar,

    Si el sitio ya no existe no puedes recuperarlos, algunas veces se puede usando la caché del sitio pero no en este caso pues ya tiene bastante tiempo sin funcionar.
    Como te decía antes, no conozco esa galería así que no sabría decirte cómo o dónde encontrarlos.

    Igual te repito, no hay espacios sobrantes, ese espacio que ves ahí del lado izquierdo es tu sidebar, pero como sólo tienes un gadget hasta arriba da la impresión de que ese espacio estuviera vacío, pero no lo está.
    Puedes eliminar la sidebar si lo deseas, eso hará que se recorra a la izquierda el contenido de las entradas, pero te quedarás sin sidebar.
    Si deseas ocultarla sólo añade en esta parte lo que está en negrita:

    .sidebar1{
    display:none;

    ResponderEliminar
  60. no fui muy especifico aca las imagenes q te envio son para que te guies perfectamente:

    a continuacion como esta con las cortinas:

    http://1.bp.blogspot.com/-nTEH5uEBag4/TfwJAwYsUuI/AAAAAAAABKg/QiSXqIdYD0w/s1600/ASi+queda+con+las+cortinas.JPG

    asi keda sin las cortinas y el espacio negro que kiero que no este:

    http://2.bp.blogspot.com/-1fQYoCXttCU/TfwI-NE7pkI/AAAAAAAABKc/ULEKsAjkLmQ/s1600/asi+se+ve+sin+las+cortinas.JPG


    y gracais por seguir respondiendo se q debe algo aburrido por no decir aburrido y molestoso, pero eres un capo en esto y nesecito de tu sabiduria, que galeria de imagenes me aconsejas para reemplazar ese? ese se movia automaticamente pasaba de imagenes solito alguno parecido ?

    ResponderEliminar
  61. Gracias por los detalles extras, ahora sí me ha quedado claro, pero de igual forma se trata de un problema de percepción. Te explico:

    La plantilla, al igual que la gran mayoría de las plantillas, tiene la estructura del blog centrada, de tal forma que si agrandas la ventana del navegador entonces el contenido se centra, esto hace que parezca que hay un espacio sobrante.
    Pero si reduces el ancho de la ventana de tu navegador verás que ese supuesto ancho extra desaparece, ¿porqué? pues porque como el contenido está centrado se mantendrá así sin importar el tamaño de la ventana.

    Así que hay dos opciones, o lo dejas así (es lo más recomendado para que se vea bien en todas las resoluciones de monitores), o bien, modificas los márgenes para eliminar ese auto-centrado, de manera que el blog se recorrerá a la izquierda.
    Si deseas hacerlo sólo busca todos los margin:auto; que haya en tu plantilla y elimínalos.

    De galerías hay decenas de ellas, todo depende de qué tengas en mente, pero en la red encontrarás mucha información y variedad de galerías.

    ResponderEliminar
  62. muchas gracias potro por todo, ya vi q kitando el margin:auto; se corre a la izkierda tal como me comentas, bueno creo q lo dejare con el margin:auto; y bueno buscare una galeria adecuada muchas gracias otra vez.

    ResponderEliminar
  63. Wow amigo, simplemente gracias! solo gracias wow, me has ayudado muchisimo te agradesco viejo! jajaja me gusta tu web y con esta entrada te pasastes gracias!!

    ResponderEliminar
  64. Qué gusto que hayas encontrado la información que necesitabas, un saludo!

    ResponderEliminar
  65. Hola, te hago una consulta, incorpore a mi blog la opción que te facilita Blogger del gadget "Lista de Blog" y quiero enmarcarla al igual que a las demas que tengo en el Blog. Me podrías decir si es factible y como. Probe con la opcion que brindas en esta página pero me queda desigual a las demas. Muchas Gracias.
    Gabriel Peirano. http://futbolamateurssd.blogspot.com

    ResponderEliminar
  66. Hola Gabriel,

    Lo que sucede es que ese gadget parece que no está en la sidebar original de la plantilla sino en una sidebar que has añadido.
    Puedes probar agregando también esto:

    #sidebar-right-2-1 .widget {
    border: 1px solid #000;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:10px;
    margin: 10px 0;
    }

    ResponderEliminar
  67. potro no me va :S queria ponerlo en las entradas pero no se ponen los bordes, como puedo solucionarlo?
    www.campamentoweb.blogspot.com
    tambien he probado el que le diste a lerh

    ResponderEliminar
  68. Mira esta entrada para que veas dónde está el error:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

    ResponderEliminar
  69. Esta todo correcto... pero sigue sin verse

    ResponderEliminar
  70. No, no está correcto, te falta una llave de cierre, por eso te puse el enlace para que te fijaras en ese detalle:

    #Text1 h2 {
    background: url(http://i578.photobucket.com/albums/ss230/superclub_2009/campamentoweb_preguntas.png) no-repeat top;
    height: 55px;
    .post-outer {
    border: 10px solid #33CCCC;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    padding:15px;
    margin: 20px 0;
    }

    ResponderEliminar
  71. Hola Potro, una cuestión:

    cómo puedo poner un fondo a los gadget sin tenerlos que enmarcar. Y de igual modo, cómo poner un mismo fondo a varios gadget????

    Gracias

    ResponderEliminar
  72. Hola Carlos,

    Siguiendo el mismo procedimiento puedes ponerle el fondo a los gadgets, sólo cambiarían los estilos para que en lugar de que sea un borde sea un fondo. Sólo agrega antes de ]]></b:skin> lo siguiente:

    .column-right-outer .widget, .column-left-outer .widget {
    background:#ccc;
    padding:10px;
    }

    ResponderEliminar
  73. Potro, no se dónde poner esta consulta...he mirado en tu indice, pero no encuentro ninguna mas adecuada

    He puesto 5 gadgets en el crosscol y no consigo q se vean los titulos. Yo creo que falta espacio, pero no se dónde arreglarlo. Alguna idea?

    Muchas gracias,

    ResponderEliminar
  74. Hola Isabel,

    No creo que sea la falta de espacio, desde hace un par de días algunos usuarios han tenido el mismo problema, así que podría ser un problema con la plantilla.
    Agrega antes de ]]></b:skin> este código y dime si eso lo arregla:

    .tabs .widget h2 {
    display: block !important;
    }

    Saludos.

    ResponderEliminar
  75. Potro, sí, se ha arreglado!! Muchas gracias,

    ResponderEliminar
  76. Gracias por hacérmelo saber Isabel, si continúan los problemas con los demás usuarios haré una entrada sobre este tema. Saludos!

    ResponderEliminar
  77. Estimado amigo, espero que te haya ido bien las vacaciones..... tengo una pregunta. He enmarcado mis entradas y el margen que me deja en la parte inferior ss grande, cómo puedo disminuirlo. Puedes comprobarlo: http://www.semanasantadebaza.com Un abrazo

    ResponderEliminar
  78. Hola carlos,

    Puedes modificar el margen inferior en esta área:
    .comentarios-cb {
    background:#FFFFFF; /* Color de fondo */
    border-top:2px solid #FE2181; /* Borde superior */
    border-bottom:2px solid #FE2181; /* Borde inferior */
    margin-bottom:20px;
    }

    Con un valor más pequeño se reducirá el espacio.
    Otro abrazo para ti.

    ResponderEliminar
  79. Potro, he disminuído el porcentaje en margin-bottom:20px y no se produce ningún cambio, ni en vista previa ni guardando los cambios. El espacio entre la línea inferior y la línea de texto de comentarios y etiqueta sigue siendo grande. ¿Qué puede pasar?

    ResponderEliminar
  80. Debo pedirte disculpas porque entendí mal, creí que te referías a los comentarios y no al marco de las entradas. En ese caso agrega lo que está en negrita en esta parte:

    .post-outer {
    border: 1px solid #000;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:15px;
    padding-bottom:2px !important;
    margin: 20px 0;
    }

    ResponderEliminar
  81. Potro, no logro localizar este ese código, ¿puede haber otro similar?

    ResponderEliminar
  82. Me he hecho un lío, porque apenas veo que el código que pusiste fue el que es para las plantillas antiguas de Blogger, y no para las que están hechas con el Diseñador de plantillas, que es tu caso.

    Siendo así, entonces busca esto:
    .main .post { margin:0 0 1.5em;padding:0 0 1.5em; padding: 10px; }
    margin: 0 0 45px 0;
    }

    Y cámbialo por esto:
    .main .post { margin:0 0 1.5em; padding: 10px; padding-bottom:2px !important;}

    ResponderEliminar
  83. Hola, Potro. Ya conseguí enmarcar las entradas, sin ningún problema. He visto que alguien pide cómo cambiar el color de fondo de los widgets. Se puede cambiar el color de fondo de las entradas, después de haberlas enmarcado? Me refiero SOLO al de las entradas, sin tocar el color de fondo de la plantilla. Gracias. Ah! mi plantilla es de las antiguas, Sand Dollar.

    ResponderEliminar
  84. Clari que sí Vicenç, sólo agrega la propiedad del color, añade justo arriba de:
    border:1px solid #351C75;

    Esto:
    background:#ccc;

    ResponderEliminar
  85. Chico, eres un genio! Hecho! Bien, queria el color blanco y así lo he puesto: #FFFFFF. Te agradezco una vez más tu ayuda. Saludos desde Catalunya.

    ResponderEliminar
  86. Saludos Potro , funciona el poder poner fondo de otro color a las entradas y gadget , gracias por tu ayuda mil gracias .

    ResponderEliminar
  87. Se me olvidaba preguntarte si es posible poner una imagen que quede colocada a la izquierda de la entrada y poner el texto a la derecha de esa misma entrada , por tu ayuda mil gracias.

    ResponderEliminar
  88. Hola pantro,

    El área de las entradas es independiente al área de los gadgets, así que sí puedes poner un color de fondo distinto a cada uno de ellos. Sólo tienes que agregar la propiedad del color de fondo:

    background: #ccc;

    Lo de la imagen, cuando la subas, ahí especificas la alineación de ella, si escoges a la izquierda entonces el texto de la entrada quedará a la derecha.

    ResponderEliminar
  89. Potro ya he hecho lo que me has pedido en el e-mail, no obstante el código margin: 0 0 45px 0;
    } no lo se encuentra en el blog. un abrazo y gracias

    ResponderEliminar
  90. Hola Carlos,

    Acabo de entrar al blog y veo que sí se ha reducido la distancia, si te fijas en la imagen que me inviaste y como se ve ahora en el blog, sí se ve menos espacio entre el borde y el final de la entrada. Ya no se puede reducir más, si acaso 2px menos, pero no es mucha la diferencia. Si quieres quitarle esos 2px entonces cambia el padding-bottom:2px !important; por:
    padding-bottom:0px !important;

    El otro código que te he sugerido que elimines está justo debajo de la línea que has pegado. Quizá lo veas así:

    margin: 0 0 $(post.margin.bottom) 0;
    }

    Un abrazo.

    ResponderEliminar
  91. Hola Potro, despúes de mucho intentar me salió pero poniendo .main-inner .column-right-inner .widget {
    Y los valores que tu diste. Será por la plantilla???, o sea lo hice a prueba y error. Eso es en la plantilla simple. Saludos.

    ResponderEliminar
  92. Vimonbox, pues con los valores que yo puse en la entrada debió funcionar, al menos con esos yo los he probado y funcionan, pero bueno mientras con los que pusiste funcionen no hay de qué preocuparse ;)

    ResponderEliminar
  93. Gracias por la info potro. Me ha servido mucho para quitarle lo plano a mi blog. Gracias =)

    ResponderEliminar
  94. hola

    como podria, reducir el espacio q divide a los gadget y las entradas??.... ps el diseñador de plantillas de bloger, puedes reducir o aumentar el ancho de los gadgets pero siempre mantiene una proporcion dejando un espacio de separacion bien grande, por eso kiero reducir eso; aparte reducir el margen de la izkierda del gadget ya deja mas espacio en los costados del blog¬¬

    Gracias x tu ayuda

    saludos...

    ResponderEliminar
  95. agrego .......q mi blog es de 3 columnas (gadget, entradas y gadget)

    encontre algo sobre "outer-wrapper" q es para aumentar el ancho, mmm pero no lo encontre en los codigos html de mi blog¬¬.. , espero q me ayudes con mas informacion

    gracias...

    ResponderEliminar
  96. Hola yagami,

    Para disminuir el espacio que hay entre la sidebar y las entradas agrega antes de ]]></b:skin> esto:

    .main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {margin-left:-20px !important;}

    ResponderEliminar
  97. Gracias
    Potro me funciono d maravilla :)

    ResponderEliminar
  98. Hola he puesto el codigo solo para gachets y yo no lo veo. esto es lo que he puesto lo he intentado varias veces pero no hay forma de que se vea
    la plantilla es del diseñador de plantillas de blogger

    .column-right-outer .widget, .column-left-outer .widget {
    border: 1px solid #FBFB18;
    border-radius:10px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    padding:50px;
    margin: 50px 0;
    }
    .footer-inner .widget {
    border: 1px solid#FBFB18;
    border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    padding:50px;
    margin: 50px 0;
    }
    .]]>
    en este blog http://zerezas-curiosidadesvarias.blogspot.com/

    queria los borde redondeados es por la
    plantilla ? en el blog de cocina tengo otra plantilla que me funciona mejor
    http://zerezas-otrasformasdecocinar.blogspot.com/
    ZereZas

    ResponderEliminar
  99. Arribita del código que has puesto hay una llave de cierre que no está cerrada, sino la cierra no funcionará nada de lo que pongas debajo:

    .section-columns td.columns-cell {
    border-left: 1px solid transparent;
    }
    .widget {margin-top:15px;}

    ResponderEliminar
  100. Hola Potrito! espero que estes bien..
    Queria preguntarte como podría poner un fondo a los titulos de los gadgets, osea un color normal, no deseo imagen, solo que el titulo de los gadgets se vea resaltado con un fondo claro...
    Si me ayudas porfis??
    Cuidate y gracias,
    bexitos...

    ResponderEliminar
  101. Hola Antoxwoman,

    Sería igual que en esta entrada:
    http://ciudadblogger.com/2009/08/poner-imagen-en-los-titulos-de-los.html

    Sólo que en lugar de poner esto:
    background: url(URL de la imagen) left top;

    Pondrías esto:
    background: #FF00FF;

    Besos!

    ResponderEliminar
  102. Gracias Potrito beiio!! ^_^

    ResponderEliminar
  103. hola POtro no consigo enmarcar la primera columna de mi blog,
    }
    .second-links a {
    color:#666666;
    }
    .post-outer {
    border: 2px solid #94B9D1;
    border-radius:5px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    padding:15px;
    margin: 10px 0;
    }
    .column-right-outer .widget, .column-left-outer .widget {
    border: 1px solid #000;
    border-radius:0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    padding:10px;
    margin: 10px 0;
    }
    si pudieras ayudarme esta es mi direccion http://vantagehighenergy.blogspot.com/ .

    ResponderEliminar
  104. Hola pantro,

    Ese código que has puesto es para las plantillas hechas con el Diseñador de plantillas de Blogger. Tú usas una que no es original de Blogger, sin embargo quizá te sirva el código para las plantillas antiguas.

    ResponderEliminar
  105. Gracias por contestar y seguire probando con lo que me dices , un saludo! .

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

    ResponderEliminar
  107. hola potro ya estoy de vuelta, por fin lo pude poner lo que me dijiste pero veo algo raro en la sidebar izquierda donde esta bufete vila busqueda
    lo enmarca en dos recuadros y me parece raro,tiene que ser asi? y yo no tengo estilos de css, me dejaba fuera y desenmarcado la publicidad de adsense y contador de visitas de geocunter que yo creo que lo debia
    quitar porque ya tengo el de bloger y me parece mas fiable,
    en fin el desajuste de la sidebar me ha hecho ajusta el ancho del blog completo y lo puse en 1150 la barra lateral izquierda en 280 y la barra lateral derecha en 230
    con el diseñador de plantillas de blogger.
    me lo puedes ver y decirme que pasa esta en el blog----
    http://zerezas-curiosidadesvarias.blogspot.com/
    y como siempr gracias
    un saludo
    zerezas.

    ResponderEliminar
  108. Hola zerezas,

    En algunas plantillas es normal, eso depende de la estructura de cada plantilla. Quizá sea por el tipo de plantilla, su diseño, estructura, etc.

    Saludos.

    ResponderEliminar
  109. hola potro siendo asi a lo mejor me gusta mas o queda mejor enmarcando un gadjet sy y otro no se puede hacer?
    un saludo gracias
    zerezas.

    ResponderEliminar
  110. gracias hermano ya personalise un poco mas el blog gracias hermano

    ResponderEliminar
  111. Hola Potro, yo aquí de nuevo :D
    Quería preguntarte como podría enmarcar el blog. Es decir, no me refiero ponerle un borde total al blog, sino colocarle el borde al cuadro que esta dentro del marco total, haha. Sorry pero creo que ya te mareé, creo que las imágenes explicarían mejor lo que deseo. He aquí una imagen:

    http://img832.imageshack.us/img832/3449/exampleborder.png

    Como ves, deseo ponerle un marco así a lo que esta en color rojo, claro que con otro color :) pero quisiera saber el código y donde debo insertarlo. Please Potris, espero me puedas ayudar :D

    Bexotes y muchas gracias x ayudarme! :D

    ResponderEliminar
  112. Hola de nuevo ,

    De forma automática no. Tendrías que ponerle el borde de forma manual a cada gadget. Para hacerlo debes sacar el ID del gadget, luego antes de ]]></b:skin> poner esto:

    #ID {
    border:2px solid #000;
    }

    Y en donde dice ID poner el ID del gadget al que le pondrás el borde. Eso debes hacerlo para cada gadget, o bien, para no usar tanto código agrega ahí mismo todos los IDs separados por una coma.

    #ID1, #ID2, #ID3, ID4, ID5, ID6 {
    border:2px solid #000;
    }

    ResponderEliminar
  113. Por nada Posandoval The Master, saludos!

    ResponderEliminar
  114. Hola Antoxwoman,

    Gracias por el ejemplo ilustrativo :)
    Agrega antes de ]></b:skin> esto:

    .content {
    border:3px solid #000;
    }

    Con eso se deberá crear un borde al contenedor de la plantilla.
    Bexotes para ti también!

    ResponderEliminar
  115. Hola Potrito!
    Gracias por responder...
    Traté con el código pero no sale el borde del lado derecho, salen los 3 sí de arriba, abajo y de la izquierda. Probé con 2 blogs y el resultado es el mismo :3

    Puedes verlo aquí:
    http://img707.imageshack.us/img707/6363/blogdeprueba.png

    Habrá alguna solución a este pequeño problemilla?

    Gracias potris!! te devuelvo otros bexotes!! :D

    ResponderEliminar
  116. Hola Antoxwoman,

    ¿En cuál blog has puesto el código? Necesitaría verlo puesto para poder ver qué puede estar pasando :)

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

    ResponderEliminar
  118. Okis Potris!!!
    Mi blog es:
    http://www.evolucionfacebook.blogspot.com/

    La verdad es que no sé que pueda estar pasando porque no sale.

    Es más lo he probado con un blog nuevo de prueba en la que no he agregado ningún gadget, sólo una entrada para ver si resultaba, pero no, el resultado sigue siendo el mismo, el borde de la derecha nada que aparece...

    Mi plantilla es del diseñador de platillas de blogger, es la simple.

    Gracias Potro por tu pronta respuesta!!!

    Besototes..

    Antonella.

    ResponderEliminar
  119. Hola Antoxwoman,

    Pero no veo puesto ahí el código del borde :(
    Necesito verlo puesto para saber qué puede estar pasando, quizá es algo que se corrige en un dos por tres, pero tengo que verlo "en vivo" ;)

    Besos.

    ResponderEliminar
  120. Si Potrito tienes razón. Ya lo puse. Puedes verlo ahi, así lo dejo hasta esperar tu respuesta.

    http://www.evolucionfacebook.blogspot.com

    ResponderEliminar
  121. Gracias. Cambia entonces ese código que te di, por este otro:

    .content-outer {
    border:3px solid #000;
    }

    Con ese ya debe quedar, sino, me avisas ;)

    ResponderEliminar
  122. Wooow...increíble... esta vez sí resultó... genio!!! :D
    Graciassss, eres como mi padrino mágico :D eres sencillamente genial, thank u sooo muuuuchhhh, u amazing!

    Bexototototes... :D

    ResponderEliminar
  123. Siiiiiiiiii y todo gracias a tí! Gracias Potro!!! :D:D:D

    ResponderEliminar
  124. Hola, le cambié el radio y lo puse a 15px y conseguí que los bordes se me vieran redondeados, pero me gustaría que el fondo de cada entrada, gadget, footer, se viera de otro color. Como puedo añadirle un fondo' gracias de antemano

    ResponderEliminar
  125. Ahí mismo puedes agregar el atributo del color de fondo:
    background:#ccc;

    Pero eso aplica para todo el contenedor.

    ResponderEliminar
  126. gracias se ve como quería, pero el sidebar y el footer no aparece el color del fondo, incluso al hacerlo desaparece el borde que lo enmarca

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

    ResponderEliminar
  128. mira buscando buscando probé aunque con más trabajoa cambiar el fondo uno a uno buscando entre las variables y poniendo

    #HTML11{
    background: #6a7227;
    }

    cambiando el nombre de cada uno claro

    puedes ver cómo quedó http://elblogdsonia.blogspot.com

    ResponderEliminar
  129. Sí, de hecho en el comentario #113 se menciona ese método ;)

    ResponderEliminar
  130. Yo quiero enmarcar el pie de la entrada, esa caja a lo ultimo que dice el nombre de quien lo publico, los botones para compartir etc. Mejor dicho exactamente lo quiero asi como tu lo tienes que tiene los botones sociales,entradas relacionadas y el boton de donar. Porfavor ayudame! Este es mi blog http://vainasbook.blogspot.com/

    ResponderEliminar
  131. Ese es el post footer, y sólo habría que añadirle el borde:

    .post-footer {
    border:1px solid #000;
    }

    ResponderEliminar
  132. Potro mira mi blog es www.reventanime.blogspot.com intento poner el enmarcado y no puedo desde k es peusto lo de leer mas en modo resumido

    ResponderEliminar
  133. El problema es que has eliminado la llave de cierre que estaba arriba de donde lo has puesto:
    http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

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

    ResponderEliminar
  135. PERDON YA LO SOLUCIONA GRACIAS TENIAS RAZÓN UN FALLO TONTO

    ResponderEliminar
  136. oye, lo siento. ya encontré que andaba mal y logré resolverlo. cuando cambié el color del texto automáticamente cambió el color del título. Otro saludo.

    ResponderEliminar
  137. Vale, de todas formas ya te he respondido allá ;)
    Saludos.

    ResponderEliminar
  138. Hola, Potro. He enmarcado los gadgets y las entradas. El único problema es que justo encima de los gadgets de la cabecera hay unas líneas negras que antes no había. Me podrías decir cómo quitarlas? Muchas gracias. Este es mi blog http://infectadosblog.blogspot.com/

    ResponderEliminar
  139. Perdón, se me olvidaba decirte que también está la línea negra que aparece justo debajo del título del blog. Esa también me gustaría quitarla y no sé si estaban antes o aparecieron cuando enmarqué los gadgets y las entradas.

    ResponderEliminar
  140. Hola INFECTADO CERO,

    Busca en tu plantilla un código como este:
    .tabs-inner .section:first-child {

    Si lo tienes mira si debajo de eso hay una propiedad de borde, si es así elimínala, con eso desaparecerá el borde de esas áreas.
    Saludos.

    ResponderEliminar
  141. Muchísimas gracias, Potro!!!! Ha funcionado. Eres un máquina!!!

    ResponderEliminar
  142. He seguido las indicaciones pero no sé por qué no me funciona, ¿qué puede ser Potro?

    Saludos

    ResponderEliminar
    Respuestas
    1. Es porque al ponerlo has eliminado la llave de cierre de los estilos que están arriba. Lo pusiste así:
      .acercadelautor strong {
      color:#1C1C1C; /* Color del nombre del autor */
      font-weight:bold;
      font-size:13px; /* Tamaño de letra del nombre del autor */
      padding-left:5px;
      .post-outer {
      border: 1px solid #000;
      border-radius:0px;
      -moz-border-radius:0px;
      -webkit-border-radius:0px;
      padding:15px;
      margin: 20px 0;
      }


      Y debe ser así:
      .acercadelautor strong {
      color:#1C1C1C; /* Color del nombre del autor */
      font-weight:bold;
      font-size:13px; /* Tamaño de letra del nombre del autor */
      padding-left:5px;
      }
      .post-outer {
      border: 1px solid #000;
      border-radius:0px;
      -moz-border-radius:0px;
      -webkit-border-radius:0px;
      padding:15px;
      margin: 20px 0;
      }

      Saludos!

      Eliminar
  143. buenas potro
    yo no quiero enmarcarlos sino que los gadget tenga el fondo del color de mi plantilla como lo hago por que los gadget tienen es un color negro de fondo y no quiero eso sino que esten del color de la plantilla

    ResponderEliminar
    Respuestas
    1. Hola Casting Venezuela, si usas una plantilla del Diseñador de plantillas entonces desde ahí, desde el Diseñador, puedes elegir el color de fondo que tendrán los gadgets y demás elementos.
      Saludos.

      Eliminar
  144. no uso una personal potro por eso te digo por que no la encuentro como hago eso potro con una plantilla personal

    ResponderEliminar
    Respuestas
    1. ¿Cuál es el blog? Es que por más que me intento aprender los blogs de todos no puedo, son muchos lectores o.O

      Eliminar
  145. Hola Potro estoy necesitando colocarle a un texto determinado (párrafo ) de una entrada un fondo y la manera editar ese fondo (color, ancho, alto). saludos.

    ResponderEliminar
  146. Puedes mirar esta Pag. de ejemplo: http://www.visualkey.net/sami-halawa

    ResponderEliminar
  147. No se si este POST sea el más indicado "enmarcar las entradas y gadgets"

    ResponderEliminar
    Respuestas
    1. Sólo añade un DIV con los estilos que quieres. Por ejemplo:
      <div style="background:#ccc; padding:15px;">Este es un texto de ejemplo.</div>

      Ahí mismo le puedes añadir los estilos que quieras.
      Saludos.

      Eliminar
  148. Que bueno Potro!
    Ahora bien, si en vez de enmarcar los post o los gadgets, quiero enmarcar más o definir mejor el borde del blog, ¿Cómo se puede lograr?
    Fijate que en mi blog, el borde es de un ligero gris que pierde fuerza y me gustaría colocerle otro color o hacer el borde más consistente: www.mariavalverdefansclub.com

    GRACIAS CAMPEON

    ResponderEliminar
    Respuestas
    1. Hola Marçal M.,
      Debajo de .main-outer { agrega esto:
      border: 2px solid #000;

      Ese es un borde, el 2px es el ancho, y el #000 el color.
      Saludos.

      Eliminar
    2. Potro el codigo funciono perfecto pero no al añadir el estilo de ancho y alto. No se si lo estare haciendo bien me podras echarme una mano saludos.

      Eliminar
    3. Pues tendría que ver cómo lo estás haciendo, pero sólo es agregar esos estilos ahí mismo:
      style="background:#ccc; padding:15px; height:100px; width;200px;"

      Eliminar
  149. Todo perfecto Potro. Funcionando un 100% Saludos.

    ResponderEliminar
  150. Buenas Potro.
    Una pregunta; puedo hacer que solo se aplique el marco a solo algunos gadgets del sidebar?

    Gracias por toda la ayuda Potro!

    ResponderEliminar
  151. y otra cosa Potro, en IE no se ven las esquinas redondeadas de los marcos.

    Gracias!

    ResponderEliminar
    Respuestas
    1. IE no soporta los bordes redondeados, me parece que sólo la versión 9 puede interpretarlos.
      Para que se aplique a un gadget en específico agrega antes de ]]></b:skin> lo siguiente:


      #NOMBRE {
      ...aquí los estilos...
      ...aquí los estilos...
      ...aquí los estilos...
      }


      En NOMBRE iría el ID del gadget al que se lo quieres aplicar, y dentro pondrías los estilos que deseas, en este caso los del borde.
      Saludos.

      Eliminar
  152. Hola!

    He cambiado de arriba abajo mi blog gracias a ti, ya te lo he comentado por Twitter, muchas gracias :)

    Una pregunta: entiendo que puedo poner un color, o que sea transparente, con background-color:#xxxxx;

    En cambio, ¿puedo hacerlo translúcido con cierta opacidad? En otro lado he visto un código como éste:

    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity: 0.7;
    -khtml-opacity: 0.7;

    Pero no funciona dentro de .post-outer {

    ¿Existe alguna solución?

    Muchas gracias!

    Jose
    Un saludo,

    Jose

    ResponderEliminar
    Respuestas
    1. Muchas gracias Jose, por tu comentario y por el tweet de ese día :)

      Esos estilos efectivamente son de opacidad, y deberían funcionar. Ponlos de nuevo y dime en cuál blog lo has puesto, así puedo ver si es necesario aplicárselos a otra clase, o si hay un error en la colocación.

      Saludos.

      Eliminar
  153. Muchas gracias!

    El blog es:

    http://josearnedo.blogspot.com/

    Lo pongo dentro de .post-outer; si pongo
    background-color:#222222; -> no hace caso a opacity

    Y con
    background-color:#transparent -> queda transparente del todo...

    Y si quito background-color, también queda transparente del todo...

    Muchas gracias de antemano! :)

    Jose

    ResponderEliminar
    Respuestas
    1. Ahora lo tienes dentro del post-body, y no notas la opacidad porque está a casi nada. La opacidad más baja sería de 0.1
      Si lo pones debajo de .post-outer { lo verás aplicado a toda el área de la entrada, por ejemplo:

      .post-outer {
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
      filter:alpha(opacity=30);
      -moz-opacity:0.3;
      opacity: 0.3;
      -khtml-opacity: 0.3;


      Sin embargo, la opacidad afecta a todo el contendor, no sólo al fondo, así que igual los textos e imágenes de las entradas se pondrían traslúcidas.
      Así que, en esos casos, es mejor usar una imagen semi-transparente en lugar de un color sólido. Por ejemplo:

      .post-outer {
      background: url(URL de la imagen);

      De esa forma, una imagen de un color gris, semi-transparente, en formato PNG quedará como fondo de las entradas y el resto de los elementos de las entradas no se verá afectado.

      Saludos y enhorabuena por el primer lugar :)

      Eliminar
    2. Perfecto!!! Ya lo he hecho, y es exactamente lo que quería :)

      Mil gracias de nuevo, y enhorabuena a ti por tu clasificación en el concurso!!! :)

      Un abrazo,

      Jose

      Eliminar
    3. Gracias José, qué gusto que quedó justo como deseabas :)

      Eliminar
  154. Potro aca en esta pagina -> http://www.pasaencorea.com/

    Sus gadgets lo han enmarcado con un fondo verde y una franja pequeña de color verde más oscura.

    Quisiera saber como lo han hecho o algo parecido a eso.

    ResponderEliminar
    Respuestas
    1. Hola Kim Rae Soon. Ese blog no tiene enmarcados los gadgets, sólo tienen un color de fondo los títulos, que supongo es a lo que te refieres.

      Para poner los títulos de los gadgets de esa manera busca el h2 { de tu plantilla, y justo debajo agrega esto:

      margin: 10px 0 0 0;
      padding: 5px 0 5px 10px;
      background: #8fc725;
      font-size: 14px;
      font-family: Arial, Helvetica, Sans-serif;
      font-weight: bold;
      text-transform: uppercase;
      border-left: 5px solid #587e0c;
      color: #fff;
      text-shadow: 0 -1px 0 #6a9412;

      Eliminar
  155. Cordial saludo Potro,

    Que bueno poder saludarte de nuevo, y desde ya mil gracias por la ayuda que me puedas brindar. sucede que hace dias me dio por mirar que le podia hacer a mi plantilla sand dollar y pues encontre que el outer wrapper lo podia tener en un color le puse por ahora blanco, pero megustaria saber si en esa parte que tengo en blanco le puedo poner una imagen de fondo y mezclarlo tambien con algun color, me gustaria si se puede hacer me expliques como lo hago que codigo agrego en outer-wrapper de mi plantilla. Te dejare la url de mi blog http://www.angularestereo972fm.blogspot.com/ Gracias potro por compartir tus conocimientos con nosotros una saludo.

    ResponderEliminar
    Respuestas
    1. Hola Angular Estereo,

      Si ya tienes el color definido y quieres cambiarlo por una imagen, entonces cambia esto:
      background: #fff ;

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

      Con eso tendrás una imagen don fondo en esa área.
      Por cierto, vi que en tu CSS pusiste unos comentarios que no deben ir de esa forma. Mira esta entrada para que veas a qué me refiero:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  156. Hola Potro,

    Muchas gracias como siempre por tu ayuda, me quedo genial. Tambien te queria comentar que realice la labor que me encomendaste en CSS tal cual como esta en la entrada que me enviaste GRACIAS TOTALES y un saludo.

    ResponderEliminar
  157. Potro de nuevo,

    Que pena con usted, creo que olvide uno de los tropiezos más frecuentes IE se ve bien en mozilla, chrome pero en internet explorer como siempre nada luce como uno quiere, no se si depronto me puedas ayudar y mirar que otro codigo pe toca agregar para que se vea igual que en los demas exploradores te dejare la dirección para que verifiques lo super que me quedo http://www.angularestereo972fm.blogspot.com/ como siempre mil agradecimientos y disculpa tanta preguntadera.

    ResponderEliminar
    Respuestas
    1. Siento no poder ayudarte con eso pues no tengo equipos con Windows para tener acceso a IE. Hay algunas cosas que más o menos podría decirte cómo solucionar, pero tendría que saber exactamente qué no se ve bien ahí, aun así sería hablarte al tanteo pues como te digo, rara vez tengo un Windows a la mano :(

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

    ResponderEliminar
  159. Hola Potro.
    ¿Sería posible enmarcar las entradas utilizando imágenes? Es decir, poder enmarcar la entrada con, por ejemplo, un balón de fútbol que se repitiese alrededor de la entrada.
    Gracias.

    ResponderEliminar
    Respuestas
    1. Tal vez poniendo esto:
      .date-outer {
      background: url (URL de la imagen);
      padding: 30px;
      }
      .post-outer {
      background: #CB9 !important;
      }


      Aunque las entradas podrían verse de un color distinto.

      Eliminar
    2. No funciona, Potro. No te preocupes, era un antojo el que tenía. Gracias por intentarlo.
      Un saluso!

      Eliminar
  160. Muchisimas gracias Potro!
    Tenia mucho tiempo buscando la manera de enmarcar las entradas y tengo una duda que no es de este tema.

    ¿Como le puedo quitar el fondo negro transparente que tiene la plantilla Picture Window?

    De antemano gracias!

    ResponderEliminar
    Respuestas
    1. Para quitar el fondo semitransparente del contenedor busca esta parte y elimina lo que está en negrita:
      .content-outer {
      background: $(content.background);

      -moz-border-radius: $(content.border.radius);
      -webkit-border-radius: $(content.border.radius);
      -goog-ms-border-radius: $(content.border.radius);
      border-radius: $(content.border.radius);

      -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

      margin: $(content.margin) auto;
      }


      Saludos.

      Eliminar
    2. Muchas gracias Potro!

      Te felicito por tu pagina y tus tutoriales :D

      Saludos.

      Eliminar
  161. Saludos Potro, hice lo de encuadrar gadget y ¡estupendo!.Ahora me planteo que quiero dejar un gadget(un reloj)sin encuadrar,solo un gadget no todos y no sé si se puede hacer.Espero tu respuesta y te agradezco tu atención. Ana

    ResponderEliminar
    Respuestas
    1. Hola Ana, sólo localiza el ID del gadget, ya que lo tengas agrega en los estilos esto:
      #NOMBRE {
      border: 0 !important;
      border-radius:0px !important;
      }

      En donde dice NOMBRE iría el ID del gadget al que se lo quieres aplicar.
      Saludos.

      Eliminar
    2. Gracias otra vez.Voy rápido a probarlo

      Eliminar
    3. Potro ayer me desanimé,no pude encontrar ID ni lo del estilo,pero hoy todo un exito.
      Un montón de gracias. Ana

      Eliminar
    4. Qué bueno que no has desistido :)

      Eliminar
  162. Me quedó buenísimo, El Potro, pero tengo una duda... Si tienes tiempo, ¿podrías fijarte por qué se ve el Sidebar de ese manera en mi blog desde el gadget "El Desafío de Shinichi Kudo?". Como siempre, debe ser la plantilla XD

    ResponderEliminar
    Respuestas
    1. Parece que hubiera un error en tu plantilla, porque según el código fuente dentro de ese gadget tienes los demás gadgets, no me explico cómo pudo suceder o cómo es que Blogger no te ha marcado error al guardar cambios o.O?

      Eliminar
    2. Sí... Raro, ¿no? Probaré algunas cosas a ver qué pasa, pero, de todas formas, lo arregle o no, me gusta cómo quedó y lo dejaré así ^_^ Uno le agarra amor a su plantilla, así sea imperfecta XD y me gusta además cómo va quedando con los cambios que le estoy haciendo... ¡Besos desde Argentina y ya nos estaremos leyendo en otra entrada! Muchas gracias por tomarte el tiempo de fijarte en mi problemilla ^^

      Eliminar
    3. ¡Hola de nuevo! Ya descubrí cuál era el problema, éste código que había pegado en un gadget html. http://laeulalia-tublog.blogspot.com.ar/2008/04/poner-una-imagen-que-tenga-movimiento.html Ahora puse la imágen en un gadget de Imagen y el problema se solucionó... Lo curioso es que no puedo recordar por qué utilicé ese código en vez del gadget correspondiente... XP
      Una cosa importante... desde hace ya varios días que no me sale la opción de editar las entradas desde el blog (ése lapicito que suele aparecer el lado del nombre del autor), tengo que entrar el escritorio para editar las entradas. También noté que el contador de visitas cuenta la mía a pesar de estar logeada, cosa que antes no sucedía... ¿Será problema de Blogger?

      Eliminar
    4. Qué bueno que lo has resuelto :)
      Creo que a todos nos pasa que después de un tiempo nos preguntamos para qué habremos usado equis cosa.
      Lo otro que mencionas debe ser por las redirecciones de dominio según el país:
      http://ciudadblogger.com/2012/03/las-nuevas-direcciones-de-los-blogs.html

      Eliminar
  163. Excelente Potro, siempre encuentro lo que busco en tus tutoriales, ¿que haría yo sin ti??? un abrazo desde Isla Margarita, Venezuela!!!

    ResponderEliminar

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

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

 
Ir Arriba Ir Abajo
I Ciudad Blogger