Múltiples fondos (background) con CSS

12 de octubre de 2014 97 comentarios ,

Quizá en algún momento quieras usar dos imágenes de fondo en un elemento HTML, o en la plantilla de tu blog, como por ejemplo, para poner una imagen hasta arriba y otra imagen distinta abajo, en el footer.
Lo más recurrente es crear dos o más contenedores y a cada uno ponerle un fondo. Pero no es necesario porque podemos utilizar dos o más imágenes distintas en un mismo contenedor empleando la misma propiedad background que usamos de toda la vida.

En realidad no es nada de otro mundo, se trata de utilizar la propiedad background-image y ahí agregar las URLs de las imágenes, separadas por una coma. Por ejemplo, si quisiéramos añadir dos imágenes al fondo del blog sería algo así:

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
}

Y para cambiar su posición usamos background-position, de igual manera estableceremos la propiedad para la primera imagen, luego ponemos una coma, y después ponemos la otra posición.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
}

Ahí hemos dicho que la primera imagen se acomodará en el lado superior izquierdo, y la segunda en el lado inferior derecho.
También podemos especificar si se repetirán las imágenes o no.

body {
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Si también queremos añadir un color de fondo podemos hacerlo usando background-color.

body {
background-color: #ccc;
background-image: url(URL de la imagen UNO), url(URL de la imagen DOS);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
}

Puedes ver un ejemplo con el DIV que está a continuación, parece una sola imagen pero la realidad es que usamos un color de fondo, luego una imagen arriba, y otra imagen abajo.


Múltiples Fondos con CSS


Este es el código completo que he usado para el ejemplo anterior.

CSS
#doblefondo {
background-color: #f2f2f2;
background-image: url(https://lh4.googleusercontent.com/-P-uKwe2FDGU/VDnHT21jkoI/AAAAAAAALkI/i3gzlB0Z5Hg/s450/fondo1.png), url(https://lh6.googleusercontent.com/-7cX2R1ojPR8/VDnLWzxlAMI/AAAAAAAALkY/FYC-_SP-P-w/s450/fondo2.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
width: 450px;
height: 390px;
position: relative;
margin: 0 auto;
}
#doblefondo h2 {
position: absolute;
top:40%;
left: 20%;
color: #fc5669;
}

HTML
<div id="doblefondo">
<h2>Múltiples Fondos con CSS</h2>
</div>

Pero el número de imágenes no es una limitante ya que podemos usar tres o más y darle a cada una de ellas una propiedad distinta. Como en el siguiente DIV de ejemplo, añadimos tres imágenes de fondo, cada una tiene una posición diferente, y la tercera se repetirá horizontalmente.




Este es el código completo.

CSS
#doblefondo {
background-color: #C5E0DC;
background-image: url(https://lh6.googleusercontent.com/-qr82X3dc3Kw/VDrX1eJ-haI/AAAAAAAALk4/sQXZl3tB0R0/s116/fondo1.jpg), url(https://lh6.googleusercontent.com/-ldf6AG6_UkU/VDrX1XV6-yI/AAAAAAAALk0/0qQoXoEQT2I/s116/fondo2.jpg), url(https://lh3.googleusercontent.com/-uV3D22K2WHw/VDrX1SdnIII/AAAAAAAALks/OevEuSmNGUk/s116/fondo3.jpg);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, center center, left bottom;
width: 349px;
height: 300px;
position: relative;
margin: 0 auto;
}

HTML
<div id="doblefondo">
</div>

Como puedes ver, poner más de una imagen de fondo en la plantilla del blog o un contenedor es de lo más sencillo. Recuerda siempre separar con una coma las propiedades e imágenes, excepto la última, esa no lleva coma, sólo punto y coma.
En el caso de Internet Explorer funciona de la versión 9 en adelante así que prácticamente todos lo verán ya que por suerte pocos son los que usan versiones anteriores.


97 comentarios en:

" Múltiples fondos (background) con CSS "

  1. Qué genial Potro, ésto si que hacía tiempo que lo buscaba. Probaré, muchas gracias

    ResponderEliminar
    Respuestas
    1. Ay, y enlazado con ésto, he visto qu muchos blogs tienen un borde alrededor del contenedor principal, no el típico borde solid, double etc, si no una imagen a modo de cenefa, y de fondo de blog otra imagen distinta. Se podrá hacer algo con estos códigos que nos traes hoy, o es otra cosa distinta?

      Eliminar
    2. Es algo distinto, muy posiblemente lo que has visto es la propiedad border-image, una propiedad del CSS3 que poco se usa, quizá porque en el caso de IE sólo es compatible desde la versión 11, o sea, la última al día de hoy.
      En w3schools puedes ver un ejemplo de ese tipo de bordes.

      Eliminar
  2. Puede que algún día lo necesite ^^

    Potro tengo un problema, ojalá puedas ayudarme, mi problema es aunque tenga activado el lightbox de blogger no me funciona, es una plantilla personalizada, este es el blog: http://runalol.blogspot.com.es
    Un saludo y gracias

    ResponderEliminar
    Respuestas
    1. Hola Vhila, en tu plantilla cambia esto:
      <div class='pagepost'>

      Por esto:
      <div class='pagepost post-body'>

      Con ese pequeño cambio deberá funcionar el Lightbox de Blogger en tu plantilla.

      Eliminar
    2. Muchisimas gracias, como siempre ayudandonos ^^

      Eliminar
  3. muy buen truco potro una vez mas sorprendiendo. . . aunque se que esta entrada no se presta para este comentario pero quisiera preguntarte : como lograr un carrusel con post con miniaturas. pero en vez que aparezcan los post populares en este uno elija que post mostrar asignando las URLS aqui una imagen -- http://1.bp.blogspot.com/-yWRJ6naChFg/VDyj0ZwEqjI/AAAAAAAAAok/JZmPLem2rn0/s1600/sliderpost.JPG -- talvez aya un post que me puedas recomendar. desde ya mil gracias

    ResponderEliminar
    Respuestas
    1. Te lo debo Emanuel, las dos únicas entradas que tengo sobre carruseles de imágenes son poco atractivas, pero seguro en la red encontrarás más y mejores opciones sobre carruseles de imágenes.

      Eliminar
  4. Potro, nuevamente necesito tu ayuda... :( sabrias como hacer que las imagenes de este blog quedaran todas del mismo tamaño pero solo en la pagina principal? y tambien me gustaria sacar todo eso que esta al final del blog (About the Soonex, get in touch, etc). Y hacer que el menu de navegacion (que se ve al lado superior derecho de los thumbnails en la entrada principal) se vea al final del blog. Ah este es el blog http://mislibrosenlanube.blogspot.com// la verdad es que he tratado de todo para hacer esos cambios, pero no me sale >< ... y no soy tan experimentada en html, si no fuera por tus tutoriales (son unos excelentes salvavidas para mis blogs)... Espero puedas ayudarme... Muchas Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, el tamaño de las imágenes depende del tamaño de la imagen que agregues a tus entradas, esta por ejemplo es más pequeña que las demás:
      https://d.gr-assets.com/books/1324338470l/13264931.jpg

      Para eliminar lo que deseas deberás quitar de tu plantilla los gadgets HTML42, HTML46, y HTML47

      Para los enlaces de navegación, debes añadir debajo de #blog-pager { esto:
      clear: both;

      Pd. Elimino el comentario por el aviso que está aquí arriba del formulario de comentarios.
      Saludos.

      Eliminar
  5. Hola, tengo un proble con mi blog. Y es que al entrar en pestaña Diseño me sale error
    "Error al interpretar la plantilla del blog

    b:include has no 'name' attribute"

    ResponderEliminar
    Respuestas
    1. Hola Igor, si has realizado un cambio en la plantilla recientemente instala el respaldo de tu plantilla, sino tienes uno me temo que tendrás que instalar la plantilla de nuevo ya que es difícil saber cuál de todos los B:INCLUDE de la plantilla está incompleto. Considera que instalar nuevamente la plantilla hará que pierdas todos los cambios que hayas hecho en la misma.

      Eliminar
  6. Qué interesante entrada amigo, quedaría muy bien... Necesito ayuda en algo, ¿cómo hacer que un gadget se convierta en responsive? Pues quiero que un gadget "HTML/Javascript" se pueda poner tanto arriba como abajo del blog, pero que este ocupe todo el ancho de la pantalla, porque quiero agregar una imagen tipo cabecera pero que se adapte a toda la pantalla. Te agradezco de antemano por tu respuesta.

    ResponderEliminar
    Respuestas
    1. Hola Dante, si tu plantilla ya es responsive no creo que haga falta hacer nada más, excepto que a la imagen tendrías que aplicarle algún código para que ocupe toda la pantalla.

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

    ResponderEliminar
    Respuestas
    1. Hola Mirai Yp, entré a tu blog pero parece que ya lo has resuelto pues he podido ver los links de navegación sin problema.

      Elimino el comentario por el aviso que está aquí en el formulario.
      Saludos.

      Eliminar
  8. Buenas noches, Potro, no sabia donde colocar este msj que pudieses responderme, ya que el post era muy viejo y quise hacerlo en el reciente que publicas debido a que asi pense que podrias responder.

    tenia un blogger antiguamente lo elimine debido a una mala experiencia en la configuracion. este es mi nuevo blogger:http://psicologo-danielgalindez.blogspot.com/# estoy añadiendo apenas los detalles, pero tengo un detalle, coloque el menu desplegable para luego modificarlo, pero a su vez quise añadir unas flechas de subir y bajar, pero creo que esta ultima creo un conflicto porque ahora el menu no me baja, anteriormente en mi blogger antiguo lo habia solucionado por tu consejo, pero no me recuerdo como y busco tu comentario y no lo encuentro.

    ResponderEliminar
    Respuestas
    1. Hola Daniel, todos los comentarios se responden sin importar que el post sea antiguo o nuevo.
      Toma en cuenta que ese menú usa jQuery, y las flechas usan Scriptaculous, ambas librerías no son compatibles entre sí.
      Aquí hay unos botones de Ir Arriba e Ir Abajo con jQuery con los que seguro no tendrás problema al usarlos en conjunto con ese menú.

      Eliminar
  9. Hola Potro!
    Necesito tu ayuda con asunto que es offtopic de este artículo, si no lo ves adecuado no lo publiques y lo entenderé.

    Pero si lo aceptas, ahí va: He puesto en el menu de mi blog enlaces hacia etiquetas añadiéndole al final esto: "?&max-results=9", para limitar a 9 el número de post por página.

    ¿Sabes si se podría de alguna forma establecer por defecto que así fuese también al pulsar sobre una etiqueta de un post o al usar la búsqueda de la blog?

    Es que sino me crea cierta incompatibilidad con las hojas numeradas que he añadido. Si requieres de más información, por favor, preguntámela. Mil gracias Potro.

    El blog es este: http://www.habitossaludables.net

    Por cierto, si al visitarlo ves algo raro o mal montado soy todo oídos :)

    Gracias de nuevo por la ayuda,

    Javier López
    www.habitossaludables.net

    ResponderEliminar
    Respuestas
    1. Hola Javier, de hecho hay una entrada que habla sobre lo que deseas hacer:
      http://ciudadblogger.com/2012/04/elegir-cuantas-entradas-mostrar-en-las.html

      Saludos.

      Eliminar
  10. Bueno le busque por donde escribirte y no se si es el cansancio o simplemente no encontré el botón para comunicar contigo. Quería preguntar, ¿Existe o existirá un gadget similar a Tweet Old Post o Evergreen Post Tweeter?

    EL anterior descrito es un pluggin de WordPress que permite RT de manera automática entradas viejas del blog. La idea aparte de generar más trafico, es por si pasan días y no hay tiempo para sentarnos a escribir en nuestro blog. Sería de verdad muy útil algo similar en Blogger

    Por cierto muy bueno lo que haces, me he llevado el script del slider para mi blog. Un fuerte abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Juan Carlos. No conozco algún servicio que haga lo mismo que esos plugins, lamentablemente la mayoría de los creadores de esos plugins sólo se enfocan en la plataforma que usan, WordPress.
      Otro abrazo para ti.

      Eliminar
  11. Hola Potro! Necesito ayuda urgente :S Hace un rato abrí el blog y todo bien, modifiqué un text-shadow del título de las entradas y ya. Después me puse a actualizar un par de entradas para que tuvieran dos columnas (apartado de faldas), y cuando terminé vi que arriba en el blog pone "b:include has no 'name' attribute". Fui al panel del formato y me pone que la plantilla está rota. He estado buscando b:include por HTML para ver si alguno no tenía nombre pero todos presentan nombre. ¿Por qué será? ¿Puedes ayudarme por favor? Te lo agradecería mucho mucho mucho...! Gracias!

    ResponderEliminar
    Respuestas
    1. No sé decirte con exactitud qué debas cambiar ya que etiquetas B:INCLUDE hay muchas en una plantilla. Si tienes un respaldo instálalo.

      Eliminar
    2. Hola Potro, gracias, ¿Qué es un respaldo? :S
      ¿Podría ser que este error fuera porque instale divs con width, position, float, etc dentro de las entradas?

      Eliminar
    3. Depende de dónde hayas puesto esos DIVS, ¿dentro de la plantilla? Si no tienes un respaldo (una copia de seguridad) deshaz todos los cambios que recuerdes haber hecho hasta que desaparezca el error.

      Eliminar
    4. Hmmm... será difícil :S Pues los divs los puse dentro de la entrada en formato HTML.

      Eliminar
    5. Hola Potro, te comento que ya encontré el fallo... una piip F que se me coló al lado de un b:include name. Los peores errores son los más tontos! Me morí porque ya tenía el diseño muy avanzado...
      Potro, tienes tips para hacer un blog bilingüe? Si es así me gustaría mucho que me dieras el enlace.
      Saludos y mucha luuuz!

      Eliminar
    6. Me alegra que hayas podido encontrar el error, son pequeños descuidos que a todos nos pasa.
      Para lo otro, la mejor opción y menos complicada, es que agregues un traductor en el blog:
      http://ciudadblogger.com/2010/07/gadget-de-traductor-de-google.html

      Eliminar
  12. potro nesecito tu ayudar para ver como puedo poner que en el Gadgets de feed aparecan mas de 5

    ResponderEliminar
    Respuestas
    1. No es posible, ese gadget no se puede modificar.

      Eliminar
  13. ¡Hola!

    Potro, me pegaste un buen susto con la música, jeje, pero está genial. =D

    La verdad es que no quería preguntarte porque es fuera de tema, pero no encuentro la solución. Ya intenté hacer muchos cambios, pero nada me funciona.

    Estoy haciendo un blog, pero las imágenes se mueven cuando están en las páginas individuales, si pongo "tamaño de imagen original" (que se supone debería ajustarse a la perfección) y la alineo a la izquierda, se ve más pequeña en la página inicial.

    Si pongo "tamaño extra grande" y lo centro se ve bien inicialmente, pero en las páginas individuales se mueve a la izquierda y cuando lo veo en celulares se ve fatal. Ya probé todas las combinaciones, ¿alguna idea de qué estoy haciendo mal? Las imágenes son de 620px y las entradas son del mismo tamaño.


    Supongo que es algo del margen o "padding", sólo quiero que la imagen quede alineada con el texto, pero no doy con la solución, ¿o estará relacionado con el "jump link"?

    El último cambio que hice fue poner img {margin: 0 auto;} pero tampoco funciona. =(

    Éste es el enlace:

    inter124.blogspot.com

    Perdón por la pregunta y gracias de antemano.

    Saludos. =)

    ResponderEliminar
    Respuestas
    1. Hola jessie, es por el margen que viene incluido en el código de las imágenes. Prueba añadiendo antes de </head> lo siguiente:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
      .post-body a {
      margin-left: 0px !important;
      }
      </style>
      </b:if>

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

      Eliminar
    3. Muchas gracias. =)

      Funcionóoooooooo.

      Y la última pregunta (he investigado, pero no dicen nada sobre plantillas nuevas). Mi texto no separa los párrafos en la página de inicio (me sucede en éste y otro blog), a menos que ponga jumplink. Ya intenté manualmente poniendo "< b r / >" y/o "< p > < p / >" pero no funciona (los pongo separados para publicar el comentario).

      Una disculpa, es que ayudo a amigos a diseñar sus blogs (a algunos de ellos les resulta costoso pagarle a un diseñador) por eso pregunto tanto.

      Gracias de nuevo.

      Eliminar
    4. Potro, encontré la solución. Tenía un ".post-body br {display:none !important;}". Seguramente lo puse al copiar algún truco.

      Muchas gracias, saludos.

      Eliminar
    5. Es posible que así haya sido. Me alegro que lo hayas resuelto. Saludos.

      Eliminar
    6. Creo que no se publicó mi comentario... En fin, decía que gracias, no me canso de hacerlo porque de todos los blogueros con este tipo de blogs, tú eres el más amable y explicas las cosas de forma muy sencilla. He intentado trucos de otros blogs y siempre me quedan dudas o no me salen, en cambio, con los trucos de Ciudad Blogger nunca he tenido ningún problema, y mira que he probado muchos. =)

      Cuídate.

      Eliminar
    7. Qué linda jessie, muchas gracias por tu comentario :)

      Eliminar
  14. Muy interesante.
    Cómo podría usar una imagen de fondo fija, con otra imagen superpuesta de fondo en las entradas ?

    ResponderEliminar
    Respuestas
    1. Lo que pongas para las entradas es independiente. Si pones una o múltiples imágenes en el BODY del blog entonces sólo afecta al cuerpo de la estructura, es decir, al fondo del blog. No tiene que ver con las entradas, si quieres una imagen ahí entonces tienes que añadirla no al BODY sino al contenedor correspondiente.

      Eliminar
  15. Hola amigo potro, muy buenas! tengo una pregunta porque no puedo crearme una cuenta en adsense, cuando pongo mi url de mi blog me sale que tengo que ir a blogger depues a ingresos pero no sale nada para crear?

    ResponderEliminar
    Respuestas
    1. Hola Zheyn Castle, en el panel de control de tu blog, dentro de la pestaña "Ingresos" debe mostrarse un botón para inscribirte en el programa de AdSense, en caso de tu blog no cumpla los requisitos el botón estará inhabilitado y al lado habrá un texto que diga "Tu blog no cumple los requisitos para utilizar AdSense".

      Eliminar
    2. Hola potro y que debo hacer para no este inhabilitado esa sección?

      Eliminar
    3. Si tu blog es muy reciente o tiene pocas entradas tendrás que esperar y publicar más. Uno de los requisitos de AdSense es tener al menos 6 meses de antigüedad con el blog.

      Eliminar
    4. Ok grasias por todo entonces esperare amigo grasias!

      Eliminar
  16. potro ayúdame, en algo tan simple no ubico como solucionarle resulta que he puesto un buscador debajo de mi imagen titulo del blog pero queda un espacio enorme entre ellos, he tratado de todo y no puedo solucionarlo, por favor mi blog es adondechincha y el blogspot.com por favor tu ayuda es en la cabecera el problema

    ResponderEliminar
    Respuestas
    1. Hola Daniel, puedes aplicar un margen para subir el buscador, por ejemplo:
      #HTML4 {
      margin-top: -10px;
      }

      Eliminar
    2. Potro ya lo intente y no cambia nada, esa fue una de las primeras cosas que hice y no funciona.

      Eliminar
    3. Es que ese código lo has puesto dentro de una media query así que sólo se aplica cuando el monitor es menor a 800px. Sácalo de ahí y ponlo arriba de @media screen and (max-width: 800px) {

      Eliminar
    4. Gracias Potro, eres lo máximo, ese fue el error ya decia yo que en algo tan simple estaba fallando, pero a veces así es, regracias por tu apoyo, te sigo desde siempre Potro. Gracias, a todo esto Potro, que tal te parece mi página necesito la opinión de un experto como tu Potro.

      Eliminar
    5. La opinión como siempre me la reservo, pero te agradezco mucho tu comentario :)

      Eliminar
  17. potro! que tal? tiempo sin pasar por acá,no sabia donde dejar el comentario ya que no tiene nada que ver con esta entrada, bueno, me ayudarías? no se como quitar el espacio vació que existe arriba del titulo de entrada de mi blog, ese espacio negro vacio.

    espero puedas ayudarme, gracias y saludos potro!

    http://sae-mel.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Sae Mel, busca en tu plantilla un código que comienza con <div id='top-container'
      Ahí, en ese DIV verás un height: 68px; elimínalo y con eso desaparecerá ese espacio.
      ¡Saludos!

      Eliminar
  18. Potro, una pregunta sobre otro tema: en mi blog si hay más de una entrada del mismo día todas entran en la misma fecha, cómo puedo hacer que cada entrada lleve su fecha aunque sean publicadas el mismo día? No encuentro esa solución por algún lado. Lo que quiero es que cada entrada lleve su fecha, aunque sean del mismo día, se entiende? Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Enrique, te remito a esta entrada:
      http://www.ciudadblogger.com/2010/11/mostrar-la-fecha-en-todas-las-entradas.html

      Eliminar
    2. Gracias, muy amable tú como siempre, es que no la encontraba por ningún lado. Gracias de nuevo.

      Eliminar
  19. Sabes que ahora, sustituído el código por el que me indicaste, la fecha efectivamente aparece en cada post individualmente, pero... cada post tiene un fondo de color que cuando las entradas corresponden a distintas fechas es independiente en cada entrada, pero cuando hay dos o más entradas en una misma fecha todas aparecen sobre el mismo fondo, sin dejar un margen de separación como sí ocurre cuando las entradas son de distinta fecha. Y eso es lo quiero hacer, separar el fondo también. No sé si será posible, gracias.

    ResponderEliminar
    Respuestas
    1. Sí es posible pero yo no tengo una entrada sobre ello. Quien sí la tiene es Oloman, busca en su blog y encontrarás un tutorial que te servirá para lo que deseas. Saludos.

      Eliminar
  20. Si, tal cual, encontré la solución en Oloman, gracias Potro. Todo solucionado.

    ResponderEliminar
  21. potro te propongo algo, sabes esas etiquetas que salen arriba de los post, en las entradas que salen en grande. como mostrando una etiqueta prncipal en cada post, que sale arriba o a un lado como una cinta que pasa algo asi, yo pronpongo buscar eso.

    ResponderEliminar
  22. Hola amigo, espero estes muy bien. me podrías ayudar con algo de mi blog por favor.. lo que pasa es que al momento de compartir las entradas en fb.. no se mientra ni el titulo ni la descripcion de la entrada, si no el titulo y la descripcion del blog :(

    el blog es: http://www.paginacuriosa.com

    ResponderEliminar
    Respuestas
    1. Hola Alejandro, quizá tu plantilla necesite microdatos Schema:
      http://www.oloblogger.com/2012/04/microdatos-schema-en-plantillas-blogger.html

      No está de más que también le agregues metas para Facebook:
      http://metatags.ciudadblogger.com/

      Eliminar
    2. Gracias por la respuesta amigo, desafortunadamente no lo pude arreglar, ni adicionando las etiquetas que ofreces en tu pagina, ni adicionando el codigo schema.. lo raro es que cuando vas a compartir la entrada en twitter o en google+ si se muestra como debería.. pero en facebook no, ya con esta nueva informacioón de pronto sabrías que es lo que ocacionaría el error?

      Eliminar
    3. Quizá sea más un problema de Facebook que de tu propio blog, pero no lo sé con certeza.

      Eliminar
    4. Creo que despues de hacer los cambios de codigo que me dijiste solo era cuestión de esperar. ya me funcionó, muchas gracias por ayudar a la gente!

      Eliminar
  23. Hola Potro, estoy empezando un nuevo proyecto y quisiera que me echaras una mano en unas pequeñas dudas que me han surgido con una plantilla que he conseguido...

    El caso es que he cogido esta plantilla para mi blog:

    http://magnet-soratemplates.blogspot.com.es/

    que la descague de aqui:

    http://www.soratemplates.com/2014/10/magnet-blogger-templates.html

    y al subirla a mi blog:

    http://www.emprendetuempleo.com/

    me han surgido dudas que querría que me solucionaras si es posible.


    1º) En esta imagen que corresponde a esta url de mi blog (http://www.emprendetuempleo.com/):

    https://www.dropbox.com/s/5us4ql4584mhtpg/1%20Consulta.jpg?dl=0

    te he escrito en modo de comparativa 4 número con cuatro cosas que quiero arreglar:

    1- Quisiera que me saliera la fecha de publicación de las entradas.
    2- Quisiera que me saliera la imagen que aparece al lao del número 2, y que yo pudiera cambiar esa imagen por otra.
    3- Quisiera cambien el Written By Sora Templates por: Escrito por JavierBJ
    4- En el buscador, quisiera que apareciese la palabra Buscar

    2º)En esta otra imagen, que corresponde tambien a la pagina de inicio:

    https://www.dropbox.com/s/ljx2x8qznbm9jpy/2%20Consulta.jpg?dl=0

    te muestro otros dos números que corresponden a otras dos cuestiones.

    5- Donde dice Read More, quisiera cambiarlo por: Leer más
    6- Donde dice Comments, quisiera poner Comentarios

    3º) En esta otra imagen, que corresponde a una pagina del blog (http://www.emprendetuempleo.com/p/prueba.html):

    https://www.dropbox.com/s/2ok0qyvoskqg3js/3%20Consulta.jpg?dl=0

    te muestro un antes y un despues, es decir, yo querria que solo saliera una zona en blaco, es decir, quiero que no aparezca el titulo de la pagina, que no aparezca la hora... es decir, que no sea como una entrada.

    4º) En esta otra: https://www.dropbox.com/s/x1y9m28t2dcwevv/4%20Consulta.jpg?dl=0

    el (Created By Sora Templates and My Blogger Themes) quisiera poder cambiarlo yo por otras cosas, o directamente eliminarlo.

    5º)Por fin la ultima. En esta imagen:

    https://www.dropbox.com/s/z2qrnhjmoyy0zet/5%20Consulta.jpg?dl=0

    que corresponde a una entrada del blog:

    http://www.emprendetuempleo.com/2014/11/prueba.html

    te muestro remarcado en rojo una cosa que querría eliminar, a ver si m puedes decir como.



    Bueno Potro esto es todo, se que es mucho lo que te he pedido, pero te lo pido todo del tirón para ir más rápido.
    Te pido por favor que me ayudes, no se si es mejor que tu mismo me corrijas la patilla o que me digas tu a mi como hacerlo. Ambas cosas me dan igual, lo que a ti te sea mas rapido y sencillo.
    Espero tu respuesta y mil gracias de antemano.



    Gracias de antemano y un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Javier, de ser posible usa menos links en los comentarios para evitar que Blogger mande tus comentarios a la bandeja de spam porque algunas veces no los puedo recuperar de ahí.
      Aquí hay una entrada que te mostrará cómo quitar el texto "undefined" y mostrar la fecha:
      http://www.ciudadblogger.com/2009/07/solucion-fecha-undefined.html
      Lo de la imagen no sé, desconozco cómo tome esa imagen la plantilla y cómo puedas cambiarla.
      La palabra "Search" búscala en tu plantilla y cámbiala por la que desees. Lo mismo con "Read more" y "Comments".
      Para lo de la página usa condicionales, de esa manera tú eliges qué quieres ocultar ahí:
      http://www.ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
      Los créditos sólo puedes cambiarlos o eliminarlos si compras la plantilla.

      El autor de las entradas se oculta con estos estilos añadidos en la plantilla:
      .author-meta {display:meta}

      Eliminar
    2. Hola Potro, he cambiado el tipo de fecha como me indica en tu entrada de Solución de fecha undefined, pero sigue sin solucionarse, que puede ser?

      Luego, para cambiar "Search" lo he buscado y he encontrado esto:

      <div class='span3' id='side-bar'>
      <div class='bl_search nav-collapse collapse'>
      <form action='/search' class='searchform' id='searchform' method='get' role='search'>
      <div>
      <label class='screen-reader-text' for='s'>Search for:</label>
      <input id='s' name='q' type='text' value=''/>
      </div>
      </form>
      </div>
      <div class='clear'/>

      ¿que es lo que debo cambiar?

      Por último, donde debo poner el estilo .author-meta {display:meta} ?

      Eliminar
    3. No sé decirte, esa configuración de la fecha es la que siempre ha funcionado, salvo que tu plantilla deba configurarse de otra manera, entonces deberás consultar al autor de la plantilla.
      Si el texto de la búsqueda no aparece ahí entonces debe estar dentro de un script y no podrás cambiarlo en la versión gratuita de la plantilla.

      Los estilos siempre van antes de ]]></b:skin>, sólo corrijo un error mío, el código es: .author-meta {display:none}

      Eliminar
    4. Si la compro podré cambiarlo?

      Que diferencia hay entre tener la plantilla comprada o no?

      La voy a comprar y voy a probar todo lo que me has comentado hasta ahora. Si me salen mas dudas te iré comentando vale?

      Gracias Potro.

      Eliminar
    5. Se supone que sí, nunca he comprado una plantilla de ese autor, pero según he visto en su página la versión "premium" no tiene encriptados los scripts así que en teoría podrías cambiarlo sin problema. De cualquier manera sus plantillas de pago también tienen soporte técnico así que él podría decirte dónde cambiarlo exactamente.

      Eliminar
    6. Hola Potro, he comprado la plantilla y la he instalado en mi blog: http://www.emprendetuempleo.com/ , pero sigo teniendo dudas.....

      Algunas ya te las había comentado, pero como ya la plantilla digamos que esta desencriptada, al comprarla, pues a ver si me puedes hacer el favor de echarle un vistazo a ver si ahora si sabes como hacer algunas cosas.


      1º) En esta imagen: https://www.dropbox.com/s/5us4ql4584mhtpg/1%20Consulta.jpg?dl=0
      que corresponde a esta url de mi blog: http://www.emprendetuempleo.com/

      he escrito en modo de comparativa 4 número con cuatro cosas que quiero arreglar:

      1- Quisiera que me saliera la fecha de publicación de las entradas en lugar de la palabra "undefinad".
      2- Quisiera que me saliera la imagen que aparece al lado del número 2, y que yo pudiera cambiar esa imagen por otra.
      4- En el buscador, quisiera que apareciese la palabra "Buscar" en lugar de la palabra "Search"

      2º) En esta otra imagen: https://www.dropbox.com/s/2ok0qyvoskqg3js/3%20Consulta.jpg?dl=0
      que corresponde a una pagina del blog http://www.emprendetuempleo.com/p/prueba.html

      muestro un antes y un después, es decir, yo querría que solo saliera una zona en blanco, es decir, quiero que no aparezca el titulo de la pagina, que no aparezca la hora... es decir, que no sea como una entrada del blog.

      3º) En esta imagen: https://www.dropbox.com/s/z2qrnhjmoyy0zet/5%20Consulta.jpg?dl=0

      que corresponde a una entrada del blog: http://www.emprendetuempleo.com/2014/11/prueba.html

      muestro remarcado en rojo una cosa que querría eliminar por completo. ¿Qué debo hacer para quitarlo?

      4º) Quisiera que me explicarais también como se elimina o se oculta la barra "Navbar1" es decir la barra de navegación, que sale abajo a la derecha en mi blog.


      Espero tu respuesta Potro.

      Muchas Gracias.

      Eliminar
    7. Hola, ya te he respondido antes sobre todo lo anterior, al no conocer yo la plantilla me es imposible darte instrucciones exactas sobre esas cuestiones, el indicado es el autor de ella, con el plus de que el soporte de sus plantilla viene incluido con el pago de las mismas.

      Sobre la página, usa condicionales:
      http://www.ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Sólo es cuestión que identifiques la sidebar y la condiciones para que no se muestre en las páginas. Luego encontrar el ID de las entradas y condicionarlo para que en las páginas tenga un ancho mayor. Aquí hay una entrada con la que hacemos lo mismo, es para plantillas originales pero puedes darte una idea:
      http://www.ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

      Para la navbar, aquí:
      http://www.ciudadblogger.com/2009/01/eliminar-la-barra-de-blogger.html

      Eliminar
    8. Ok Potro, ya voy haciendo cositas con tu ayuda :)

      He eliminado cosas con las condicionales, pero ahora no se como hacer que en las paginas estáticas el blog ocupe un ancho determinado y el sidebar 0px

      He mirado tu entrada http://www.ciudadblogger.com/2010/10/cambiar-el-ancho-del-blog-y-sidebar-en.html pero yo en mi plantilla no encuentro eso, me puedes decir que poner como condicional antes de </head> para cambiar el ancho.

      Un saludo y gracias Potro

      Eliminar
    9. Otro cosita más Potro.

      Mira el punto 3 de esta imagen: https://www.dropbox.com/s/5us4ql4584mhtpg/1%20Consulta.jpg?dl=0

      Quiero que en vez de aparecerme el: deempleadoaemprendedor
      poder cambiar eso por lo que yo quiera, pero no se que hacer en la plantilla...

      Puedes mirármelo por favor

      Gracias Potro.

      Eliminar
    10. Veo que ya has ocultado la sidebar, ahora sólo tienes que poner el contenedor de las entradas, que en este caso es .span9 con un ancho mayor, por ejemplo 1020px

      Lo otro es el nombre del autor, si quieres cambiar tu nombre hazlo editando tu perfil de Blogger. Saludos.

      Eliminar
    11. El contenedor de las entradas o el de las páginas estáticas?

      Yo quiero que solo sea en las paginas estáticas, supongo que será con los condicionales, pero cual es el código html? es decir, que debo hacer con el .span9 ? Que y donde debo ponerlo?

      Espero no estar causándote muchas molestias, pero no soy muy entendido en todo esto.

      Eliminar
    12. Es el mismo contenedor, en realidad las entradas y las páginas provienen del mismo gadget. De cualquier manera ya te he dado el nombre de la clase que debes emplear:
      Mira de nuevo la entrada que te referí:
      http://www.ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

      Sigue el mismo método, sólo debes cambiar el nombre de los ID de los contenedores, que en el caso del tuyo es una clase y no un ID.

      Saludos.

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

    ResponderEliminar
    Respuestas
    1. Hola, he entrado a tu blog pero lo he visto todo bien, no sé si ya lo has resuelto. Si sólo te sucede en una entrada en particular entonces asegúrate que todos los DIV y etiquetas HTML de esa entrada estén bien cerrados.

      Pd. Elimino el comentario por el aviso que está aquí en el formulario.

      Eliminar
  25. -Hola Pot, oye en mi blog: http://cantosparadios.blogspot.mx/ la imagen del footer: bg_footer1.jpg en la parte de abajo no pega con el borde de la pagina, esta como separada, le he movido y no logro conseguir que este al ras de la ventana o pagina, que no se vea separada valla, me podrías decir como solucionarlo, de antemano gracias...-

    ResponderEliminar
    Respuestas
    1. En ese background veras que dice "left bottom", eso cámbialo por: left 7px

      Eliminar
    2. -Hola Pot, mira aquí unos ejemplos: en la primera imagen se muestra una publicidad que me ha estado dando mucha lata, no se si puedas ayudarme a eliminarla, y en la segunda se muestra como queda después de agregado el código que me dices, no se si sea por la publicidad pero la flechita amarilla indica el problema del cual me refiero, que se queda un espacio suelto entre la imagen y la barra de tareas...-

      Eliminar
    3. Hola Jair, creo que olvidaste los links de las imágenes.

      Eliminar
    4. -Rayos si es cierto Pot je je, esta corresponde a la publicidad que te digo: http://4.bp.blogspot.com/-4XpihQne628/VQ7-4hcX3mI/AAAAAAAABq8/XNlg_SuTCrM/s1600/publicidad.jpg y este es del espacio que te digo: http://1.bp.blogspot.com/-PBplIwd8z1U/VQ8ADz5F68I/AAAAAAAABrM/m83Dc7WFPks/s1600/espacio%2Binferior.jpg, espero y puedas darme una buena solución, y de antemano gracias...-

      Eliminar
    5. He entrado pero no veo ninguna publicidad, lo que me hace pensar que quizá sea alguna extensión de tu navegador la que la está mostrando.

      Lo otro quizá sea el navegador, yo he entrado desde Safari y ya no veo ningún espacio abajo :/

      Eliminar
  26. Hola potro hace tiempo que no te pido ayuda, tengo varios blog que no puedo cambiar el fondo como antes pues en el apartado (body) ya no sale la url de la imagen que tengo para anularla y poner otra.
    La pagina de mi blog es http://reinosodecerrato.blogspot.com.es/ espero tu respuesta muchas gracias por tu tiempo y un saludo

    ResponderEliminar
    Respuestas
    1. Hola charly, se cambia en esta área:

      body {
      background: url(https://lh3.googleusercontent.com/-FOiP0QkCHDY/VRnkZ-reYvI/AAAAAAAAXuM/7SuYLZWxacU/w1298-h865-no/fondo%2Bprueba%2Bprimavera.%2Botro%2Btama%C3%B1o.jpg) fixed no-repeat top center;
      rcontent.com/-frxIufQ0gXQ/VJDkbMp-0xI/AAAAAAAAXAY/grmmAsjtRjo/w1419-h822-no/DPP_0022.JPG") fixed no-repeat top center;
      margin:0;
      text-align:center;
      line-height: 1.5em;
      font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
      color:#333333;
      font-size/* */:/**/small;
      font-size: /**/small;
      }

      Eso que está en cursiva no debe ir, está de más. Elimínalo.

      Eliminar
  27. Hola Potro!! hace algún tiempo que sigo este blog y no es el primer comentario que dejo.

    Tengo una idea a la que pocos pueden ayudarme, a ver si tu con tu esperiencia puedes ayudarme. Tengo un blog de astronomía, tu sabes que hay muchas aplicaciones de astronomía que mediante un botón cambia la vista a rojo y negro (vista nocturna) para que la pantalla no deslumbre cuando ves las estrellas. La intención es poner en mi blog de astronomía un gadget con dos botones, uno para elegir la vista nocturna (Texto rojo y Fondo negro) y otro para elegir la vista diurna ó original del blog (colore habituales del blog).

    Sé que esto se puede hacer con hojas de estilos .CSS un poco de javascript y cookies. Pero estoy verde en el tema y no alcanzo a conseguirlo. Me han pasado los códigos de la plantilla y los del gadget pero no se por donde empezar.

    Agradecería cualquier opción o ayuda. Gracias Potro!

    ResponderEliminar
  28. Hola Potro, te escribo para saludarte, quizá es difícil que me recuerdes ya que he pasado por muchos sobrenombres uno de ellos fue Black, una vez te hice un articulo de dominios personalizados para blogger y cómo configurarlos y me mencionaste con un link hacia mi facebook. Sé que todos te piden ayuda de todo y eso quizá te vino cansando ya que una web de ayuda de blogger y cosas relacionadas no tiene buenos rendimientos en adsense así que algo mejor habrás encontrado.

    Empecé un proyecto, no te pido ayuda al respecto ya que el proyecto ya ha concluido, hice una plantilla tipo "Material Design" para blogger, aquí te dejo el enlace con la descripción. No he vendido ni una sola plantilla y si revisas mi trabajo sé que te gustará, es quizá que la gente no confía en una marca nueva... por favor si me lees me gustaría que me ayudaras hablando de ella en tu blog. Sé que tiene mucho que no publicas, ahora ya estoy de lleno con Blogger si gustas te puedo echar una mano publicando cosas, estoy en el foro de ayuda de Blogger junto a Oloman y otros colegas más resolviendo dudas de gente que usa Blogger, allí se presta para ofrecer mi producto pero se me hace poco ético y no tengo a nadie más a quién recurrir.

    Tus comentarios están fallando así que de alguna manerá sé que será más fácil que leas mi mensaje ya que nadie o muy pocos podrán escribir en tu blog, espero de verdad me pudieras ayudar o me permitieras publicar cosas de Blogger en tu sitio, conozco a fondo la plataforma ahora, hay muchas novedades y muchas otras por venir. Espero que todo marche perfecto de aquél lado y que si te has retirado de esto sea por mejorar ya que eso deseamos todos y es lo menos que te puedo desear, ya que gracias a tus consejos así como los de Oloman es que aprendí demasiado, mis más cordiales saludos Potro. aquí te dejo el link de mi tienda para que veas la plantilla https://goo.gl/R9pL2n

    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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger