Errores comunes al poner los códigos CSS

15 de julio de 2011 130 comentarios ,
Sin importar qué tanto tiempo tengamos con los blogs nada nos exenta de cometer errores al intentar hacer un cambio en la plantilla. Así que de repente ponemos un código por aquí, otro por allá, damos Vista Previa y nada... o todo se ve igual o no se ve como debería verse. Las razones pueden ser muchas, pero hoy nos centraremos en los problemas habituales que cometemos al poner estilos CSS en la plantilla del blog.

Los estilos, cuando van antes de ]]></b:skin> debemos asegurarnos de nunca eliminar nada alrededor de donde lo pongamos.
Algo bastante (pero bastante) común, es que al ponerlo se elimina la llave de cierre del código anterior. Por ejemplo aquí:
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}


Hola, yo soy un contenedor con la clase .negro
Hola, yo soy un contenedor con la clase .azul



Ahí sin querer hemos eliminado la llave de cierre de la clase .negro, eso hará que aunque los estilos de .negro sigan funcionando, los estilos de .azul no tendrán efecto alguno.
Pero si lo pones bien, sin eliminar la llave de cierre no habrá problema alguno.
.negro {
background:#000;
color:#fff;
}
.azul {
background:#58ACFA;
color:#000;
}



Hola, yo soy un contenedor con la clase .negro
Hola, yo soy un contenedor con la clase .azul



Un simple y llano caracter puede hacer la diferencia entre que algo funcione o no, ya sea la llave de cierre, el punto y coma al final de cada declaración de estilo, el punto antes de la clase, etc.
Es por eso que siempre debemos asegurarnos de no eliminar nada al momento de poner un código.


Otro error menos común pero que también sucede es al momento de poner anotaciones o comentarios en los estilos CSS. Cuando ponemos un comentario para identificar un código debe ser de esta manera:
/* Estilos de ejemplo */
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}
Pero nunca deberá ser de esta manera:
<!-- Comentario -->
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}
O de esta otra:
// Comentario
.negro {
background:#000;
color:#fff;
.azul {
background:#58ACFA;
color:#000;
}

Esas dos últimas formas erróneas sólo se usan y son aceptables en códigos que van dentro del <body> incluso dentro del <head> pero nunca antes de ]]></b:skin>

Algunas veces te encontrarás con estilos que están encerrados entre <style type="text/css"> y </style>
En esos casos los estilos van antes de </head> o después de <head> pero no antes de
]]></b:skin> de lo contrario los estilos no podrán funcionar y se generará un espacio arriba de la plantilla e incluso se mostrarán estos caracteres: -->

Así que, si ponemos los códigos sin eliminar nada, si ponemos las anotaciones bien, y si todo lo colocamos en el lugar correcto no deberán surgir estos problemas de que las cosas no se ven como se deberían ver, al menos no referente al CSS.


130 comentarios en:

" Errores comunes al poner los códigos CSS "

  1. ;) Interesante, voy a ponerlo en marcha! Gracias potro!....

    ResponderEliminar
  2. Fijate que estas clases de errores son mas necesarias de lo que alguien creeria.

    Hace un tiempo, no me interesaba por los codigos ni las plantillas ni los gadgets, ni los efectos ni nada cibernetico, solo me interesaba por "Copiar" y "Pegar" sin darme cuenta que estaba perdiendo mucho potencial y desperdiciando una gran enseñanza de un gran maestro...

    Hoy en dia me apaciona saber que un conjunto de caragteres forman cosas tan espectaculares como una web o un blog con infinidad de cosas y "Truquitos" que los hacen mas fascinantes, hoy en dia aprendo mas de un gran maestro, del que creo que me adapte mas a la forma de enseñar por que ultimamente entro a otros tutoriales y quedo corto... Obviamente hablo del gran Potro de Ciudad Blogger...

    Gracias amigo, de verdad tu ciudad me ha hecho cambiar mucho...

    ResponderEliminar
  3. Pues aun cuando sólo sea copiar y pegar también eso hay que saber hacerlo, pero claro, que si podemos experimentar un poco y probar cosas por nosotros mismos entonces podremos hacer cosas que tal vez nunca pensamos que podríamos lograr.
    Gracias por tu amable comentario :)

    ResponderEliminar
  4. Muy buena y muy necesaria, Potro.
    La verdad es que la labor que haces no tiene precio.
    Un beso

    ResponderEliminar
  5. Potro muy util tu blo,una inquietud porque no pones emoticones en tus comentarios?

    ResponderEliminar
  6. Oye potro, si quiero cambiar el color del texto de un gadjet que tengo que añadir antes del skin?
    Probé con esto pero no funciona, HML8 es la id, no el titulo, sino la ID del gadjet:

    .HTML8 {
    text:#000000;
    }

    ResponderEliminar
  7. Muy bueno Potro para ir conociendo un poco mas los estilos y no cometer tantos herrores

    ResponderEliminar
  8. Sofía Serra Giráldez, gracias por el beso, otro para ti :)

    Juvinao, porque uso muchos códigos aun en las entradas y éstos podrían interpretarse con el emoticon, además que trato que no sea tan lento el blog o.O

    ResponderEliminar
  9. Óliver.G, así está casi bien sólo que el color no se establece con text sino con color y como es un ID entonces en lugar de punto lleva un signo de gato:

    #HTML8 {
    color:#000000;
    }

    ResponderEliminar
  10. jeje es muy util, a mi me pasaba que me olvidaba de dejar un espacio y no me lo tomaba.
    Me preguntaba si podias armar un post con todo tipo de estilos que pudieramos utilizar en cada caso diferente, como la fuente, su tamaño, una imagen, sus diferentes posiciones, los bordes redondeados, alineacion, y demas cosas que pudieramos usar.
    Si, te estoy pidiendo demasiado verdad ;)

    Saludos!!!

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

    ResponderEliminar
  12. potro te paso una noticia por si quieres publicarla.
    http://santyweb.blogspot.com/2011/07/google-eliminara-sus-marcas-blogger-y.html

    ResponderEliminar
  13. Excelente, podre corregir algunos cosillas en mis plantillas. Saludos =)

    ResponderEliminar
  14. xD Potro esto deberia de ir en la categoria avanzado haha, salu2!

    ResponderEliminar
  15. Hola Potro, disculpa la molestia, hablando de errores, no se que hice mal en esto:

    http://www.soyunblogger.com/2011/07/catorce-de-julio-dia-del-lanzamiento-de.html

    Si entras a la entrada, las imagenes tienen sombra, lo cual es lo que yo queria solo para mi imagen principal pero no debajo donde estan las etiquetas, que podria hacer para que las sombras que ves en las imagenes no sean para las etiquetas y para que se mantengan en la imagen de lion?

    gracias amigo por tu ayuda

    ResponderEliminar
  16. javi_anubis, pues un post no bastará, mas bien serán muchos posts, pero claro, más adelante hablaremos de esos temas ;)

    FREDDY, ese rumor parece que sólo era eso, rumor, parece que Blogger no cambiará el nombre.

    GuillermoVM, ojalá te haya sido útil :)

    ResponderEliminar
  17. TutoGeek, no es tan complicado, quizá yo lo hago sonar un poco difícil pero ya en la práctica es mucho muy sencillo.

    CebicheTV, no vi la sombra que mencionas :/

    ResponderEliminar
  18. Disculpa amigo, lo puse denuevo, esta alrededor del icono de la impresora debajo de la etiqueta.

    ResponderEliminar
  19. MaGoS RaDioMuSiC, a ti por pasar!

    CebicheTV, una opción es que dentro del código de la imagen de ese icono pongas esto:
    style="border: 0; -moz-box-shadow: 0; -webkit-box-shadow: 0; box-shadow: 0;"

    ResponderEliminar
  20. Hola Potro, excelente como siempre. Queria preguntarle si existe alguna forma de borrar aquellos codigos que estan dentro de la plantilla y que por alguna razon hice algunas eliminaciones y han quedado codigos que hacen pesado la apertura del blog, algun consejo, no se mucho de esto de codigos y programacion. Gracais por su consejo.

    ResponderEliminar
  21. Hola MHermon,

    Sólo es cuestión de que revises cuidadosamente qué códigos tienes que ya no usas y con mucho cuidado los elimines uno por uno. Por supuesto antes de realizar eso hay que hacer un respaldo de la plantilla por si algo saliera mal.

    Saludos!

    ResponderEliminar
  22. ¬¬ siempre los hago así

    Ya entiendo porque nunca me funcionan las cosas jeje. Exelene info y consejos Bro, sale RT.

    Un abrazo!!

    ResponderEliminar
  23. En realidad era una broma ._. solo que no puse 'haha mentira' porque estaba en el celular y daba hueva xD

    ResponderEliminar
  24. genial , que opinan de mi blog lo hice el 12 de junio de este año ,necesito su opinion para saber si es bueno y que debo mejorar.
    http://www.dragonxoft.net/

    ResponderEliminar
  25. HOla potro, tengo otra duda, en el pie de pagina de mi blog; http://laventanadewindows.blogspot.com/ , quiero hacer que el fondo gris no sea tan anchos y tan largo ni tan largo, es decir quiero quitarle pixeles por la derecha, por la izquierda y por debajo.
    A ver si puedes decirme como hacerle algo :)

    ResponderEliminar
  26. Una pregunta Potro, como se hace para poder colocar una funcion de abrir y cerrar como esta: "[+/-]"
    Saludosss... :)

    ResponderEliminar
  27. Hola Potro como estas? no creas que no estoy pendiente de todos tus movimientos, de tus angustias y desventuras... jejejeje(veo tus twit en mi celular).

    Aprovechando este tema, dime como hago para insertar un vídeo antes de las fotos que tengo en mi blog, antes de la primera entrada. me metí en edición de la plantilla y supe como eliminar esas fotos, y claro inserto un vídeo en la primera entrada y seria lo primero que se ve pero no quiero eliminar las imágenes, solo quiero el vídeo salga de primero y debajo de el esas imágenes en movimiento... dale un vistazo para que sepas de que te hablo: www.artedigitalmcy.blogspot.com
    Gracias

    ResponderEliminar
  28. Buenísimo, aparte de que está súper fácil aplicarlo.

    Saludos!

    ResponderEliminar
  29. cyberbloggero, tu situación es muy distinta bro, Katty te quita toda la concentración... ¡y cómo no!

    TutoGeek, jajaja, ok, es la pereza del fin de semana.

    alvaro, pásate por Cyber Intercambios para que presentes tu blog a los chicos del foro.

    ResponderEliminar
  30. Óliver.G, busca esta parte en tu plantilla:

    .footer-fauxborder-left {
    border-top: 1px solid $(widget.border.color);
    background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

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

    margin: 0 -$(shadow.spread);
    width:900px;
    height:90px;

    }

    Cambia lo que está en negrita por un valor como 30px hasta que se ajuste a la distancia que le quieres quitar.
    Luego agrega debajo lo que está en cursiva, igual puedes modificar esos valores por los que quieras.

    ResponderEliminar
  31. javi_anubis, depende qué quieras ocultar y expandir, en el buscador de aquí escribe 'expandir' y encontrarás algunos temas sobre ello. Si no encuentras lo que buscas dime exactamente qué necesitas.

    artedigitalmcy, ya decía yo que no era paranoia mía :P
    Puedes poner el video debajo de:
    <div id='main-wrapper'>

    Roster, nada complicado y nos puede evitar muchos dolores de cabeza.

    ResponderEliminar
  32. Hola.. me sale este error:No Se ha podido analizar Su Plantilla, PORQUE no està bien formada. Asegúrese de Que Todos Los Elementos XML en sí Han cerrado correctamente. Mensaje de error
    de XML: Nombre del atributo "allowFullScreen" asociada a un elemento de tipo "iframe" debe ser seguido por el carácter '='.

    Error 500

    ResponderEliminar
  33. Muchas gracias potro, al final cambie la linea:
    margin: 0 -$(shadow.spread);

    por esta:
    padding-left: -30px;
    padding-right: -30px;
    margin-bottom: -30px;

    conseguí reducir el tamaño del borde inferior, pero como se hace para reducir tambien el tamaño por los bordes laterales? es que con el padding no me funcionó :S

    ResponderEliminar
  34. Hola potro, queria saber si me podrias decir por favor como haces para que cuando uno busca en google ciudad blogger, aparece tu blog y debajo creo que tus entradas populares.

    ResponderEliminar
  35. oye potro como haces lo de meter un texto en un cuadro me lo puedes decir

    ResponderEliminar
  36. Hola Potro yo de nuevo xD, se puede hacer el Lazy Load, pero uno identico a el de WordPress:

    http://wordpress.org/extend/plugins/jquery-image-lazy-loading/

    utilizando esos .js y la imagen que viene, ya que el jQwery que uso cuando te desplasas las imagenes si cargan pero no repetando su dimencion y cuando carga hace que la web se haga mas larga (la barrita de desplazamiento) y es incomodo, y ese jqwery de wordpress hace los efectos bien respetando las dimenciones de las imagenes y el largo de la pagina no crece ya que es todo. Salu2!

    ResponderEliminar
  37. artedigitalmcy , olvidé decirte que hay que convertir el código a texto plano, así no te dará error.

    Óliver.G, agregando lo que te mencioné en cursiva se debe reducir el tamaño.

    Sirius, esos links son los enlaces de sitio, Google los agrega automáticamente a los sitios que considera los deben tener (según sus estándares), no hay nada que nosotros podamos hacer, sólo ellos deciden a qué sitios se los ponen y de igual forma si los eliminan.

    ResponderEliminar
  38. Pokelevel, hago lo de esta entrada, y el código lo pongo en un bloque entrecomillado.

    TutoGeek, pues no sé qué tanta diferencia haya entre el plugin de WP y el script de jQuery, quizá como lo has puesto hay un parámetro mál colocado, sería cuestión de que preguntaras en el sitio donde has tomado el LazyLoad.

    ResponderEliminar
  39. Potro, te dejé un mensaje en la zona de contacto, por algo de tu blog...

    Saludos.

    ResponderEliminar
  40. Excelente Potro, Gracias.... un cordial saludo.. la Vino tinto arriba.. jejeje

    ResponderEliminar
  41. Jajajajajajaja... tienes toda la razón Bro... y casualmente los miércoles es cuando peor me salen las cosas jajaja XD

    Un abrazo!!

    ResponderEliminar
  42. Roster, gracias, ya te he respondido el correo ;)

    artedigitalmcy, perfecto :)

    bro, y al final del miércoles es cuando menos dinero te queda en los bolsillos, pero qué se le va a hacer, así es el amor, jajaja.

    ResponderEliminar
  43. olle yo te queria preguntar algo nada que ver con esta entrada, mira mi blog http://lg-lamejor.blogspot.com/ le aparece una barra de movimiento abajo asi como la que hay a la derecha normalmente por que me aparece? D:

    ResponderEliminar
  44. Debe ser por alguna modificación que hiciste en los estilos de la plantilla o algún gadget que ocupa espacio de más.
    Puedes tratar de eliminarla poniendo antes de ]]></b:skin> esto:

    html {overflow-x:hidden}

    ResponderEliminar
  45. Muchas gracias potro me funciono perfecto !

    ResponderEliminar
  46. Gracias a ustedes por su visita :)

    ResponderEliminar
  47. gracias potro es bueno saberlo!!
    :D

    ResponderEliminar
  48. Potro por fa... mi vídeo quedo muy bien solo que me trajo otro problema, al descolgar las pestañas del menú quedan "detrás" del vídeo, por lo que no se visualizan, así que tuve que quitárselo, abra alguna solución para esto?? Gracias

    ResponderEliminar
  49. Quiero cambiarle el fondo al blog, ya se como se hace. el detalle es que me queda cortada la imagen a la mitad.. puesto que le puse uno que yo mismo diseñe, cuales son las medidas correctas, para que no se corte por la mitad... gracias

    ResponderEliminar
  50. Sí hay una solución para el video:
    http://ciudadblogger.com/2011/03/cuando-los-videos-se-sobreponen.html

    El fondo del blog, no tiene medidas específicas, por lo que si es una imagen completa entonces debes hacerla lo más grande que puedas, sólo toma en cuenta que el inconveniente de las imágenes de fondo es que, como no hay medida específica entonces si alguien tiene una resolución pequeña de monitor verá cortada cortada la imagen, y si tiene una resolución grande entonces la verá repetida.

    ResponderEliminar
  51. Mi consejo, desde la esperiencia, y guardar siempre una copia de seguirad de la plantilla ... y si aparecen errores y no sabemos de donde vienen se actualiza la plantilla y problema solucionado.

    Un abrazo para todos

    ResponderEliminar
  52. Toda la razón, de hecho por ahí tengo pendiente ese tema porque aunque siempre lo digo en los comentarios la mayoría sigue sin hacer respaldos y ya sabes lo útil que son.

    Saludos!

    ResponderEliminar
  53. Potro sabrás sobre las imagenes con estilos? así el blog demoraría menos en cargar y al compartr en facebook no te lanzaría cualquier imagen de un post

    ResponderEliminar
  54. ¿A qué te refieres con imágenes con estilos?

    ResponderEliminar
  55. Por ejemplo esta es las imagenes de vagabundia en una sola: http://4.bp.blogspot.com/_hljKDuw-cxQ/S9FEmEx0OGI/AAAAAAAAPjo/4ChPkHC2v_0/s00/simgvaga001.png

    ResponderEliminar
  56. Esos son sprites. En Facebook no sé qué tanto pueda afectar. En la carga del blog sí beneficia.
    En Oloblogger hay un tema sobre ello por si quieres saber cómo usarlas.

    ResponderEliminar
  57. Ok, iré a Oloblogger! gracias por el dato!

    ResponderEliminar
  58. tremendo! tutorial a la orden del dia, gracias.

    ResponderEliminar
  59. amigo potrazo, ando a full jejje, a ver si me ayudas sin compromiso, pongo una imagen en blogger y me aparecen unas letras s WTF? mira acá http://goo.gl/g7jrj i mi blog http://goo.gl/396y7 muchas gracias, cuando puedas, se que estas ocupado en cosas mas importantes jaja, abrazo

    ResponderEliminar
  60. La primera S es el título que le pusiste al gadget que contiene esa imagen.
    La otra S es una letra que igual se te quedó pero dentro del gadget, si revisas el gadget verás que debajo de la imagen está la otra S.

    Abrazo.

    ResponderEliminar
  61. no no... lo mio es decadente jajaj, bueno para eso están los que saben, abrazo enorme!!

    ResponderEliminar
  62. no no... lo mio es decadente jajaj, bueno para eso están los que saben, abrazo enorme!!

    ResponderEliminar
  63. hola potro tengo una consulta como le pongo bordes redondo a todas las imagenes de mi pagina http://www.razhiel9004.com/
    es que he querido implementarlo en esta y no me da resultado gracias

    ResponderEliminar
  64. Hola razhiel9004,

    Para que las imágenes de las entradas tengan los bordes redondeados agrega antes de ]]></b:skin> esto:

    .post img {
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    }

    ResponderEliminar
    Respuestas
    1. Disculpa, ¿cómo se hace para que las imágenes tengan bordes redondos?

      Para que las imágenes de las entradas tengan los bordes redondeados agrega antes de ]]> esto:

      .post img {
      -webkit-border-radius: 18px;
      -moz-border-radius: 18px;
      border-radius: 18px;
      }

      Ese código ¿dónde lo coloco? (Por favor, una respuesta más que detallada, soy nuevo en esto)

      Muchas Gracias de antemano!

      Eliminar
    2. Hola Pato, mira esta entrada:
      http://ciudadblogger.com/2012/02/efectos-de-bordes-redondeados-en-las.html

      Eliminar
  65. grax potro lastima q no funciona en mi plantilla saludos

    ResponderEliminar
  66. Uno de los tantos problemas de usar una plantilla de Aristeer...

    ResponderEliminar
  67. si estoy pensando seriamente en cambiarla pero ya sera el proximo año saludos y grax por la respuesta hay te va mi agradecimiento

    ResponderEliminar
  68. hola potro un saludo otra vez en este tema he tomado en serio lo de cambiar mi plantila como le pongo a ese codigo q me diste color y que quede con el radio de ese color saludos

    ResponderEliminar
  69. De la misma manera como se explica en el comentario #68 ;)

    ResponderEliminar
  70. bueno ayer estaba un poco mal XD mira la pregunta es la sgte como hagao para ponerle a ese codigo color alrededor de la imagen osea que el radio de diha imagen quede rodeada con una linea o borde del color que uno quiera saludos
    .post img {
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    border-radius: 18px;
    }

    ResponderEliminar
  71. Aplica un borde. Ahí ya tienes los bordes redondeados, sólo haría falta agregar el borde y el color:
    border:5px solid #FF00FF;

    ResponderEliminar
  72. Potro porque en algunos, no en todos, los enlaces de una lista desplegable salen con otro color. pe. tengo un enlace con color verde (incorrecto deberia de ser blanco) y el resto de enlaces con color blanco (lo correcto)Gracias

    ResponderEliminar
  73. Hola Priamo,

    Porque seguro tienes configurado para que los enlaces visitados tengan un color distinto a los enlaces en su estado normal.
    Por ejemplo, es posible que tengas asignado el color blanco para tus enlaces, pero igual tienes asignado que los enlaces visitados sean color verde, y si ya has hecho click en ese enlace antes entonces por eso aparece en color verde.

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

    ResponderEliminar
  75. Poro me confundi un poco explicando.


    Lo que busco es esto:

    en la home las entradas resumidas con 16 px ... yyy
    en las entradas individuales las entradas con 13 px... ahora creo que si me eplique bien xD

    ResponderEliminar
  76. se borro mi primer comentario lo explico denuevo:

    Holas potro hace un tiempo hice esta consulta en otro lado pero no pude hacerlo bien mire:


    http://saccperuano.blogspot.com/

    Me gustaria que en la home la letra tenga 16 px y en las entradas individuales 13 px , ahora yo se que eso es css con estilo pero no se muy bien como hacerlo y aparte la template es una wordpresera...


    saludos de antemano y feliz navidad que ya falta poco :P !!

    ResponderEliminar
  77. Busca en tu plantilla un código como este y añade lo que está en negrita:
    <div expr:id='&quot;summary&quot; + data:post.id' style='font-size:13px;' ><data:post.body/></div>

    Feliz Navidad!

    ResponderEliminar
  78. Buenas.

    Veo que entiendes de los problemas esos. Creo que a mi me pasa algo asi. Salen unos fondos negros detras de algunas fotos y - o de la plantilla. Salio de un dia para otro.

    Podias mirarmelo o alguien sabe como solucionarlo o donde puedo encontrar la solucion?

    www.viajeimserso.com
    www.monologosgalicia.com

    Pasa en los dos blogs con esas plantillas por que en los demas no pasa. Pablo

    Muchas Gracias

    ResponderEliminar
    Respuestas
    1. Hola Sr Dacosta, he entrado en ambos blogs pero no veo dichos fondos, sin embargo creo saber a qué te refieres.
      Cuando las imágenes alojadas en Piacasa son eliminadas o se cambian los permisos del álbum, aparecen unas imágenes negras con un signo de admiración o un guión.
      Si esos son los fondos que aparecían entonces esas pueden ser las causas.

      Saludos.

      Eliminar
  79. Hola potro
    tengo un problema en mi blog sobre el css,yo utiliso el firefox pero al momento de ver mi blog en otra computaadora que tiene el Internet Explorer todo se desacomoda, he leido que es por una imncompativilidad con el css, o algo asi, y quiero solucionar eso, e visto muchas soluciones pero la verdad no entiendo mucho
    podrias ayudarme???
    MI BLOG: http://transformenelpapel.blogspot.com/
    esperare tu respuesta...

    ResponderEliminar
    Respuestas
    1. Pues ahora mismo no tengo un equipo con Windows a la mano así que no puedo ver cómo se ve en Internet Explorer. Pero siempre que hagas un cambio, cualquiera que sea, verifica que se vea bien en todos los navegadores, así te será más fácil identificar los problemas, porque a veces un elemento es el que puede desacomodar todo lo demás.

      Eliminar
  80. Lo dejo aquí por que no se donde más ponerlo y creo que quizás a alguien le puede servir esto también.

    Llevaba semanas con el problema de que cuando quería compartir una entrada a facebook (ya fuera por medio de los botones de blogger o de los de addthis o incluso copiando y pegando el vínculo mediante cualquier navegador) en vez de aparecerme el resumen de mi entrada, me salía una parte de la plantilla. Si alguien más tiene este problema pongan atención por que creo que le atiné a la solución sin querer.

    Buscando y buscando llegué a esta entrada y me di cuenta que también tenía esa flechita en la parte de arriba del blog -->

    Asi que me propuse quitarla ya que no encontraba solución a lo otro de momento. Resulta, que cuando organicé mis estilos para que no saliera esa flecha, también revisé lo otro (ya por manía) y resulta que si se solucionó el problema de facebook!.

    Si alguien más tiene ese problema, revisen que los estilos con estén después de . Yo tenía unos estilos dentro de esa sección y cuando los quité aleluya! ya se comparte mi entrada con resumen y todo!

    Gracias Potro!

    ResponderEliminar
    Respuestas
    1. los estilos que dicen < style.. css > deben estar después de < /b:skin > perdon no me deja poner códigos... esa fue la solución para mi, sigan los pasos que se usan para quitar las flechas y se quita tambien el problema de facebook.

      Eliminar
    2. En efecto bellalice wayland, cuando los estilos están encerrados entre STYLE se deben poner antes de </head> tal como se menciona en la entrada :)

      Eliminar
  81. Hola EL Potro, estaba haciendo varias cosas a la vez relacionadas con lo de ocultar gadgets en distintas partes del blog y he visto que ha aprecido arriba del blog en una esquina un trozo de plantilla. He estado buscando pero no se a que se debe. Tu podrías saberlo?
    El blog: http://grupoblogin2.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Josep-Pepe, según el navegador esos caracteres los tienes debajo de una condicional que pusiste debajo del BODY, revisa por ahí, quizá por ahí están.

      Eliminar
  82. Hola El Potro, estoy armando un blog, y di con esta magnifica página-blog que me esta siendo de gran ayuda.

    Por cierto, he logrado colocar el "fanbox de facebook flotante", pero al ingresar el tercer código, en el que tengo que colocar la página de facebook no se que sucede que no la reconoce, arroja un error : "Could not retrieve the specified page. Please verify correct href was passed in."

    Lo que coloco es "http://www.facebook.com/pages/The-Home-Drink-La-casa-del-trago/272230859491930".

    Por favor dime que es lo que estoy haciendo mal.

    http://ciudadblogger.com/2011/08/el-fanbox-de-facebook-flotante-y-con.html

    ResponderEliminar
    Respuestas
    1. Hola Pato, las preguntas de cada tema se deben hacer en la entrada correspondiente para no desviarnos y dispersarnos.
      Mira en esa entrada creo el comentario #23, ahí verás las indicaciones.

      Saludos.

      Eliminar
  83. Hola de nuevo Potro,

    Aquí sigo aprendiendo con mi plantilla jeje

    Mira he encontrado un código dentro de la plantilla, que no lo relaciono con nada. No sé si será publicidad del autor o algo que sobra...no sé.
    Si no te importa decirme tu opinión. GRACIAS!!!

    Aquí está:

    ]]></b:skin>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'/>
    <script src='http://static.bloggerninja.com/asset/blogger-templates/the-framework/js/superfish.js' type='text/javascript'/>
    <script src='http://themes.affect.lt/bodega/wp-content/themes/bodega/js/jquery.nivo.slider.pack.js?ver=3.2.1' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[

    $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'fade',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 5000,
    pauseOnHover: 1,
    manualAdvance: 0,
    captionOpacity: 0.67,
    directionNav: false,
    controlNav: true
    });
    });

    $(document).ready(function() {
    // Superfish
    $('ul.sf-menu').superfish({
    delay: 150,
    animation: {opacity:'show', height:'show'},
    speed: 'fast',
    autoArrows: true,
    dropShadows: false
    });
    var $image = $('.post-body').find('img');

    $image.css({'opacity':'0.7'});

    $image.hover(function() {
    $(this).animate({
    opacity: 1,
    }, 600);
    }, function() {
    $(this).animate({
    opacity: 0.7,
    }, 600);
    });
    });

    //]]>
    </script>

    ABRAZOS!!!!

    ResponderEliminar
  84. Perdona,...y noto que me tarda mucho en cargar el blog. Me aparece:
    conectando a static.bloggerninja.com (???)

    gracias

    ResponderEliminar
    Respuestas
    1. Pues ahí en esos scripts tienes el jQuery, el Superfish que me parece que se usa en menús, y el NivoSlider, un slider de imágenes.

      La dirección esa no sé, debe ser de algún gadget que tienes.

      Eliminar
  85. Fíjate arriba del código en el segundo script, aparece lo de static.bloggerninja. ¿Será que ese archivo "js" está alojado ahí?? ¿¿¿Lo puedo quitar o cambiar de servidor (dropbox??) ???

    Ya me dirás majo!!!

    ResponderEliminar
    Respuestas
    1. Pues entonces es eso, que está alojado en ese sitio, si quieres puedes descargarlo y alojarlo en tu hosting.

      Eliminar
  86. Ok. Gracias majo
    Entonces a ver: He copiado el código de superfish que he sacado de google, y lo he pegado en un archivo de texto, al cual le he llamado superfish y le he puesto la extensión "js".
    Lo acabo de alojar en mi public de dropbox. Y lo que voy a hacer ahora, (una vez que me confirmes que estoy haciendo todo bien jeje) es cambiar la url de superfish en la plantilla por la de dropbox.

    ¿¿Sería correcto???
    ¿¿¿Puedo considerar a dropbox como mi hosting???

    ABRAZOS!!!

    ResponderEliminar
  87. Ok. Gracias majo
    Entonces a ver: He copiado el código de superfish que he sacado de google, y lo he pegado en un archivo de texto, al cual le he llamado superfish y le he puesto la extensión "js".
    Lo acabo de alojar en mi public de dropbox. Y lo que voy a hacer ahora, (una vez que me confirmes que estoy haciendo todo bien jeje) es cambiar la url de superfish en la plantilla por la de dropbox.

    ¿¿Sería correcto???
    ¿¿¿Puedo considerar a dropbox como mi hosting???

    ABRAZOS!!!

    ResponderEliminar
  88. y otra duda, ¿taradrá más en cargar el blog si el archivo ese está alojado en dropbox???

    Gracias y perdona

    ResponderEliminar
    Respuestas
    1. Sí, sí, ese procedimiento es el que se debe hacer :)
      Aun así recuerda siempre probar todo en un blog de pruebas, así puedes hacer las pruebas tú mismo y ver si todo anda bien.

      La carga estará bien, no se recomienda alojarlos ahí cuando se tienen miles de visitas, pero si es sólo para un grupo pequeño de lectores no importa.

      Eliminar
  89. Gracias Potro!!!

    miles de visitas no jajajajajajaja

    Son unas 80-100 visitas día +/- (además es privado de momento....)

    Y ya por curiosidad, ¿dónde lo podría alojar gratuitamente si fuese necesario porque me dejan dejarlo público ;) ???

    Mil gracias Potro!!!!

    ResponderEliminar
  90. Por cierto, he probado a poner # en vez del archivo "js" en un blog de pruebas, y aparentemente sigue funcioando todo bien....(??????)

    el menu desplegable, que es el que pensaba yo que usaba el superfish, FUNCIONA sin el archivo!!!! Nu sé pa qué será??

    (Todo esto es más curiosidad que otra cosa...gracias por tu tiempo y perdona)

    Abrazos!!!

    ResponderEliminar
    Respuestas
    1. Pues quizá ni siquiera hace falta que lo pongas. Si todo está funcionando bien entonces debió ser de otro elemento que ya quitaste. Yo diría que ya no lo pongas si todo anda bien. Pero eso ya es elección tuya.

      Eliminar
  91. Pues gracias por todo!!!!

    Creo que ya he terminaU jeje

    Abrazos!!!

    ResponderEliminar
  92. Hola Potroooo,

    en le comentario 88 te exponía mi trocito de plantilla con esos códigos de scripts. En el blog de pruebas los he quitado, y sigue todo igual . me refiero al superfish y al slider ese ;)

    Claro, yo he borrado TODO el código del coment 88, (excepto b:skin claro). He hecho bien???

    Y otra cosa, el código del jquery, ahí sirve para todo loo que use jquery?? o hay que ponerlo delante de cada script que lo necesite???

    GRACIAS MAJO!!!!

    ResponderEliminar
    Respuestas
    1. Sólo con ese, si ya tienes ese script no hace falta ponerlo más veces.
      Saludos!

      Eliminar
  93. gracias, y he hecho bien borrando todo ese código???? (o me estoy fastidiando algun trozo de la plantilla?? jeje)

    Gracias again

    ResponderEliminar
    Respuestas
    1. Si todo se ve bien no debe haber problema, yo no puedo decirte qué si y qué no porque no sé de qué sean exactamente, así que todo está en si la plantilla funciona bien o no.

      Eliminar
  94. Hola de nuevoooooooo,

    la primera forma que dices ( /* Estilos de ejemplo */ ), ¿funciona en cualquier sitio de la plantilla? Me refiero a que se pueda poner donde sea sin afectar a la plantilla.

    Gracias majo

    ResponderEliminar
    Respuestas
    1. Por supuesto, todo lo que se explica en esta entrada aplica para cualquier plantilla, ahí sí no tiene nada que ver si es original de Blogger o no. Las reglas siempre serán las mismas en este caso.

      Eliminar
  95. Entiendo entonces que puedo poner aclaraciones en cualquier parte de mi plantilla utilizando ese código.

    MIL GRACIAS POTRO!!!

    ResponderEliminar
    Respuestas
    1. En cualquier parte sí, siempre y cuando uses la adecuada.

      Eliminar
  96. la adecuada??? Pero la adecuada no es encerrar el texto que quieras entre /*....*/ ????

    Siento ser tan pesaU

    Gracias!!!!

    ResponderEliminar
    Respuestas
    1. Me refiero a que si la usarás SÓLO para los estilos entonces sí, la adecuada es esa:
      /* Estilos de ejemplo */

      Pero si lo usarás dentro del <body> o del <head> entonces la adecuada es esta:
      <!-- Comentario -->

      Eliminar
  97. aaaaaaaaaaahh AHORA SÍ

    GRACIAAAAAAAAAAS!!!!!

    ResponderEliminar
  98. Coo siempre,,,Muchas gracias Potro!!

    ResponderEliminar
  99. Jejej Gracias Potro era precisamente lo que tu viste, gracias (Y)

    ResponderEliminar
  100. Cometí un error al intentar poner un CCS, quise asociar Tumblr con el Blog e intetaba poner el ícono de Tumblr en él. Pero de seguro cometí un error y ahora donde se suponía que iba a ir el ícono sale el links de mi Tumblr, ¿cómo podría eliminar el CCS ese? o mejor dicho, ¿cómo podría eliminar mi el links de mi Tumblr en el Blog?

    ResponderEliminar
    Respuestas
    1. No sé qué cambios con precisión hayas hecho Luis, lo que hayas agregado quítalo, así te darás una idea por dónde está el error.

      Eliminar
  101. Yo quisiera saber las etiquetas de las que se compone un blog de blogger para poder diseñar un buen blog.

    ResponderEliminar
  102. Potro agregue el código tal cual lo pusiste en mi pagina de blogger y no sale el efecto redondeado, en que estoy fallando. He leido tu articulo de errores frecuentes html, pero el código lo copie tal cual lo pusiste en esta página, funciona todo excepto que no tiene el efecto redondeado.

    www.programarexcel.blogspot.com

    ResponderEliminar
    Respuestas
    1. Redondeado está, quizás uses Internet Explorer, ese navegador no reconoce los estilos modernos.

      Eliminar
  103. Hola Potro,

    Desde hace unos días cuando intento entrar algún código css en mi blog,este no me cambia nada. Estoy realizando el diseño yo con la ayuda de una chica que hace cursos y ella también lo ha intentado y me ha dicho que mi css no funciona. ¿Cómo puedo arreglarlo?, hasta ahora me iba todo bien.
    Incluso he hecho una limpieza de caché y cookies pero sigue igual, ¿puedes ayudarme, necesito acabar de diseñarlo?

    Muchas gracias,

    Imma

    ResponderEliminar
    Respuestas
    1. Hola Imma, habría que ver en cuál blog tienes el problema, quizás haya por ahí algún código que esté mal puesto y que esté afectando el resto de los estilos.

      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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger