Al igual que hemos visto cómo cambiar el tamaño de la letra del blog a elección del lector también podemos darle la opción de cambiar el color de fondo por el que él quiera.
Esto no es por otra cosa más que por hacer más interactivo el blog y que el lector no sólo pueda leer el contenido sino que pueda jugar con la apariencia del blog.
La forma de hacerlo es a través de una función Javascript que hará que con un click el color de fondo del blog (body) cambie, y funciona aun si tienes de fondo una imagen.
Puedes verlo funcionando haciendo click en cualquiera de los colores.
Para poner esta opción en tu blog entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript, y ahí pega esto:
<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>
Si no te gusta con las imágenes de colores también puedes ponerlo como simple texto:
En ese caso el código a pegar es este:
<div style="text-align:center;">¿No te gusta el color de fondo?
¡Cámbialo por otro!</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Rojo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">Amarillo</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">Verde</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">Azul</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">Morado</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">Rosa</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">Negro</a> |
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">Blanco</a>
</center>
Puedes cambiar los colores por los que gustes, o agregar más colores, sólo debes agregar otra línea como esta por cada color que quieres agregar:
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';">Color</a>
Sólo cambia lo que está en color rojo por el código del color que quieres y pon el nombre del color donde se indica.
Lo mismo puedes hacer para cambiar los colores de los anteriores, sólo localiza el código del color, cámbialo y listo.
Hola Potro, que way este truco, la verdad es que siempre me preguntaba como se podía hacer.
ResponderSuprimirUn saludo!
Supongo que habrá otros métodos, pero al menos este me parece sumamente fácil ya que no hay necesidad de agregar scripts muy elaborados.
ResponderSuprimirSaludos.
Eso funcionaria para mi.
ResponderSuprimirA muchos no les gusta el color que tu eliges y lo quieren cambia, pues ahora se puede.
Especialmente para las mujeres,pues yo no pondre el color rosa ni por error jaja.
Muy bueno... mañana lo implemento, pero... se puede también usar el efecto con mi header? por ejemplo, cambiar la imagen del header y el background al pulsar uno de los botones? es que mi header tiene fondo de un color, el mismo que el del fondo, y bueno, se vería muy mal si cambio el fondo...
ResponderSuprimir:OOO Excelenteee Truco Potro, Buahahaha xD
ResponderSuprimirGracias Por Compartir :PP!
El Venado, jajajaja, no hay que temerle al rosa, además ya son otros tiempos ;)
ResponderSuprimirAscesino96, sólo funciona para el body, aunque veré si luego encuentro una forma de poder cambiar también esos elementos.
CяιsтιαиGσиzαlєz, gracias a ti por tu visita :D
Bueno, entonces el truco tendrá que esperar, jeje :)
ResponderSuprimirGuau, recuerdas aquella vez que dije 300 seguidores... bueno, ahora tienes 390 y supongo que habrán pasado unas dos o tres semanas...
Yo ni siquiera tengo 84, jajaj XD
Tampoco tengo ni 20 comentarios en ninguna de mis entradas, jajaja, voy a poner una faviconera en el blog para rellenar un espacio que puse en el header, pero no se... porque todos irían allí y nadie querría pagar por el banner, jaja, mejor pongo algo como enlázame... y lo pongo con el efecto que tengo en mi header... ya me fui de tema...
Espero que andes bien y por fin pude instalar cufón... bueno, alguien me ayudó...
Por experiencia te digo que es más fácil que el blog tenga más visitas que comentarios. Puede tardar bastante para que la gente comente, pero lo importante es que tus visitas no bajen.
ResponderSuprimirYa con el tiempo vendrán los comentarios.
Saludos.
Wow Potro!
ResponderSuprimirEres El Cientifico de blogger!
lo maximo!
Esto lo nececito al maximO!
SALU2 100PRE SERAS EL REY DE BLOGGER!
Supongo que sí, en fin, tu eres el experto y el experimentado... ^.^
ResponderSuprimirAveces me da una rabia que nadie comente en mis tutoriales... en los pinceles y los recursos no me da tanta, pero los videos, que me cuestan un montonaso hacerlos, nadie los comenta, por dios, si supieran el trabajo y sacrifisio que es estar poniendo los zoom y grabar el video sin errores, luego ponerle la música, la presentación, más tarde guardarlo como HD (demora como 20 minutos), luego, subirlo a youtube y más tarde y por último, publicarlo en el blog junto a su imagen final...
Aunque en youtube estoy reciviendo bastantes visitas, yo quiero que sean en el blog... u.u
Al fin y al cabo... dentro de un tiempo ojala que me comenten de a montones...
Me encanto :D
ResponderSuprimirBlogio, sólo soy un plebeyo :)
ResponderSuprimirAscesino96, pues no lo hagas por los comentarios sino sólo por la satisfacción de compartir, lo demás solo vendrá.
PepeX, qué bueno que te ha gustado ;)
Esta bueno el truco, tu blog parece pollo con el amarillo xD, Oye potro ya veo que se acomodaron los links de entradas antiguas en tu blog cambiaste algo? Sludos.
ResponderSuprimirPerdón Borest, olvidé mencionarte que Rosa ya tiene la solución:
ResponderSuprimirhttp://elescaparatederosa.blogspot.com/2010/02/recuperar-los-enlaces-de-navegacion-iii.html
Saludos.
Ntp, y gracias de nuevo.Saludos.
ResponderSuprimirDe lujo muy muy util!! muchisimas gracias esto es para que los lectores tambien interactuen y se sientan mas comodos en el blog, gracias por un excelente trabajo como siempre
ResponderSuprimirExacto, en muchos blogs interactuar con los lectores es básico.
ResponderSuprimirGracias por tu visita.
Excelente amigo, Justo es lo que buscaba. Das en el clavo en todos tus post. Muchas Gracias.
ResponderSuprimirHola amigo, necesito ayuda para mi blog De todo un Poco EL TIENE MUCHOS COLORES DE FONDOS, Y QUIERO QUE SEAN 2 NADA MAS, (EL DE FONDO QUE ES AZUL, Y QUIERO OTRO BLANCO) un ejemplo como este: http://www.elmejorcompartir.com/
ResponderSuprimirmuchas gracias varon
Lo malo es que el color con el que se guardo no permanece cuando actualizas el navegador
ResponderSuprimirHola JORGE,
ResponderSuprimirQué bueno que te ha servido. Quizá aplicando algunas cookies se podría hacer eso, aunque del tema de las cookies lo desconozco por completo. Por ahí vi unos posts de Oloman acerca de las cookies pero no me he atrevido a probarlas aun.
Saludos.
Hola Martín Mundaraín,
ResponderSuprimirEse otro "color de fondo" que mencionas es un borde, puedes quitarlo buscando esta parte y eliminando lo que está en negrita:
#wrap {
background: #EEE;
width: 960px;
margin: 10px auto 10px;
padding: 0;
position: relative;
border: 10px solid #333;
}
Saludos.
ayuda potro!!
ResponderSuprimirañadi etiquetas expandibles y no se me muestran las entradas
pero las etiquetasd expandibles sirven a la perfeccion
ayudaaaa!
SALU2
pd el blog es:
ResponderSuprimirhttp://blogstrello.blogspot.com
Estoy Epserando Tu Respuesta... :S
ResponderSuprimirCiertamente no se ven tus entradas pero tampoco veo las etiquetas expandibles, o no sé a qué te refieras con expandibles.
ResponderSuprimircomo las tuyas y las de todos
ResponderSuprimirasi con el + y -
Ummm tal ves te estés confundiendo, yo no tengo etiquetas expandibles, ni en este ni en algún otro blog, y tampoco veo en tu blog que tengas etiquetas expandibles.
ResponderSuprimirDe cualquier modo sólo deshaz el último truco que hayas hecho para que regresen tus entradas.
Saludos.
El se refiere (creo) a las entradas de las etiquetas, al hacer click por ejemplo, en la etiqueta Generadores, que las entradas se pueden contraer y expandir... tu las tienes
ResponderSuprimirAhh, esas son entradas expandibles, de cualquier modo la recomendación es la misma, quitar el truco y revisar nuevamente dónde van los códigos para evitar que las entradas desaparezcan.
ResponderSuprimirHola el potro la verdad es que este truco esta super interesante, ya vere si puedo implementarlo en el blog por ahora lo estoy renovando pero tengo una duda como puedo cambiar el buscador que ya viene por la plantilla por el personalizado de Google?? espero puedas ayudarme y perdon por no haber pasado por aqui antes es que he estado muy atareado por que estamos en periodo de examenes en la escuela
ResponderSuprimirHola Clan Russo,
ResponderSuprimirNecesitaría ver qué plantilla es para decirte qué debes eliminar para sacar ese buscador y poner otro.
Saludos y suerte con los exámenes.
mUCHISIMAS GRACIAS EN UN MOMENTO TE ENVIO LA PLANTILLA PARA QUE CHEQUES QUE SE PUEDE HACER, ERES MI SALVACION POTRO OK ME VOY NECESITO ESTUDIAR
ResponderSuprimirhola quisieran contestarme esta pregunta ¿como puedo hacer para aplicar en mi blog el color morado pero sin que se vea el codigo del color,pues pobré en diseño añadi el gadget html/javascript y de todos los codigos de colores que hay,solo copie el del morado,me resulto pero resulta que cuando ingreso nuevamente esta todo del color anterior y tengo que dar click al cuadrito para recien ver el color,como hago para que sea permanente,ayudenme por favor ojala me hayan entendido,trate de explicarme lo mejor que pude,ojala y puedan ayudarme,pero desde ya estoy agradecida,gracias.
ResponderSuprimirles escribo por mi cuenta de google pues estoy en mi correo electronico pero ya que pasé por esta pagina y como tengo un blog(con mi otra direccion de correo)y bueno siempre quise ponerle un color de fondo a mi blog pero no se como,ojala me puedan ayudar y me puedan contestar pronto,mil gracias,oh por cierto muy lindo e interesante el blog,me sirve de mucho.
ResponderSuprimirHola berenice,
ResponderSuprimirPara cambiar el fondo del blog de forma permanente tienes que entrar en Diseño > Edición de HTML y buscar al inicio de la plantilla esta línea:
body {
En esa área deberás encontrar algo como esto:
background: #fff
Eso que está en negrita es el código del color que debes poner para tu nuevo color de fondo.
Saludos.
Hola el potro,me sirvió muchisimo tu ayuda,gracias y saludos.
ResponderSuprimirQué bueno que ya está solucionado.
ResponderSuprimirSaludos!
Hola El Potro, me gustaria saber si se le puede cambiar el color de la letra, tamaño o tipo, a una etiqueta en concreto de 20 que tengo, no se si me explico bien...
ResponderSuprimirun saludo
No que yo sepa :(
ResponderSuprimirHola, me podrias indicar porfis como hago para colocar en mi blog varios colores asi como el tuyo que los gadgets son blancos, el marco del blog es gris y el fondo gris oscuro.
ResponderSuprimirGracias
En esta parte de la plantilla:
ResponderSuprimir.sidebar .widget, .main .widget {
Debajo puedes poner un color de fondo o un borde, por ejemplo:
.sidebar .widget, .main .widget {
background:#FF00FF;
border:1px solid #000;
Saludos.
Hola, apliqué esto en mi blog, pero solo cambia el fondo como de un cuarto hacia abajo (una parte) mira: http://micasamiestilo.blogspot.com/
ResponderSuprimirEspero me puedas ayudar, gracias
Hola LISA,
ResponderSuprimirEso es porque tienes una imagen gradiente de fondo, si la quitas verás que el color ocupa todo el fondo.
Muchas gracias. Si ya lo chequé y si funciona con otras plantillas, pero como las otras no me convencen, mejor lo dejé como estaba y quite la aplicación jeje
ResponderSuprimirSaludos
Hola, Potro, buenos días¡¡¡¡
ResponderSuprimirNo sabía donde hacerte esta pregunta, así que te la dejo aquí, aunque no sea el sitio apropiado.
Verás, ayer, uno de mis lectores me hizo un comentario, y cito textualmente:
"No quiero parecer muy crítico, pero lo que sí veo mejorable es el contraste entre el texto y el fondo, ya que ese gris casi se funde con el negro y dificulta mucho su lectura."
Bueno, pues quería preguntarte si es verdad que mi blog se lee mal, nadie me ha dicho nada al respecto nunca, y yo tengo dos ordenadores con SO diferentes y en ambos se ve bien, con Internet explorer y con Mozilla.
No sé que contestarle, la verdad es que no sé si será un problema de su navegador, del mío, de la configuración de su pantalla.....¿¿??
Entra y miralo, si me haces este favor, y dime q que puede deberse el que esa persona lo vea "mejorable", (esta es una de las pocas cosas que no he modificado en la plantilla, el color de las entradas es el que viene en la Eclipse original, y no creo que nadie haga una plantilla que resulte borrosa o dificultosa de leer¡¡¡¡¡)
Espero tu respuesta, que sé que la habrá jejejejejej, hasta entonces te deseo un buen día, te envío un abrazo y besos, muchos besos para ti.
El enlace al blog:
http://lasendadelarosadormida.blogspot.com/
Ío
Hola Ío,
ResponderSuprimirBuenos días.
He entrado a tu blog y el texto lo veo perfectamente legible, si bien es muy común que blogs con fondo negro sean difíciles para la lectura en tu blog no es el caso. Es más difícil de leer cuando hay un fondo negro y las letras son blancas, pero esa tonalidad de gris creo que no lastima la vista para nada y se puede leer sin mayor dificultad.
Es probable que la resolución del monitor de tu lector esté mal configurada y no lo sabe (o no lo quiere saber) pero ahí no puedes hacer nada.
No creo que tengas de qué preocuparte a menos que sean muchos lectores quienes consideren que es ilegible el texto, pero sino es así no creo que haya ningún problema.
Muchas gracias por los besos, otros tantos para ti :)
Menos mal¡¡¡¡¡ ya pensaba que tendría que cambiar algo; me acabas de hacer muy feliz, Potro, mil gracias.
ResponderSuprimir(Le comentaré esto al lector, a ver qué opina, ea, si si)
Siempre me asombra la rapidez con que respondes, no en todos los sitios de ayuda lo hacen, que lo sé yo, y menos con tanta cortesía.
Por todo ello te daré siempre las gracias, de verdad que eres un sol.
Un beso, Potro
Ío
Es que sé lo que se siente pedir ayuda y que no te respondan o te tengan a la espera por días (eso mata a mi ansiedad), es por eso que procuro no demorarme mucho aunque muchas veces me es imposible.
ResponderSuprimirTe agradezco mucho tus comentarios, ¡un beso!
como comenta jorge#20
ResponderSuprimireste gadget está muy bien pero cuando cierras la página y la vuelves a abrir sale de nuevo el color original.
¿es posible de alguna manera, mantener tu elección del color aunque sea con cookies?
gracias de antemano
Aún no he tenido tiempo de aprender sobre las cookies, pero si te animas aquí hay una entrada de Oloblogger que habla al respecto:
ResponderSuprimirhttp://oloblogger.blogspot.com/2010/02/generar-y-recuperar-cookies.html
Hola añadi a ese cambio de colores en mi blog, pero la imagen del header some cuando elige un color. Que hago?
ResponderSuprimirNo he entendido tu pregunta.
ResponderSuprimirHola ElPotro, he puesto este código en un foro, y el problema es que solamente se cambia de color el marco externo, sabrías que hacer para que se cambia todo, al igual que en el blog??
ResponderSuprimir¡¡Muchas gracias!!
Sobre foros y su estructura no sabría decirte pues no conozco esas plataformas.
ResponderSuprimirSaludos.
Ok, al menos lo hemos intentado;
ResponderSuprimirGracias genio ;)
Buenísimo esto, me viene perfecto ya que mi blog se llama Diseña tu mundo y con esto le permito a los visitantes pues en pequeña parte diseñar el blog ¿no?. Pero tengo un problemita:
ResponderSuprimirCuando se le da click a los colores me lleva directamente a una ventana que dice: Configurar HTML/JavaScript
Si me puedes ayudar te lo agradecería mucho
http://disenatumundo.blogspot.com/
Jaja creo que ya lo logre nose como , pero lo logre. de todas maneras puedes reviarlo y decirme que te parece ;-)
ResponderSuprimirMuchas gracias
Creo que ya lo logre, pero no se como jeje
ResponderSuprimirde todas maneras puedes revisarlo y decirme que te parece
http://disenatumundo.blogspot.com/
En efecto ya está funcionando perfectamente :)
ResponderSuprimirHola Potro!! muy buen truco ¡ Gracias!!! y (para no perder la costumbre te hago ua consulta jeje). Notè ue en algunos blogs, tienen una imagen y abajo tienen la opciòn de cambiar el color ,pero sòlo de la imagen( por ejemplo: http://www.estilovinilos.com/decoracion-vinilos-mini-nombres-24/vinilo-nombre01-213/)
ResponderSuprimir¿sabrìas como lo hacen?,me gustarìa mucho implementar este truco jiji .
Un beso
Me temo que no, esos ya son programaciones más sofisticadas que simple scripts :(
ResponderSuprimirAh, bueno no importa gracias igual Potro :D
ResponderSuprimirUn beso
Hola amigo disculpa, tan solo me gustaria cambiar el fondo de mi blog por un color como hago por fa, ayudame saludes y visitanos un abrazo =)
ResponderSuprimirwww.losdelsurmonteria.blogspot.com
Hola Julio,
ResponderSuprimirPuedes cambiarlo en esta parte:
body{background-color: #005a04;
Ese es el color de fondo de tu plantilla y que puedes modificar por cualquier otro.
Oye Potro, tengo un problema, cuando añadí esto a mi blog resulta que bien lo cambia el color de fondo, pero solo cambias de un sitio para abajo, es decir, deja una franja arriba el todo con el color original, y no sé que le pasa.
ResponderSuprimirAquí es:
http://laventanadewindows.blogspot.com/
En esas plantillas la imagen de fondo se resiste a ocultarse, y digo se resiste porque el script tiene la instrucción de que no se muestre cuando se aplica el color.
ResponderSuprimirentonces no le puedo hacer nada? T_T
ResponderSuprimirPues no se me ocurre qué más se pueda hacer, en el otro, en el que se cambia por una imagen tenía ese mismo problema pero le hice una modificación y sí se pudo solucionar, pero con este por más que le doy vueltas no veo cómo :/
ResponderSuprimirEsta muy bonito esto lo malo esque no se mantenga mientras el usuario va navegando por las páginas, si supieras como seria genial, gracias
ResponderSuprimirEstoy muy contenta con este tip.. lo he cambiado deacuerdo a las fechas de festejo y queda genial muchas gracias.. algun otro que me aconsejes para mi blog??? :P jejeje saludos y nuevamente graaaaciaaasss.!!!!!!
ResponderSuprimirQué gusto que ha sido de tu agrado Ady, que los disfrutes tú y tus lectores :)
ResponderSuprimirMuy chulo, sencillo y quedón
ResponderSuprimirGracias
Gracias a ti por tu visita!
ResponderSuprimirGracias claro que si..!!
ResponderSuprimirhola potro un saludo muy grande desde colombia, me gustaria saber como lo puedo implementar pero que lo haga automatico sin necesidad de presionar ningun enlace o boton gracias
ResponderSuprimirEs necesario que se haga click sobre él, sino el script no sabrá qué color debe mostrar. Si lo que quieres es cambiar el fondo del blog entonces debes hacerlo en el área de body {
SuprimirEste comentario ha sido eliminado por el autor.
SuprimirDisculpame creo que no fui muy claro, abajo te dejo de nuevo mi pregunta un poco mas especifica
SuprimirVER PREGUNTA
http://db.tt/7FWVj9dD
SuprimirEn ese caso usa la condicional para aplicar el estilo del body para esa entrada en específico.
Suprimir<b:if cond='data:blog.url == "URL de la entrada"'>
<style>
body {
background:#ff0000 !important;
}
</style>
</b:if>
WOOO proto muchisimas gracias men sos lo mejor te debo una...
Suprimiryo lo logre pero estaba viendo bien el codigo y sera qe puedo también cambiar la imagen de fondo agregando una imagen en lugar de un color???
ResponderSuprimirSí, de hecho es la entrada siguiente a esta ;)
Suprimirhttp://ciudadblogger.com/2010/02/cambiar-imagen-de-fondo-del-blog.html