Cómo hacer que la imagen de fondo del blog cubra toda la pantalla

18 de agosto de 2012 323 comentarios ,


Una constante pregunta es cómo hacer para que la imagen de fondo del blog siempre ocupe toda la pantalla sin importar la resolución del monitor. Y es que a veces ponemos una imagen de fondo según las medidas de nuestro monitor, y no consideramos que en la actualidad los monitores los hay de todas las resoluciones, muy pequeños y muy grandes. Así que si ponemos una imagen de acuerdo a nuestra pantalla habrá alguien con un monitor mayor que seguramente no verá toda la imagen o la verá repetida, y en el caso de los que usan monitores muy pequeños verán la imagen incompleta.

Aquí veremos dos soluciones a ello, una usando CSS3, y otra con jQuery. Con cualquiera de las dos haremos que la imagen de fondo de la página ocupe toda la pantalla del monitor sin importar la resolución del mismo.

CSS3
La primera opción es usando CSS3, la ventaja con este método es que no sobrecargamos el blog con scripts, usaremos únicamente la propiedad background-size que se encargará de realizar lo que queremos.
La desventaja es que esta propiedad sólo es soportada por los navegadores modernos, así que en el caso de Internet Explorer sólo se verá de la versión 9 en adelante, en los demás navegadores no deberá haber problema.
El método es muy simple, sólo tenemos que ingresar a la Edición HTML de la plantilla, localizar el background que está dentro de body { y reemplazarlo por esto:
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;

Se vería más o menos así:
body {
background: url(URL de la imagen) no-repeat center center fixed;
background-size: cover;
margin:0;
color:#000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Sólo pon la URL de la imagen y listo.

jQuery
Con este método usaremos jQuery con el plugin BackStretch, la ventaja es que funciona en todos los navegadores, incluyendo IE7 en adelante. La desventaja no es mayor si ya usas jQuery, ya que el plugin en realidad es pequeño. Para usar este método en tu blog entra en la Edición HTML y antes de </head> pega este script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
* Add a dynamically-resized background image to the page
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*/
;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);
//]]>
</script>
<script>
$.backstretch("URL de la imagen");
</script>
Pon la URL de la imagen donde se indica y listo.
Con este método la carga de la imagen del fondo se hace hasta el final, esto es para que el usuario no tenga que estar esperando a que cargue la imagen para que empiece cargar el blog, así que si en el body { ya utilizas una imagen de fondo se verá primero e instantes después se cargará la del script, por lo que si lo deseas puedes eliminar la imagen que tengas en el body y así dejar que sólo cargue la imagen del script.

Como puedes ver ambos sistemas son fáciles de aplicar, cada uno con sus pros y contras, pero el resultado es el mismo, extender la imagen de fondo para que se ajuste a la pantalla de cualquier monitor sin importar la resolución del mismo.

Recuerda que en el caso del método con jQuery, deberás verificar que no uses Scriptaculous o Mootools, de ser así tendrás que aplicar unos cambios en el script para hacerlos compatibles.
Y si ya usas jQuery recuerda tener sólo una versión, la última.


323 comentarios en:

" Cómo hacer que la imagen de fondo del blog cubra toda la pantalla "

  1. Sos un genio El Potro, Me encantan todos tus post y sos el mejor de todas las paginas que expliquen tuturiales para tu blog. Suerte y seguí así que me encanta todo lo que haces y publicas! ;)

    ResponderEliminar
  2. Muy buena entrada Potro. Ya me estaba haciendo esa pregunta. Saludos

    ResponderEliminar
  3. Sos el mejor! justo lo que quería =D

    ResponderEliminar
  4. Gracias a todos, ¡buen fin de semana!

    ResponderEliminar
  5. Hola

    una consulta ¿la imagen quedara estatica en el fondo? es decir, si bajamos por la pagina se "moverá" el contenido y no la imagen?

    Hace algún tiempo, intente colocar una imagen de fondo pero se repetía, mientras bajaba en la pagina o sólo cubría un % de la parte alta y mientras bajaba la parte inferior quedaba con el color de fondo

    gracias por tu aporte :D

    ResponderEliminar
    Respuestas
    1. Hola zux, la imagen quedará fija ya que está se redimensiona y se debe mantener así.
      Saludos.

      Eliminar
  6. Hello! tejano de California, tengo un problema que no se si lo es, cuando pongo un fondo, o cambio el fondo de color, al abrir el blog siempre aparece el color del fondo unos segundos hasta que aparece el cuerpo del blog ¿eso es normal o solo me ocurre a mi?

    Lo pregunto porque tengo 4 blogs y todos con plantillas distintas y pasa en los 4.

    Gracias y Saludos desde el viejo continente.

    ResponderEliminar
    Respuestas
    1. Hola unhidalgo, puede ser normal dependiendo de si tu fondo es una imagen, y/o de la carga del blog. Usualmente lo primero que carga son los estilos del body (a menos que antes tengas algún script u otros estilos), así que primero carga el color de fondo y después lo demás, y si el blog anda lento entonces será normal que en un pestañeo se muestre sólo eso y luego se cargue el resto.

      ¡Saludos!

      Eliminar
  7. Qué bueno Potro!!!

    ¿Serviría también para la imagen de fondo en la intro del blog???

    Saludos!!

    ResponderEliminar
  8. Gracias por el aporte amigo mío. Ya le daré utilidad ;)
    Un abrazo.-

    ResponderEliminar
  9. Muy bueno! Te pregunte esto hace unos dias en otra entrada pero me digiste que no lo sabias ¬¬ Seguro q no me entendiste=)))
    Oye Potro una pregunta, sabes como poner un Baner(Gadget) en la cabecera ?, como en esta pagina-web: css-pro.ru
    Gracias.

    ResponderEliminar
  10. Se me olbido una cosa=) cual es el codigo para insertar una imagen en un Javascript sin que me redireccione a otro sitio sino que solo sea una imagen y ya eata_??? este codigo: http://prntscr.com/e2d94 , sirve para cuando pulses en la imagen te salga otra pagina... pero yo lo que quiero es insertar una imagen y ya sta... Como lo hago? Gracias=)

    ResponderEliminar
  11. Se que soy pesao, pero necesito mucho esto=) como poner un gadget tipo un cuadro donde pueda poner mi texto?... ej: http://prntscr.com/e2fhy

    ResponderEliminar
    Respuestas
    1. Hola admin, si quieres que no tenga enlace quítale las etiquetas de los lados.
      Para lo demás mira estas entradas:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html
      http://ciudadblogger.com/2010/06/gadget-para-que-nos-enlacen.html

      Eliminar
  12. Hola , potro le coloque un boton a mi blog que dice NO HAGAS CLICK AQUI haces click sobre el y te lleva a la pagina que yo quiero pero no te la abre en una nueva pestaña lo que quisiera hacer yo es que te lleve a una nueva pestaña ! este es mi blog

    http://megustaelterror.blogspot.com/

    ResponderEliminar
  13. Otra duda :S Mira , yo quiero ponerle una radio como la de esta pagina http://disneyatodoritmo.blogspot.com.ar/ pero no se como tengo una lista de IPS de radios pero no se como poner la radio si me respondieras te lo agradeceria muchisimo.

    ResponderEliminar
  14. La de la radio ya la solucione pero ahora cambio tengo muchas preguntas :S Espero que no te moleste , vi en internet como poner otra columna pero pruebe lo que pruebe no puedo vos tenes algun link que sea mas especifico ya que no me andan los otros no entiendo :S a este blog le quisiera agregar una columna izquierda : http://megustaelterror.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola Naza Ocantos. Mira esta entrada para que veas cómo hacer que un enlace se abra en otra pestaña:
      http://ciudadblogger.com/2009/01/abrir-links-en-una-ventana-nueva.html

      Lo de la sidebar hay varios en la red, si no te funciona alguno deja un comentario en la entrada de ese blog, seguro sabrán decirte qué sucede.

      Saludos.

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

    ResponderEliminar
  16. Como pongo un gadget alado de la cabezera?

    ResponderEliminar
    Respuestas
    1. Hola Agustin, mira esta entrada, ahí verás cómo poder poner un gadget al lado de la cabecera:
      http://ciudadblogger.com/2010/08/dividir-la-cabecera-del-blog.html

      Eliminar
  17. hola potro felicitaciones por tu blog tengo una pregunta este truco para el fondo del blog funciona o hay manera de hacerlo con el truco de fondo al azar que publicaste anteriormente

    gracias y saludos desde colombia

    ResponderEliminar
    Respuestas
    1. Sí Ale, pero sólo con la opción de CSS3, tendrías que agregar en ese código, justo después de background-attachment:fixed;
      Esto:
      background-size: cover; background-repeat:no-repeat; background-position:center center;

      Eliminar
    2. gracias potro sos un maestro en esto de codecs funciona pero le puse repeat por que en explorer (como cosa rara) al alejarlo (ctrl+-)no capta mira http://musiconferencias.blogspot.com/

      gracias

      Eliminar
    3. Recuerda que esta propiedad sólo es reconocida en IE9 en adelante, las versiones anteriores no.

      Eliminar
  18. Potro, muy buena la entrada.

    Ahora, ¿Pero pueden colocarse algunas líneas de código para que aparezcan al abrirlos o eso no tiene solución?

    Saludos.

    ResponderEliminar
    Respuestas
    1. ¿Para que sea lo primero que cargue? No sé si sea posible, pero no serviría de mucho porque primero se carga el CSS y luego el script así que no habría quizá ninguna diferencia.

      Eliminar
    2. Entonces a dejar el fondo blanco como es casi todo el blog y apenas se notará la carga del blog.

      Gracias por todo.

      Eliminar
  19. Hola Potro. Mañana mi madre me va a poner publicidad AdSense en el blog pero tengo un par de preguntas:
    1- En mi cuenta de Blogger no soy mayor de edad (tengo 15 años), pero en la cuenta de AdSense, al registrarme, ¿serviría poner el nombre completo de mi madre para que no haya problemas con la edad?
    2- Estoy también preocupado por si alguien hace muchos clics un día. ¿Hay mucho riesgo de que me quiten la publicidad? ¿A ti te ha pasado alguna vez eso y has podido poner nuevamente la publicidad o no te dan acceso a ponerla de nuevo?

    ResponderEliminar
    Respuestas
    1. Si ella será la titular de la cuenta entonces todos los datos deben ser de ella.
      Si alguien hace muchos clicks podrían invalidar esos clicks y ya, no pasa nada, en otros casos podrían suspender la cuenta.

      Eliminar
  20. Hola!
    Esta solución es fantástica pero tengo una duda. En mi blog Winx Club All siempre pongo los fondos con personajes de la serie y me preguntaba si la imagen del fondo al ponerse del tamaño de la pantalla de otra persona se podrían ver los personajes deformados (ensanchados o alargados).
    Gracias!

    ResponderEliminar
    Respuestas
    1. Se redimensiona proporcionalmente. Haz la prueba en otro blog, luego cambia el tamaño de la ventana del navegador y verás cómo se comporta la imagen de fondo.

      Eliminar
  21. Hola Potro, ya sé que esta no es la entrada, pero es que no encuentro en el buscador. Quería ver una entrada que escribiste sobre la organización de los códigos de la plantilla. Me refiero a cómo escribir texto explicativo entre códigos sin que afecten a la plantilla y así saber qué es cada cosa.

    Gracias y perdona!!!

    ResponderEliminar
    Respuestas
    1. Me parece que es esta la entrada que buscas:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. Puede ser Potro, ¿no había otra???

      Gracias!!!!

      Eliminar
    3. No que yo recuerde. Pero ahí se menciona la cuestión de los comentarios en los códigos.

      Eliminar
  22. Muy buena entrada, Potro.

    Una pregunta: ¿Crees que funcione igual si utilizo la propiedad background-size: 100% 100%?

    Es que aprecio una delgada línea blanca en el margen izquierdo, pero si sustituyo la propiedad background-size:cover por la que mencioné, ese detalle desaparece.

    Entonces, me gustaría saber si de igual forma seguirá mostrándose la imagen de fondo en todas las pantallas, sin importar la resolución del monitor.

    Graciasy saludos. :D

    ResponderEliminar
    Respuestas
    1. No es igual aunque también puede cubrir la pantalla, la diferencia es que con el porcentaje estableces que tenga ese ancho y ese alto. Con el cover le indicas que se redimensione proporcionalmente hasta que se cubra toda la pantalla.

      Eliminar
  23. Y0 habia puesto

    background: #eee [url(#) repeat-x fixed top center];

    y también funciona.

    ResponderEliminar
    Respuestas
    1. Son dos cosas diferentes. Lo que esta entrada trata de resolver es cómo hacer que una imagen pueda verse a lo ancho y alto del blog sin perder su dimensión. El repeat-x, repeat-y, o simplemente repeat lo que hacen es repetir la imagen, y no es el resultado que siempre estamos buscando.

      Eliminar
    2. Ya imagino, no obstante, personalmente, nunca podré hacer uso de lo que tan bien explicas en esta entrada.

      Eliminar
  24. como puedo hacer un iframe con el elemento que contenga sea transparente

    ResponderEliminar
    Respuestas
    1. No puedes manipular el contenido dentro del iframe. El iframe lo que hace es mostrar un sitio externo en otro, pero no puedes editar o manipular nada de ese sitio externo a menos que tú seas el dueño del mismo.

      Eliminar
  25. y todo porque uno de los blogs está supercargado. Mas de 10.300 entradas tiene.

    ResponderEliminar
  26. Buenos días potro, Por favor has un Post - Tutorial para enseñar a colocar paginación en blogger!! Estaría muy bueno poder paginar nuestro blog y quitar eso de "pagina principal" y "Entrada antigua". Se verían mucho mas profesionales.

    Aquí te dejo un Link de un tutorial de paginacion, que en lo personal no entiendo nada, por que no lo explican muy bien.

    http://emiliocoboscmc.blogspot.com/2012/04/paginacion-para-blogger-mas-ligera.html

    Por favor Potro has un tutorial para Paginacion en Blogger!! bye. ;)

    ResponderEliminar
    Respuestas
    1. Lo tomaré en cuenta SD92 aunque de publicar algún sistema de paginación no sería ahora. De cualquier forma si tienes una duda con ese tutorial puedes preguntarle tus dudas a Emilio, estoy seguro que te responderá con mucho gusto :)

      Saludos!

      Eliminar
  27. Hola, Potro. Tengo un problema con mi blog (BlogDesign), al ingresar a las entradas no aparece en cuerpo del post. Ya me fijé por toda la plantilla pero no encuentro ningun error que pudo haber provocado esto. Espero que me puedas ayudar, Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Lucas, posiblemente esté faltando un código como <data:post.body/>
      Si puedes revisa la plantilla original y mira esa área (donde está ese código) y verifica que no te falte algo más. Seguramente en algún cambio algo eliminaste o usaste una condicional que no era la adecuada.
      Saludos.

      Eliminar
  28. Hola Potro como estas?. Bien pues, mi duda esta fuera de este Post... Queria hacerte una pequeña consulta. En mi blog, en la parte inferior, hay un texto que dice "cargando", nose porque razon o circustancia esta allì, si yo no puse nada, ningun gadget ni nada por el estilo... Ya busque en la plantilla y no hay nada, no entiendo porque aparece. En fin, me podrias ayudar?... Este es mi blog. http://www.ViciosaCity.blogspot.com.ar

    ResponderEliminar
    Respuestas
    1. ¿Ya has probado verlo desde otro navegador? Porque a mí no me aparece nada, quizá sea una extensión que uses en tu navegador.

      Eliminar
  29. Buenos dias y perdon por escribir aqui esta pregunta pero....: Shadowbox ha dejado de funcionar. sabes algo?
    saludos y gracias

    ResponderEliminar
    Respuestas
    1. Funciona igual que siempre Priamo. Cualquier duda sobre ese tema déjalo en la entrada de Shadowbox para no desviarnos del tema de este post ;)
      Saludos.

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

    ResponderEliminar
  31. Hola Potro!
    Muy buen tutorial!!!
    Gracias.

    Te queria preguntar, sabes de que trata esta pagina, se llama asi, punto com, es que me invitaron y quiero saber bien primero de que trata?
    Aqui el nombre de la pagina:

    flattr


    gracias.

    ResponderEliminar
    Respuestas
    1. No tengo idea, es la primera vez que sé de la existencia de ese sitio o.O

      Eliminar
  32. Una cosita mas, cuando dices tener solo una version de jQuery, significa que?
    ........

    dejo la que tengo y elimino la linea jQuery de este scrit
    o
    se la dejo a este scrit y elimino la que tenia puesta?

    o como, explicame porfis me confundi un poco ahi, jejeje.

    y cual de las dos me recomiendas en lo personal tu?

    y otra cosa:
    Debo borrar el fondo de body{
    y dejar solo el del scrit?

    Yo utiliso la plantilla de creador de blogger, la que se modifica y se sube el fondo por el editor, comprendes?
    entonces, que hago en este caso.?
    Gracias

    ResponderEliminar
    Respuestas
    1. Borrar el fondo de body{ es opcional, eso dependerá de ti, pero no es necesario.
      Lo otro es dejar sólo una, ¿cuál? la más reciente, como se indica en esa entrada :)

      Buen día.

      Eliminar
  33. Buenos días Potro esta pregunta no corresponde al tema pero no encontre en donde publicarla.

    En mi blog teleszona61.blogspot.com no puedo mostrar mas de 9 entradas, ya modifique en Configuracion Entradas y en Entradas le puse 20, 10, 15 etc y solo me muestra como maximo 9 entradas... agradezco tu ayuda al respecto.

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Abraham, mira esta entrada, ahí se explica por qué sucede:
      http://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html

      Eliminar
    2. Oh! rayos es lo que me temía, ya la había leído... pero ¿en verdad no hay nada que hacer? quiero aunque sea 10 publicaciones...
      Ni modos, muchas gracias nuevamente y seguimos aqui a la expectativa!
      Saludos

      Eliminar
    3. Pues nada más que elimines algunos gadgets, o que uses el Leer más nativo de Blogger, con ese es seguro que te aparecen más entradas.

      Eliminar
    4. Tienes razón ya aparecen mas, Potro Dios te bendiga! En verdad que tu sitio nos es de mucha ayuda!
      Gra-cias Potrooo!!

      Eliminar
  34. Hola Potro, pido disculpas shadowbox funciona perfectamente.
    saludos

    ResponderEliminar
  35. Potro te deje un mensaje y no se publico, no entiendo porque :\ . Solamente te decia que debajo de mi blog, en la parte izquierda hay una palabra que dice "Cargando"... pero no tengo ningun gadget ni nada por el estilo, ya revise la plantilla y no hay nada... No entiendo porque esta eso allì. Quisiera que me ayudaras a quitarlo porfavor, te agradeceria mucho. (Obviamente que haciendo click en mi Nombre podras entrar al Blog).

    ResponderEliminar
    Respuestas
    1. Lo que pasa es que desde hace algunos meses los comentarios se moderan, por eso no los ves inmediatamente ;)
      Ya te he respondido más arriba.
      Saludos.

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

    ResponderEliminar
    Respuestas
    1. Hola Afm, hace días te respondí esa pregunta en la entrada sobre los comentarios anidados.
      Saludos.

      Eliminar
  37. Potro una cosa fuera de esto!...
    Hay alguna forma de que mi blog http://www.muyrojo.com.ar/ tenga como url esto http://www.muyrojo.com.ar/independiente/ pero siempre ( al entrar al blog en las entradas,etc?

    ResponderEliminar
    Respuestas
    1. No Gonzalo, no podemos configurar las URLs de esa manera.

      Eliminar
  38. hola potro bueno queria preguntar algo fuera del tema es con los comentarios anidados pues lo puse segun oloblogger y me funciono perfecto pero el problema es que no se que pasa con el cometbox de facebook ya que solamente aparece cuando comentas con el caja de comentarios del blog y si no no sale nada :( si pudieras ayudarme muchas gracias por su atencion

    ResponderEliminar
    Respuestas
    1. Hola masterweb8000, mira la entrada de la caja de comentarios de Facebook, ahí dice dónde deben ponerse los códigos cuando se tienen los comentarios anidados.
      Cualquier duda sobre ese tema déjala allá.
      Saludos.

      Eliminar
  39. Gracias por tu respuesta Potro, sera eso..

    ResponderEliminar
  40. Potro necesito tu ayuda y es que no me funciona el sistema de moderacion no se porque le pongo que Si y el correo pero al poner un comentario nada... lo publica sin poner esperando aprobacion.

    Necesito ayuda, Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Afm, los comentarios tuyos no se moderan si tú eres el autor, sólo se moderan los comentarios de los demás.

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

    ResponderEliminar
    Respuestas
    1. Hola Cirprian, deja la pregunta en esa entrada que es ahí donde corresponde el tema.
      Saludos.

      Pd. Eliminé el comentario por el aviso que está al final.

      Eliminar
  42. Potro tengo una pregunta..

    Yo uso Dropbox para alojar varios scripts pero me he encontrado con blogs que usan mucho ese sistema y luego de un tiempo los scripts se caen quisiera que me recomendaras algun sitio para alojar scripts.. que sea diferente a Google Sites o Dropbox

    ResponderEliminar
    Respuestas
    1. Google Sites es bueno, el problema es que si alguien usa un dominio propio no podrá usar esos archivos. Quizá convenga que los alojes en Google Code, no es precisamente el propósito de ese servicio pero muchos suben ahí sus scripts.

      Eliminar
    2. Potro yo uso un dominio .info y Google Code si sirve en blogs con dominio propio?

      Eliminar
    3. Con Google Code no debería haber problema (o no recuerdo si lo hay), pero haz la prueba, este script está alojado ahí, mira si te funciona en tu blog:
      http://ciudadblogger.com/2009/06/reloj-de-cuenta-regresiva.html

      Eliminar
  43. Otra cosilla, hay alguna forma de sincronizar disquis con el numero de comentarios que se muestra al costade de mi blog...

    Aca un blog lo hizo no se como ..http://www.soydiablo.com.ar/2012/08/concentrados-con-regreso.htm

    El mios es muyrojo.com.ar

    ResponderEliminar
    Respuestas
    1. Sólo usé Disqus una vez y fue hace mucho tiempo. Pero hace poco leí que un usuario decía que ahí en Disqus tenían la opción, o al menos eso entendí. Quizá en algún blog donde hablen sobre ese gestor de comentarios puedan decirte mejor.

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

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

    ResponderEliminar
    Respuestas
    1. Hola FLV, podrías hacer eso usando un tooltip, mira si alguno de estos te permite hacerlo con una imagen:
      http://ciudadblogger.com/2010/07/tooltips-con-css.html
      http://ciudadblogger.com/2010/08/tooltips-con-jquery.html

      Pd. Eliminé el comentario por el aviso que está al final de la página.
      Saludos.

      Eliminar
  46. Hola potro:
    Pues yo tengo el jquery a la versión 1.7.1 lo cambio a la version 1.7.2?

    ResponderEliminar
  47. ¡Hola! He descubierto tu blog hoy y... ¡me encanta! La verdad es que es muy útil para amateurs como yo, jeje.
    Una cosita: ¿hay alguna entrada donde expliques algo más del jQuery? Es la primera vez que lo escucho y antes de llevar a cabo este tutorial quiero saber un poco. ¿Es un programa, aplicación, solo un script invisible para habilitar la escritura...?
    Espero me respondas, ¡muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Mae Taras, ¡bienvenida a Ciudad Blogger!
      jQuery es una librería de scripts que permite conseguir ciertos efectos, ¿cuáles? son muchísimos, el de esta entrada es uno de ellos pero hay casi para todo, para crear efectos deslizantes, de desvanecimiento, crear galerías, etc. Son muchas cosas las que se pueden hacer con jQuery, pero si apenas estás comenzando no te preocupes mucho por este tema aun, ya con el tiempo se podrán ir presentando dudas o problemas y ahí aprenderemos más sobre ello :)

      ¡Saludos!

      Eliminar
  48. Hola Potro. Ya tengo solicitada mi cuenta para adsense (solo que desde otro correo gmail que es también administrador de mi blog). He enlazado el correo que tenía la cuenta de Adsense (aún sin aprobar) a mi blog, y creo que ya está todo correctamente y solo he de esperar a que me validen la inscripción.
    Esta es la imagen que me aparece: http://dl.dropbox.com/u/55341396/adsense.png ¿Está correctamente o he metido la pata?

    ResponderEliminar
    Respuestas
    1. No parece haber nada mal, ahora sólo a esperar :)
      Suerte!

      Eliminar
    2. Potro, finalmente he hecho todo bien, pero me han enviado un correo diciendo que no tengo contenido suficiente. Sin embargo, tengo 227 noticias y el blog lleva un año online. ¿Qué me recomiendas que haga? Porque no tengo ni idea de por qué hay poco contenido. Es en mi blog llamado "Campamento Web", intenta mirarlo para ver si se te ocurre alguna solución...
      Gracias de antemano ;)

      Eliminar
    3. Tal vez no es por el número de entradas sino por la longitud de cada una, he revisado algunas de las que están en la portada y sí las veo muy cortas de contenido. Sería bueno que las siguientes las hagas un poco más largas, así más adelante podrías solicitar de nuevo la inscripción al programa de AdSense.
      Saludos.

      Eliminar
  49. Hola Potro, Saludos
    Quisiera saber como le hago para bulicar una foto sin que tenga el efecto de Leer Mas... Es decir que si deseo publicar una foto apareza del tamaño real en la página que yo quiera. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Opinion Diversa, tendrías que utilizar el Leer más nativo de Blogger, el problema es que no es automático, tú eliges en cuáles entradas ponerlo y dónde quieres que haga el corte del resumen. La ventaja es que te pondría la imagen en su tamaño real como deseas.

      Eliminar
  50. Hola potro:
    Quiero poner un Gadget en la que haya un contador como se puede hacer¿?

    ResponderEliminar
    Respuestas
    1. ¿Un contador de qué, de visitas? Mira la categoría "Contadores".

      Eliminar
  51. Hola Potro.
    esto era exactamente lo que necesitaba, pero tengo un gran problema, ojala puedas ayudarme, voy a estar eternamente agradecida.
    en mi blog (el arte de ser mujer) hice esto de que el fondo cubra toda la pantalla, pero no se veia completa la imagen, es decir, si cubria toda la pantalla, pero no se veia la decoracion de la parte de abajo, y no se por que se me ocurrio cambiar la plantilla, solo por experimentar, pero hice un respaldo antes. y como en ninguna me mostraban las lineas divisorias en los gadgets, volvi a poner la plantilla antigua, pero ahora le pongo fondo con esta opcion de que se vea en toda la pantalla y no me lo muestra, volvi a poner el fondo en un gadget como lo tenia antes y tampoco me lo muestra, solo se ve el fondo rosa, que es el que tengo directamente el las opciones avanzadas del blog. que estara pasando? tendre mal algun codigo de la plantilla? o es que ya no me va a permitir ninguna modificacion? cabe mencionar que antes de hacer el respaldo, borré los codigos que tienes en esta entrada (los de background)y según yo puse los que anteriormente tenia. ya me desesperé de tanto estar intentando ponerle el fondo y nada. plis ayudame!!
    upss, ya me extendi mucho, casi pongo una biblia jejeje, sorry.
    muchas muchas gracias. saluditos

    ResponderEliminar
    Respuestas
    1. Hola ARILU2, entré a tu blog pero no veo puestos ninguno de los dos métodos, necesitaría que lo pongas (aunque no funcione) para que pueda ver si es la colocación del código, la URL de la imagen, o algún otro detalle que pueda estar afectando.

      Saludos!

      Eliminar
  52. Hola El Potro, no encuentro una pagina de contacto en tu sitio Web. Mi nombre es Massimiliano y me gustaria contactarte para una propuesta de JV al que dije a mi equipo de Marketing que iba a tratar personalmente con usted.
    Podria decirme por qué medio puedo contactarlo?
    Desde ya gracias
    Saludos

    ResponderEliminar
    Respuestas
    1. Hola Massimiliano, si gustas puedes enviarme un mensaje privado desde la página de Facebook:
      facebook.ciudadblogger.com

      Saludos.

      Eliminar
  53. Hola El Crack Loko, en el foro de Blogger verás la información sobre los blogs favoritos de la semana:
    http://productforums.google.com/forum/#!category-topic/blogger-es/3R2AUUFns-w

    Saludos y suerte!

    ResponderEliminar
  54. Hola, las reacciones vienen incluidas en la configuración de la caja de correo de Disqus. Estaba registrado desde hacia más de tres años, me ha dado por instalarle en uno de los blog y ahí han aparecido junto a los comentarios las reacciones.

    Lo curioso de este correo es que puedes comentar en algunos periódicos sin necesidad de estar registrado. Eso sí, aunque cuando escribes el comentario aparece la imagen que hayas puesto en la cuenta disqus no se si los del propio medio o quien sea anula las imagen y el nombre del perfil y deja una que trae ese correo para comentar como Guest (invitado)

    ResponderEliminar
  55. Potro acabo de aplicarlo pero no se vé en la parte superior de la web, que raro, que podría ser me puedes ayudar? hechale una miradita please, saludos.

    http://rapychelas.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Es por la plantilla, agrega estos estilos:

      .body-fauxcolumns, .content-fauxcolumns {
      height: auto !important;
      }

      Eliminar
  56. Hola amigo, ¡Muchas fracias amigo potro!
    Ya envié mi Blog, ¡Y vamos aver que pasa! ¡Ojalá lo cojan como el favorito! Aunque no importa, ¡Google lo verá!
    Oye amigo potro, Comparte mi blog porfavor.
    http://www.elcrackloko.blogspot.com
    ¡Saludos amigo y muchas gracias por todo!

    ResponderEliminar
  57. hola de nuevo Potro

    mil gracias por tu ayuda, ya lo puse y por fin se ve de nuevo!!!!!! que bien se ve jejeje.

    si lo habia quitado porque como no funcionaba, pero lo tenia con el codigo en gadget. y tampoco se veia. pero lo puse de nuevo en html y por fin quedó, no se que abra pasado, porque te juro que estaba poniendo el mismo codigo, lo copiaba de tu entrada y lo pegaba y no se veia. en fin, lo bueno es que ya quedo, y modifique mi fondo para que ahora si se vea la decoracion de abajo.

    de nuevo un millon de gracias por toda tu ayuda. no sabes cuanto me ha servido lo que publicas, bueno, ya te habras dado cuenta al ver mi blog verdad jejejeje.

    espero no tener que darte mas lata, al menos no pronto. saluditos

    ResponderEliminar
  58. Aaaaaahhhhhh!!!!

    Soy un novato, he intentado que la imagen del blog cubra toda la pantalla y me he quedado sin imagen!

    Tan sólo quiero si me podrías facilitar los parámetros predeterminados que borré y que vienen en la edición de HTML después de body {.

    Mil gracias y enhorabuena por tu blog Potro.

    ResponderEliminar
    Respuestas
    1. Hola adrian, no sé cuál plantilla uses, pero sube la plantilla original a un blog de pruebas y mira cuáles son los códigos que tenías ahí.
      Saludos.

      Eliminar
  59. Me a ido genial, es lo que buscaba, ahora a ver el slider que tal, gracias.

    ResponderEliminar
  60. Hola Potro!!...disculpa es que mi bloc es privado y tengo solo unos cuantos amigos pero ahora he querido añadir alguno mas y lo escribo pero no aparece en el panel ni tampoco aparece mi lista de contactos para agregarlos desde hay...no se que puede pasar antes si podía que es lo que puede estar mal?...
    Y referente a lo que dices del fondo del bloc a mi me gustaría saber como poder hacer que ocupe todo el fondo de la entrada la imagen sin que se repita o salga dos veces..como puedo hacerlo? yo he probado haciendo la imagen mas grande pero se me repite dos veces igual...

    Bueno muchas gracias y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Yolanda, no sé porqué pueda pasar eso, pero no estaría de más que pruebes hacerlo en otro navegador. También recuerda que en los blogs privados sólo puedes tener 50 invitados.

      Para lo otro mira esta entrada:
      http://ciudadblogger.com/2009/04/entradas-con-imagen-de-fondo.html

      Ahí cambia esto:
      background="http://URL de la imagen de fondo"

      Por esto:
      style="background:url(URL de la imagen) no-repeat center center fixed; background-size: cover;"

      Eliminar
  61. Claro, qué buena idea.

    Ya solucioné ese incidente pero ahora misteriosamente algunas partes del blog se ven en azul y en morado cuando yo no lo he puesto así. He estado repasando en Personalizar - Avanzado y me dice que está todo negro, blanco y gris como yo lo quiero. Incluso he probado a volver a volverlo a marcar todo en negro, blanco y gris y persiste el colorido.

    ¿Cómo lo hago?

    http://ugotthemoneyigotthesoul.blogspot.com.es/

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo adrian, esos son los enlaces activos y visitados, aquí puedes ver cómo personalizarlos, aunque creo que desde el Diseñador de plantillas también los puedes personalizar:
      http://ciudadblogger.com/2009/04/personalizar-links.html

      Eliminar
  62. Hola disculpa tengo una duda he bajado una platilla de btemplates pero me dice que para que salgan mis entradas en la barra en donde van pasando unas entradas tengo que editar no se que cosa no se si tengas un tema de esto o puedas explicarme como hacerlo, muchas gracias espero tu respuesta.

    ResponderEliminar
  63. Perdon Potro, la pregunta que deje no era en esta Entrada, sino en esta:
    http://ciudadblogger.com/2012/08/slideshow-de-imagenes-como-fondo-del-blog.html
    Espero puedas ayudarme!

    ResponderEliminar
  64. Muchas gracias Potro!! eres muy amable probare hacerlo.

    ResponderEliminar
  65. Maestro es posible colocar un slider como fondo de blog tipo http://www.zara.com/webapp/wcs/stores/servlet/home/es/es

    y cambiar el ancho del blog completo de una plantilla prediseñada como http://fransoluciones.blogspot.com.es/
    saludos...

    ResponderEliminar
    Respuestas
    1. Posiblemente sí, aunque no con este. A ver si después me encuentro con alguno que haga las transiciones de esa manera o con otros efectos.
      Saludos.

      Eliminar
  66. Hola, Potro. Hace unos días descubrí el blog pero, navengando un poco por las entradas, pude ver que me va a ayudar a resolver varios problemas que tengo con mi blog (en proceso) por lo que te agradezco de antemano todo lo que publicás para los inexpertos como yo. Bueno, también quería hacerte una pregunta: la imagen, sea la resolución del monitor menor o mayor, ¿va a tener alguna distorción? No sé si alguien ya preguntó pero bueno...

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Pogue Suneka. No tendrá distorsión en cuanto a proporción de tamaño, pero obviamente si la imagen es muy pequeña y si se ve en un monitor muy grande entonces no se verá de tan buena calidad. Lo óptimo sería usar una imagen un poco grande para que no pierda calidad al ampliarse.
      Saludos.

      Eliminar
    2. Muchas gracias por responder. Me ayudo mucho.

      Eliminar
  67. Hey potroaludos si eres tan amable pido tu ayuda jeje intente hacer el primero paso pero
    ami no me sale asi
    body {
    background: url(URL de la imagen) no-repeat center center fixed;
    background-size: cover;
    margin:0;
    color:#000;
    font:x-small Georgia Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }
    si no que me sale diferente asi:
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .region-inner {
    min-width: 0;
    max-width: 100%;
    width: auto;
    }

    .content-outer {
    font-size: 90%;
    }

    a:link {
    text-decoration:none;
    color: $(link.color);
    }

    a:visited {
    text-decoration:none;
    color: $(link.visited.color);
    }
    como le puedo hacer? que valores cambio? x ke me sale diferen? tengo una plantilla de picture windows agradeceria mucho tu ayuda bro
    saludos y bendiciones

    ResponderEliminar
    Respuestas
    1. Hola RAS LION, es el background que está dentro del body { el que debes cambiar, es decir, cambiar esto:
      background: $(body.background);

      Por esto:
      background: url(URL de la imagen) no-repeat center center fixed;
      background-size: cover;

      Eliminar
  68. COMO PUEDO HACER PARA QUE LOS GADGETS Y LAS ENTRADAS DE MI BLOG QUEDEN CON EL FONDO NEGRO Y ATRAS DE ESE FONDO OTRO ? COMO EN ESTE: http://musiceverydayplease.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Desde el Diseñador de plantillas puedes elegir qué color de fondo debe tener la sidebar y las entradas.

      Eliminar
  69. Hola, yo tengo este problema con mi blog, y no puedo solucionar el problema del fondo, quiero sacar eso blanco!

    https://dl.dropbox.com/u/100138337/error.bmp

    Espero su respuesta y gracias!

    ResponderEliminar
    Respuestas
    1. Ese es el alto del blog, lo que sucede es que el alto no alcanza a cubrir tu imagen de fondo, por lo tanto tienes que hacer que el fondo se repita a lo alto:

      body, .body-fauxcolumn-outer {
      font: normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
      color: #000000;
      background: #ffffff url(http://1.bp.blogspot.com/-cwNO5TcbcKY/UC11llLz7kI/AAAAAAAAAEg/MoJ3A3ArirY/s0/wall.JPG) no-repeat scroll top center;
      padding: 0 0 0 0;
      }

      Tienes que cambiar ese no-repeat por repeat-y

      Eliminar
  70. Quizás parezca un poco tonta pero no entiendo lo del URL (?) no es la dirreción no ? o si, en fin, quien pueda respondanme

    ResponderEliminar
    Respuestas
    1. Hola Loane, la URL de la imagen es el link de la imagen. Mira esta entrada para que veas cómo subir la imagen y conseguir la URL:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  71. Hola! Una duda, debería subir la imágen en algún tamaño mínimo y máximo particular? Es decir, estoy trabajando con una imagen en alta resolución de unos 4000px x 3000px y tengo miedo de que sea demasiado pesada y tarde mucho en cargar...
    Gracias!

    ResponderEliminar
    Respuestas
    1. No hay una medida específica, pero yo sí consideraría no hacerla tan grande justamente para que no tarde mucho en cargar. Prueba con varias medidas para que veas qué tanto se distorsiona, de esa manera encontrarás la medida adecuada para ti.

      Eliminar
  72. hola tengo un problema...la imagen de fondo me aparece luego de los post... en la parte superior, es decir, en la cabezera no me aparece la imagen de fondo. que pudo pasar??? este es mi blog http://futbollaloma.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Es por un estilo de tu plantilla. Agrega antes de ]]></b:skin> lo siguiente:
      .body-fauxcolumn-outer .cap-top {
      background: transparent !important;
      }

      Eliminar
  73. perfecto! muchas gracias por la informacion!

    ResponderEliminar
  74. ¡Muy buenas!
    Estoy teniéndo problemas con el fondo del blog y no encuentro la solución. La cuestión es que la imagen del blog me aparece "más arriba" de lo que debería. ¿De qué puede ser?

    Dejo el enlace: http://www.lennykravitzspain.com/

    ¡Me trae de cabeza! :/

    ResponderEliminar
    Respuestas
    1. Hola, abajo del background-repeat agrega esto:
      background-position: 0px 35px;

      ¡Saludos!

      Eliminar
    2. ¡¡Muchísimas gracias!! :-D

      Eliminar
  75. Woww! me ha quedado de pegada. He usado la segunda opción y se ve guapisimo ahora el blog. La única pega que si quiero que se desplace no lo hace, pero ha quedado genial Gracias!

    ResponderEliminar
  76. Q wena... graciass Potro. Me quedo con la segunda!

    ResponderEliminar
  77. Hola Potro, se puede colocar un fondo dentro de una pagina interior del blog independiente.

    ResponderEliminar
    Respuestas
    1. No he comprendido ladyruss, ¿dónde quieres el fondo, en la entrada, o que ese fondo sólo se vea en una página en concreto?

      Eliminar
  78. Hola Potro que tal saludos ! queria hacerte una pregunta quiero usar la segunda opcion con jQuery
    pero sucede que yo tengo 2 fondos uno que se muestra en la portada y el otro se muestra en el resto del blog
    si me funcionara o es otro procedimiento ? gracias estare muy pendiente para saber si tiene solucion,



    este sreia el primero que se muestra en el resto del blog
    background-image: url(URLDEIMAGEN);



    y el segundo para que se muestra solo en la portada del blog
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    body {background:#000000 url(URLDEIMAGEN);

    background-attachment: fixed;
    background-position: bottom center;
    background-repeat: repeat-x;
    !important;}
    </style>
    </b:if>

    ResponderEliminar
    Respuestas
    1. Puedes usarlo, y para que no se ejecute en la portada (porque supongo que ese no lo quieres modificar) encierra el código del script también en una condicional, la que es para que algo se ejecute en todas partes MENOS en la portada.

      Eliminar
  79. Excelente ! no recordaba las condicionales. Tan sencillo como usar condicionales! y disculpa Potro no me explique correctamente en mi comentario num. 80 pues en realidad quiero usar este Tuto para los 2 fondos no solo para 1, y solo tenia que usar 2 condicionales uno para la portada y otro para el resto del blog- jejeje, gracias por tu respuesta. bye!

    ResponderEliminar
  80. Saludos!
    Primero de todo felicitarte, por tus artículos, que son de gran ayuda para todos los que queremos tener un bloc en condiciones.
    Hice una intro según tu articulo intro con jquery y cookies, y la verdad que muy bien, el problema es la imagen que tengo, quiero que se ajuste a toda la pantalla y no hay manera.
    Primero si pongo la imagen en el scrip del intro, en background como tu recomendaste como fondo, no se que código poner para que se ajuste, donde tendría que poner el scrip que indicas en este articulo, ya que lo he colocado y no he conseguido nada. He seguido los pasos para que no haya conflicto entre versiones de jquery, sin resultado.
    Si pongo la imagen antes de /body, como también indicas tampoco consigo ajustarla, es más aquí si me ocupa toda la pantalla no se ve el texto "entrar", supongo que queda tras la imagen.
    Espero haberme explicado.
    Te dejo la dirección de dos blogs de pruebas, el primero tengo la imagen en background del scrip intro.
    http://p4dia.blogspot.com.es/
    El segundo antes del /body con una imagen reajustada pero que no cubre la pantalla.
    http://p5di.blogspot.com.es/
    La plantilla es la simple de Bloguer.
    Gracias....

    ResponderEliminar
    Respuestas
    1. Con los intros no es igual Fauci, en los intros no tienes una imagen de fondo como CSS sino que tienes una imagen directa en HTML, ahí aunque le aplicaras estilos para que cubra la pantalla pasaría lo que mencionas, se movería el botón de entrar, porque es una imagen como elemento, no como fondo.

      Eliminar
  81. Amigo potro, por medio de tu pagina he ido optimizando mi blog, pero le he realizado tantos cambios que ahora la plantilla "no me permite cambiar la imagen de fondo" que estará pasando??? esta es mi página: http://guevaragaersteconsultoria.blogspot.com/

    ResponderEliminar
  82. Amigo Potro, por medio de tu pagina he optimizado la mía, gracias por los tips... pero tengo un problema, de tantos cambios en la plantilla HTML ahora la misma "no me permite cambiar la imagen de fondo"... no se que puede estar pasando???. este es mi blog: http://guevaragaersteconsultoria.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Parece que es un error de Blogger, ya muchos han reportado ese problema, pero aun puedes hacerlo directo en la plantilla:
      http://ciudadblogger.com/2009/02/cambiar-color-de-fondo-por-una-imagen.html

      Eliminar
  83. Hola Potro!quisiera probar con el metodo con css3,uso plantillas del diseñador podrias indicarme si este es codigo que debo reeplazar?

    /* Content
    ----------------------------------------------- */
    body {
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    }
    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola, el que debes reemplazar es el background como se especifica en la entrada, o sea este:
      background: $(body.background);

      Eliminar
  84. Me sirvio mucho... Gracias por los tutos que siempre nos traes.

    ResponderEliminar
  85. Muchas gracias!quedo perfecto con el metodo css3
    besito :D

    ResponderEliminar
  86. En mi caso quiero poner en mi sitio web una imagen de fondo que tenga la alineación centrada como le puedo hacer

    ResponderEliminar
    Respuestas
    1. Para que el fondo esté centrado agrega esta propiedad:
      background-position:center;

      Eliminar
  87. Buenas noche Potro , Gran Blog , me vas a ver a menudo¡¡¡

    Ya me has ayudado alguna vez en alguna duda pero ahora tengo algo mas de tiempo y quiero pulir un poco este hobby para mi de Blog

    No consigo quitar el largo de Mi Blog , me seria de gran ayuda Gracias de antemano.

    Te dejo mi Blog , no tiene Fin!!!!
    nenegarcia.com

    ResponderEliminar
    Respuestas
    1. Hola Nene Garcia, es por una sidebar que no está bien oculta. Después de #lsidebar-wrapper{ agrega:
      display:none;

      Eliminar
  88. Gracias Potro , Espero hacer mas visitas , es un Blog Genial¡¡

    ResponderEliminar
  89. El Potro, a ver si puedes ayudarme, quería añadir el script para que el fondo se vaya redimensionando pero al hacerlo entonces el slideshow que tengo en la home deja de funcionar y el texto para la imagen aparece por encima de la foto. ¿Sabes qué puede ser?

    http://bcnbikerteam.blogspot.com.es/

    Un saludo y muchas gracias!

    ResponderEliminar
    Respuestas
    1. Es porque usas Mootools, al final de la entrada se habla sobre ello.

      Eliminar
    2. Mil gracias El Potro, domino muy poco sobre el tema y como estoy modificando una plantilla no tenia ni idea de que estaba usando Mootools.

      He seguido la otra entrada y ya esta arreglado.

      De nuevo muchisimas gracias!

      Eliminar
  90. Buenas El Potro.
    Antes de nada, darle la enhorabuena por el pedazo de pagina que tiene, me esta ayudando muchísimo, llevo desde anoche mirándome todo lo que puedo poner.

    Pero tengo un problema con lo del fondo, por lo que me han comentado no ocupa toda la pantalla en monitores mas grandes, es decir que este "truco" no me sale.
    Espero que me puedas ayudar a resolverlo.

    Tampoco me ha salido el de cambiar el diseño de la caja de los comentarios, pero bueno...

    Aquí te dejo la dirección del blog.

    http://meanwhilerusia.blogspot.com.es/

    Un saludo y muchisimas gracia por todo

    ResponderEliminar
    Respuestas
    1. Hola, tienes dos veces la propiedad background, una de ellas está mal, elimínala:
      background: url http://i.imgur.com/4HLP9.jpg no-repeat center center fixed;

      Saludos.

      Eliminar
  91. ¿Esa que has puesto es la que debo de eliminar?

    ResponderEliminar
  92. Imagino que una de las que esta aqui, es la que debo de eliminar,¿no?

    /* Content
    ----------------------------------------------- */
    body {
    background: url http://i.imgur.com/4HLP9.jpg no-repeat center center fixed;
    background-size: cover;
    font: $(body.font);
    color: $(body.text.color);
    background: $(body.background);
    }

    html body .content-outer {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    }

    a:link {
    text-decoration: none;
    color: $(link.color);
    }

    a:visited {
    text-decoration: none;
    color: $(link.visited.color);
    }

    a:hover {
    text-decoration: underline;
    color: $(link.hover.color);
    }

    .body-fauxcolumn-outer .cap-top {
    position: absolute;
    z-index: 1;

    height: 276px;
    width: 100%;

    background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
    _background-image: none;
    }

    /* Columns
    ----------------------------------------------- */




    .-.-.-.-.-.-.-.

    He eliminado la primera, que es lo que me has puesto, y esa no es,pero no estoy seguro cual es la otra que debo de eliminar.
    un saludo y gracia.

    ResponderEliminar
    Respuestas
    1. Tienes esto:
      body {
      background: url http://i.imgur.com/4HLP9.jpg no-repeat center center fixed;
      background-size: cover;
      font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #d52a33;
      background: #ffffff none no-repeat scroll center center;
      }

      Cámbialo por esto:
      body {
      font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
      color: #d52a33;
      background: #ffffff none no-repeat scroll center center;
      background: url(http://i.imgur.com/4HLP9.jpg) no-repeat center center fixed;
      background-size: cover;
      }

      Eliminar
  93. Hola una pregunta, logre hacer todo esto lo mas bien pero ya me aburri un poco... ¿me podrias decir como hago para quitarlo? Porque intente borrando los codigos que me distes pero el fondo me queda blanco y si voy a elegir un fondo predeterminado no me deja.
    Espero tu respuesta, saludos!

    ResponderEliminar
    Respuestas
    1. Quita los códigos que pusiste, luego debajo de body { agrega esto:
      background: $(body.background);

      Después de eso podrás elegir un diseño desde el Diseñador de Blogger.

      Eliminar
  94. ola amigo tu tema esta muy bueno pero yo kisiera saber como hacer para q el fodo tambien se vea en el centro osea tmb en la entradas me dejo enteder grasias antemano

    ResponderEliminar
    Respuestas
    1. Tendrías que quitar el fondo de las entradas y/o del contenedor del blog, pero para ello habría que saber en cuál blog lo quieres hacer.

      Eliminar
  95. Hola. Tengo un problemilla. He cambiado el fondo de un blog predifino por un fondo que he hexo yo. Luego he seguido tus consejos y en mi ordenador se ve perfecto sin embargo he probado en otros ordenadores con otras pantallas y el fondon aparece, me aparece un fondo blanco. Alguno me podria ayudar?
    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Puede ser que la URL de la imagen que has puesto no sea la correcta, te recomiendaría que la subas a Picasa:
      http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

      Eliminar
  96. Hola Potro,
    primero de todo te felicito por al cantidad de conocimientos que tienes sobre este tema, realmente es bárbaro.
    Estoy intentado que mi blog tenga una imagen de fondo fija y a pantalla completa, por todos los medios. Con tu solucion CSS he logrado el mejor resultado, pero no se por qué diablos no queda óptimo, a otros usuarios parece funcionarle.
    En mi caso, lo que ocurre es que la imagen de fondo aparece enmarcada por color blanco, es decir, la imagen no llega a cubrir toda la pantalla, si bien se mantiene centrada y ocupa un gran trecho, pero el limite es practicamente al limite del campo de los widgets laterales, y tampoco llega al limite superior, Estoy deseperado, que puedo hacer?
    Gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Scott St. James, en cuál blog tienes el problema, porque en el de tu perfil no veo puestos los códigos CSS para que la imagen cubra toda la pantalla.

      Eliminar
  97. Hola Potro, el problema era el navegador.. con google chrome funciona todo perfectamente. muchas gracias!

    ResponderEliminar
  98. Hola,Me llamo María y soy nueva en esto, me paso horas y horas y no avanzo. Necesito que me ayudes para colocar un fondo que no hay manera de ajustarlo, leí el tutorial pero no me aclaro(dónde pego el código? en diseño/gadget/HTML/javascript?) No tengo ni idea...GRACIAS

    ResponderEliminar
  99. SOCORRO AYUDAMEEEE...NO HAY MANERA DE COLOCAR UN FONDO EN MI BLOG, O ES DEMASIADO GRANDE O SE REPITE!!! Hola, soy María, estoy haciendome un blog y no entiendo que son los códigos CSS. Yo sé ir a DISEÑO/GADGET/ HTML/JAVASCRIPT Y PEGAR UNA IMAGEN, pero me dá miedo hacerlo para los fondos...PORFA A VER SI ME PUEDES ECHAR UNA MANO. GRACIAS

    ResponderEliminar
    Respuestas
    1. En la entrada dice dónde hay que pegar el código MARÍA, sólo debes seguir las indicaciones al pie de la letra y con cautela.

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

    ResponderEliminar
    Respuestas
    1. Hola Junioz, tendrías que usar una plantilla de las llamadas "Responsive web design", o de las "fluid width", ambas se adaptan al tamaño del monitor del usuario.

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

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

    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