¿Puede ser que la página principal del blog tenga un background y que cuando se acceda a los posts tenga otro?
Esta es la pregunta que nos hizo hace unos días un lector anónimo y la respuesta es que no sólo es posible cambiar el fondo según el tipo de página, sino que también se puede hacer lo mismo para todos los demás atributos que tengan los distintos bloques del blog.
Para ello, sólo hay que echar mano de los condicionales y del tag HTML <style>
Lo que haremos será detectar si estamos en un tipo de página u otro y si es el deseado, forzamos un estilo redactando unos nuevos atributos para el bloque en cuestión.
Cómo es más fácil verlo que explicarlo, supongamos que cómo nos preguntaban, queremos cambiar el fondo de la página cuando estamos en una entrada individual. En primer lugar tenemos que localizar cual es el selector que contiene los atributos que queremos modificar. En este caso, en la parte CSS de nuestra plantilla tenemos entre otras cosas el fondo genérico de la página, que normalmente estará definido en la clase BODY:
body {
background:url(DIRECCION_IMAGEN);
margin:0 auto;
font-family: 'Comic Sans MS', Trebuchet MS, Tahoma, Arial, Helvetica,sans-serif;
}
background:url(DIRECCION_IMAGEN);
margin:0 auto;
font-family: 'Comic Sans MS', Trebuchet MS, Tahoma, Arial, Helvetica,sans-serif;
}
Este estilo afectará en principio a todas las páginas, pero como queremos cambiarlo para entradas individuales, nos vamos a la parte HTML y después de <body> (no confundir con el selector BODY que no lleva < >) insertamos todo esto:
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
body {background-image:none;background-color:#990000;}
</style>
</b:if>
<style type='text/css'>
body {background-image:none;background-color:#990000;}
</style>
</b:if>
De esta manera, al cargarse la página, el estilo será inicialmente el de la hoja de idem, pero si al cargar la parte HTML (lo que hay a partir de <body>) y en virtud de la condición introducida, se detecta que estamos en una página individual (item), se cargarán unos nuevos atributos para el BODY que se superpondrán a los cargados en primer lugar. En este ejemplo, se anulará la imagen y se cargará un color plano de fondo.
De igual manera podemos hacer para cualquier otro selector o para cualquier otro atributo. También podemos vincular el código de estilo, a diferenciar entre entrada individual, página de inicio, páginas de navegación por categorías o incluso en una entrada determinada (ver condicionales):
<b:if cond='data:blog.url == "http://oloblogger.blogspot.com/2009/06/videos-aleatorios-bpt.html"'>
<style type='text/css'>
#main {width:500px;background:#000000;color:#cccccc;}
#sidebar {width:300px;background:#cccccc;color:#000000;}
</style>
</b:if>
<style type='text/css'>
#main {width:500px;background:#000000;color:#cccccc;}
#sidebar {width:300px;background:#cccccc;color:#000000;}
</style>
</b:if>
Este último ejemplo hará que en la entrada con dirección http://oloblogger.blogspot.com/2009/06/videos-aleatorios-bpt.html, cambien los anchos del cuerpo principal y de la barra lateral, así como el fondo y los colores de la fuente.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Isto é muito facil de se fazer mas de qualquer forma é uma informação legal de compartilhar eu mesmo ja faço isto a muito tempo!!
ResponderEliminarLink do meu blog
He intentado usar esto para mostrar un elemento del sidebar solamente cuando entres en una entrada, pero me da error. Y el error que me da es:
ResponderEliminar"El artilugio con el ID Text2 no se encuentra dentro de una sección (el elemento matriz real es: b:if.) Todos los artilugios deben estar en una sección."
El código que he añadido sería:
b:if cond='data:blog.url == "http://el-comando.blogspot.com/2008/10/sin-comentarios.html"'>
b:widget id='Text2' locked='false' title='Texto de autor 1' type='Text'/>
/b:if>
He quitado < de delante de cada "b" porque me daba error para publicar el comentario
¿Esta algo mal del código?
Hola Enereo. No se puede condicionar una seccion entera o un widget. Eso es lo que te está indicando el error. El IF condicionar parte del código pero no precisamente esas partes.
ResponderEliminarSin embargo, si puedes hacer que cambie de estilo el elemento TEXT2 de manera que se tenga un display:none o un display:visible, según la página dónde estemos. El resultado creo que será el que tú quieres.
Y hablando de condicionales, ¿es posible que aparezca un gadget determinado en función de la Entrada?. Me explico, en un blog quiero que cada página muestre en la barra lateral derecha su propia imagen siendo ésta distinta en todas las páginas.
ResponderEliminarUn cordial saludo y felicitaciones por un blog tan espectacular y didáctico.
Hola Oloman. No sabes cómo te agradezco que hayas publicado este truco. Yo había insertado algo parecido pero sólo utilizaba las etiquetas <style> y </style> en lugar de <b:if cond='data:blog.url == "..."'> y cuando realizaba una búsqueda, el cambio de diseño realizado para las páginas de estas entradas afectaba también a los demás posts.
ResponderEliminarCon tu método ya puedo tener cada página con un diseño diferente ^_^.
Gracias!
Hola Samuel. Es fácil que un gadget se vea o no en función del tipo de página, pero bastante más complicado hacer uno distinto para cada URL.
ResponderEliminarSe puede hacer, pero al no poder utilizar una base de datos que lo haga de forma automática, tocaría hacer una interminable lista de condiciones con las direcciones de todas las páginas.
Se me ocurren un par de soluciones-chapuza que no sé si te cuadrarán.
* Una es colocar una imagen aleatoria como ilustración (si es ese el objetivo). Este sistema no requiere modificar los posts publicados porque saldría una imagen automáticamente.
* Otra sería que la imagen formara parte del post, pero que mediante código se colocara dónde tu quieres. Esto requiere modificar los posts publicados para adaptarlos a este sistema. En cualquier caso, sería necesario asignar las imágenes manualmente para cada entrada y es algo que necesitaría explicar en un post más largo.
Puedes ver un ejemplo en este blog, observando la columna dos de estos posts. En unos casos sale publicidad, en otros nada y en otros un contenido individualizado por cada post ("Saber más"):
http://www.blog.singenio.com/
http://www.blog.singenio.com/2009/11/concurso-de-fotografia-national.html
http://www.blog.singenio.com/2009/11/maurits-cornelis-escher-las-matematicas.html
http://www.blog.singenio.com/2009/11/el-idioma-de-los-ordenadores-sistema.html
Oloman,
ResponderEliminarGracias por las explicaciones. Te agradezco sinceramente tu ayuda.
Un cordial saludo
Hola Oloman muy interesante tu entrada, luego la estudio...
ResponderEliminarSabes que tengo una consulta que hacerte, por alguna razón que desconozco, se ha dejado de ver el avatar en los comentarios, esto sucedió después de cambiar el lenguaje de mi blog a inglés, y hacer un comentario en esa modalidad, ...lo que observé que paso fue que al estar escribiendo mi comentario se puso otra imagen que yo tenía en el avatar,(pasa que originalmente puse una, después la cambié y cuando seguía un blog aparecía la primera que puse y cuando comentaba aparecía la otra 'la segunda')
El caso, como te decía, cuando me disponía a poner el comentario me di cuenta que la imagen de el avatar se invirtió, me extraño, pero publique mi comentario y este apareció pero sin el avatar, solo el margen del mismo..
Después pense que debería volver a cargar la imagen de mi avatar, lo hice, y si apareció mi avatar en el siguiente comentario, pero ahora me doy cuenta que ni mi avatar ni el del comentarista aparece...
Cuál crees que sea el problema, y desde luego cuál es la solución?
Mil Gracias!
perdón Oloman, para evitar confusiones,es necesario decirte que esto sucede solo en Mi Blog...
ResponderEliminarGracias!
Hola bueno este comentario es para decirte que tu blog fue nominado a la categoria de Blogger en los premios WinBoox Awards 2009
ResponderEliminar(el concurso es solo de diversion y si es el ganador tu blog de la categoria te daremos una insignia para que pongas en tu blog como el ganador)
saludos :D :D
ahora lo unico que tienes que hacer es difundir tu nominacion con el medio que quieras para que pasen a votar por tu blog (el voto es por comentarios)
Karla, tendrás que indicarme un post concreto para ver el problema, porque los que he visto llevan todos el avatar del comentarista. De hecho hice un comentario y también salió el mío.
ResponderEliminarPuede que te refieras a otro problema que yo mismo tengo y es que los avatares dejan de aparecer a partir de cierto número de comentarios. Por lo que he visto, es un problema general.
Si en mi caso sale un dibujito, es porque he programado que salga eso cuando el sistema no coloca el avatar propio de cada uno.
Mike. Ok. Ya me doy una vuelta por tu blog y veo más cosas.
Hola Oloman,
ResponderEliminarGracias...eso me paso en 2 post en concreto, pero ya volvieron a aparecer solos los avatars, como que les gusta ir a tirar el roll por otro lado..., incluso ví en otro sitio que paso lo mismo..., entonces debe ser un problema de blogger como dices, también el otro día me paso algo extraño, de repente aparecía yo como seguidora de muchos blogs...cosa que yo no decidí...!
Sería bueno que explicaras como sustituir la imagen alternativa...
Gracias y que tengas un excelente día!
Hola Oloman, como estas? ... bueno pasaba, aparte de porque esta genial tu blog, y me es muy util, ahora necesitaba que me ayudes, resulta que en mi blog algo paso, y no se que es, pero los enlaces cambiaron de color y ahora se ven azules, y los enlaces ya visitados se ven bordo, y ese no es el color que yo habia puesto, de un dia para el otro se modifico solo, y quiero ponerlo como antes pero no se como hacerlo, espero que me puedas ayudar, besos,!
ResponderEliminarLore , mi blog es www.sonohraa.blogspot.com
Saludos!
Karla, al final de esta entrada lo tienes explicado: http://oloblogger.blogspot.com/2009/09/personalizar-avatares-comentaristas.html
ResponderEliminarLore, estas clases son las que controlan los enlaces generales de tu página. Luego puede que haya clases concretas con otros atributos, pero es que no sé a cuáles te refieres...
a:link {
color: #435059;
font-family: Verdana, Geneva;
font-weight: normal;
text-decoration:none;
}
a:visited {
color:#6E6E6E;
text-decoration:none;
}
a:hover {
border-bottom: 1px dashed #7D5DCA;
text-decoration:none;
color: #7D5DCA;
cursor: ne-resize;
background-color: #ff1493;
}
Hola aqui otra noticia sobre los WinBoox awards 2009, para tener mas votos puedes subir un post diciendo que estan nominados y un link,
ResponderEliminarademas este comentario es para acerte saber si no sabes que estas nominado en la categoria de Comics
SUERTE
la votacion se acaba el 15 de diciembre
Perdon en la categoria de Blogger
ResponderEliminaruuu que groso! ahora lo pruebo a ver se sale ;)
ResponderEliminarcomo hago para cambiar los gadgets?
ResponderEliminarPara los gadgets quizás sea esto otro lo que más te interese leer ;)
ResponderEliminarHolitas! Digo yo...ya de paso puedo cambiar la cabecera dependiendo también de las entradas? xD
ResponderEliminarPodrías hacerlo si no quieres cambiarlo para muchas entradas, porque sería un condicional por cada entrada con cabecera distinta a la "normal".
ResponderEliminarEn ese caso, habría que modificar el gadget con el que creas tu cabecera (HTML1) y dejarlo en un sencillo
<a href="http://seraphinprincess.blogspot.com/"><div id="loquesea"></div></a>
Luego en la parte de estilo de la plantilla, insertas
#loquesea {
width:800px; /* Ancho de la imagen */
height:200px; /* Alto de la imagen */
background:url(DIRECCION_IMAGEN_CABECERA);
}
Y por último, después del BODY, pones todas las condiciones que quieras para cambiar el BACKGROUND, de la manera que se explica en la última parte de este post.
vale...¿y que sería "loquesea"? ¿la entrada?
ResponderEliminar:D es exactamente eso, un nombre, un ID... el que tú quieras ponerle: "cabecerab", "micabecera", "cacharrito", etc.
ResponderEliminarHe hecho esto de aqui pero para el fondo esta vez...y no me sale :S te escribiria el codigo pero no me deja T__T
ResponderEliminarUsa esta herramienta para poner el código aquí y que no se interprete...
ResponderEliminarConvertir HTML en texto plano
Ya te ha dicho alguien que eres un cielo <3
ResponderEliminarla primera parte:
body{
background-image: url("http://img697.imageshack.us/img697/9908/fondo2a.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
font-size:80%;
}
segunda:
<body>
<b:if cond='data:blog.pageType == "http://seraphinprincess.blogspot.com/2010/02/sonic-x-episodio-30-la-batalla-del-egg.html"'>
<style type='text/css'>
body{
background-image: url("http://img59.imageshack.us/img59/7696/fondoblogsonicx.jpg"); background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</b:if>
Ok. En primer lugar eso no es la cabecera, sino el fondo general del blog, por lo cual la explicación que te dí, no sirve :D
ResponderEliminarSin embargo, el código que tú has utilizado si es el adecuado para cambiar el fondo. El único error están en la condición. Usaste data:blog.pageType, que sirve para ver qué tipo de página es aquella dónde te encuentras. Para comprobar si estamos en una dirección en concreto, habría que usar data:blog.url. Sólo cambia eso y debería funcionar.
Si, por eso te dije que hice lo de aqui pero para el fondo =P.
ResponderEliminarMuchas gracias, ya me salió =D. Ahora intentar para la cabecera
¡Ja! Ahora me pasa lo mismo con la cabecera...
ResponderEliminarPrimera parte:
/* Header
-----------------------------------------------
*/
#micabecera {
width:660px; /* Ancho de la imagen */
height:299px; /* Alto de la imagen */
background:url(http://i736.photobucket.com/albums/xx3/theeyesoftheseraphin/seraphinprincessheader.jpg);
}
(Por supuesto, he hecho lo de cambiar el gadget de la cabecera al principio como me lo dijiste)
Segunda parte:
<body>
<b:if cond='data:blog.url == "http://seraphinprincess.blogspot.com/2010/02/sonic-x-episodio-30-la-batalla-del-egg.html"'>
<style type='text/css'>
body{
background-image: url("http://img59.imageshack.us/img59/7696/fondoblogsonicx.jpg"); background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
micabecera {
width:700px; /* Ancho de la imagen */
height:350px; /* Alto de la imagen */
background:url(http://i736.photobucket.com/albums/xx3/theeyesoftheseraphin/Cabeverasonicx.jpg);
}
</style>
</b:if>
Como veras he metido "micabecera" dentro del mismo condicional antes hecho, ya he probado con hacer un condicional solo para la cabecera pero vuelve a aparecer el otro.
En la segunda parte, te falta una almohadilla (#) delante de "micabecera". Supongo que en el gadget de la cabecera, usaste también este nombre (micabecera).
ResponderEliminarVaya, había puesto la almohadilla cuando puse un condicional aparte pero no salia...pensé que era eso lo que estaba mal...Muchas gracias nuevamente.
ResponderEliminarMola cómo queda ¿no? :D
ResponderEliminarBuaah...ya te digo =D Valió la pena quedarme enfrente del ordenador toda la santa tarde
ResponderEliminarBuenas Oloman! Perdona que te moleste, pero el caso es que decidí instalar mi tienda en mi blog
ResponderEliminarhttp://reciclone.blogspot.com/2010/09/cambios.
siguiendo tus consejos
http://oloblogger.blogspot.com/2010/04/simplecart-una-tienda-online-tambien.html
Mi decepción es que si aumento la anchura del "main wrapper" en el condicional, cuando voy a mi tienda lo que queda dentro de donde antes estaba el "side wrapper" no se vé, como si, aún estuviese allí a pesar de no verse...
Me gustaría poder poner dos filas de producto en lugar de una
http://reciclone.blogspot.com/p/calcas-bh.html
Puedes ayudarme?
Muchas gracias!
Reciclone, en un principio, la forma más fácil de meter dos productos por línea es reducir el tamaño de las imágenes de cada producto a un máximo de 100px de ancho. La altura, la que corresponda proporcionalmente a la imagen original.
ResponderEliminarAparte de esto o complementariamente, el #main-wrapper lo tienes en 600px. Prueba con 750px para que se extienda en todo el hueco que dejaste al "borrar" la barra de la derecha. Quizás tengas que cambiar el ancho de algún selector más, pero desde aquí me cuesta verlo. Después de la modificación lo sabrás.
Hola Oloman, sos un grossooo! que bueno este blog.
ResponderEliminarAhora al grano. En mi blog estoy usando un codigo que me permite tener pestañas con subpestañas, pero no funciona bien cuando se entra al blog desde el "Internet explorer". Me pregunto si puedo usar esta herramienta de la cual hablas, para desactivar las subpestañas cuando alguien ingresa por "internet explorer" y asi no se vea tan feo...
Amigo estoy super pendiente de esto, si me peudes ayudar lo aplico apenas me expliques y te doy fulllllll las gracias.
Aqui esta el link de mi blog para que veas a que concretamente me refiero. http://elblogdelconsejero.blogspot.com/
Stefano, primero prueba una cosita. Añade al estilo SUBNAVBAR un z-index alto, por ejemplo z-index:500;
ResponderEliminarSi no funciona, opino que antes que poner un parche para IE quizás lo mejor es que utilices otro CSS para ese menú. En el fondo es un menú sencillo y hay muchos con el mismo aspecto que no te darán problemas. Prueba aquí: http://goo.gl/57v2e
No obstante, aquí tienes explicada la manera de condicionar cosas para IE: http://goo.gl/4OPnu
Gracias Oloman por contestar.
ResponderEliminarPero dada mi inexperiencia no logro entender el primer parrafo de tu respuesta, aunque lo demás esta muy explicito. Especificamente no logro entender como agregar cosas al estilo SUBNAVBAR, y realmente no se qué es el estilo SUBNAVBAR. No obstante supongo que te reieres al codigo que estoy usando, que al parecer utilizá una especie de cosigo ¿SUBNAVBAR? esto lo digo porque en el codigo esta palabra, se encuentra escrita.
Donde realmente me pierdo es en lo del index. No tengo idea sobre el ejemplo que me das. z-index 500? supongo que es algo que tengo que agregarle antes al codigo, pero no tengo ni idea de exactamente como escribirlo.
Al final creo que optare por lo que me recomiendas en el segundo parrafo, pero quiero entender lo que me decís en el primer parrafo.
Oloman, ya entendi. Busque Subnavbar en el codigo HTML y vi lo del z-index. No funciono, ahora voy a intentar hacer lo que me dices en el parrafo dos.
ResponderEliminarLo de insertar cosas al estilo es añadir propiedades a cada clase. En tu caso, subnavbar es una clase que sirve para dar formato a la parte principal del menú.
ResponderEliminarEn tu plantilla, exactamente lo encuentras así:
#subnavbar {
background: #ff6701;
width: 777px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
z-index:500;
}
La última línea (en negrita) es la que hay que añadir, aunque ya me has dicho que no funciona...
A la final me quede con la barra que tengo, de todas formas hoy casi todos usan google chrome. Saludos.
ResponderEliminarBien Stefano, aunque tengo que añadir que el porcentaje de usuarios que usan Chrome, creo que no llega al 50%. IE y Firefox, entre otros, todavía tienen mucha "clientela".
ResponderEliminarExcelente ayuda, pero tengo una consulta. ¿Es posible detectar la url, y según ese dato, elegir una hoja css completa?
ResponderEliminarEs decir para index -->hojaindex.css
empresas.html -->hojaempresas.css
Saludos
Si echas un vistazo a esto veras que en la condición puedes utilizar un montón de combinaciones. Para lo que planteas habría que utilizar una condición para discriminar la página Home con su estilo y otra para una página concreta con el suyo: Condiciones Blogger
EliminarTranslado mi problema a la sección correspondiente xD...
ResponderEliminarPues al final, nada...no veo que me falte nada :(
Te dejo el código HTML de la entrada en la que tengo el problema...
<b:if cond='data:blog.url == "http://seraphinprincess.blogspot.com.es/2012/07/sonic-x-episodio-52-en-los-recuerdos.html"'>
<style type='text/css'>
body{
background-image: url("http://img18.imageshack.us/img18/7696/fondoblogsonicx.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#micabecera {
width:700px; /* Ancho de la imagen */
height:350px; /* Alto de la imagen */
background:url(http://i736.photobucket.com/albums/xx3/theeyesoftheseraphin/Cabeverasonicx.jpg);
}
</style>
</b:if>
Sé que en la parte del principio no pasa nada porque las demás entradas funcionan sin problemas...el único que no funciona es este post.
Estaba pensando que a lo mejor era problema del url en sí...pero no sé :S. A ver si tú encuentras algo.
Pues a priori debería funcionar. Lo único que veo raro es esos " antes y después de la imagen de fondo. Prueba a quitarlos.
EliminarQuitados y no hay cambio.
EliminarLas entradas anteriores también tiene los " también y cambian la imagen de fondo.
Pues no se me ocurre nada más. Bueno sí, cambiar el final de la dirección .com.es por sólo .com
EliminarSupongo que se entendió que me refería a los " de la imagen de fondo y no del condicional, es decir, los de esta línea: "http://img18.imageshack.us/img18/7696/fondoblogsonicx.jpg"
¡Ahí va! ¡Pues ha funcionado! Muchas gracias...ahora he caído que eso había cambiado.
Eliminar