Para establecer estilos diferenciados en cierto tipo de páginas, en Blogger podemos usar los códigos condicionales ya que todo aquello que se encuentre dentro de esa condición, sólo se ejecutará si esta se cumple. Por ejemplo, si quisiéramos que el color de fondo del blog fuera rojo cuando se muestra una página estática, pondríamos algo así:<b:if cond='data:blog.pageType != &:quot;static_page&:quot;'>
<style>
body {background-color:red;}
</style>
</b:if>Pero hay cierto tipo de páginas un poco más complejas de diferenciar ya que no hay condiciones exactas. Por ejemplo, las páginas de etiquetas que son de tipo index al igual que muchos otros tipo de páginas incluyendo el home.
Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.
¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:
Una alternativa para reconocer este tipo de páginas es usar los selectores condicionales de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.
¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:
a {color:green:}y quisiéramos que aquellos tienen el atributo target="_blank" fueran de color amarillo; agregaríamos lo siguiente, con o sin la palabra !important:
a[target="_blank"] { {color: yellow !important;}¿Y si quisiéramos algo más genérico como diferenciar el color de los enlaces internos de los enlaces externos? En ese caso podríamos usar el atributo href que es el que contiene la dirección url y un "comodín" (el caracter asterisco) para que la regla se aplique a cualquier enlace que contenga parte de nuestra dirección. En el caso de este blog, podría ser algo así:
a[href*="vagabundia.blogspot.com"] { {color: yellow !important;}la sintaxis en general es:
[atributo*="dato"]
Donde el comodín hace que se aplique a cualquier atributo cuyo contenido contenga el dato total o parcialmente.
Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.
Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:
Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.
Se me ocurre que lo más sencillo es colocarlo en la etiqueta body que normalmente dice esto:
<body>
o esto:
<body expr:class='"loading" + data:blog.mobileClass'>o cualquier cosa similar, no tiene importancia, basta que allí agreguemos un atributo extra como rel y la url de la página que obtenemos de los datos del mismo Blogger:
<body expr:rel='data:blog.canonicalUrl' .......
Hecho eso, nada cambiará así que ahora crearemos las reglas que se nos ocurran ya que sabemos que ese atributo contendrá algo así cuando estemos en una página de etiquetas:
rel="http://miblog.com/search/label/nombre_etiqueta"Suponiendo que quisiera que las páginas de etiquetas Google de este blog tuvieran un color de fondo rojo, la regla sería:
body[rel*="label/Google"] {background: red;}Y si quisiera cambiar el título de los posts:
body[rel*="label/Google"] .post-title { ....... acá las propiedades ....... }y el header:
body[rel*="label/Google"] #header-wrapper { ....... acá las propiedades ....... }Aplicando after y before también podemos agregar "contenido".
Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:
Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:
body[rel*="label/Google"] #header-wrapper {position: relative;}
body[rel*="label/Google"] #header-wrapper:after {
content: url(url_imagen);
position: absolute;
right: 20rpx;
top: 20px;
}En resumen, a partir del primer selector, puedo acceder a cualquier etiqueta, id o clase interna y definir reglas exactas que se apliquen en ciertas condiciones.
Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.
El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).
Entonces, haremos eso, buscaremos:
Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los posts según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.
El segundo problema es que allí podemos leer las etiquetas del post pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).
Entonces, haremos eso, buscaremos:
<b:includable id='post' var='post'>
y veremos que la siguiente linea dice algo como esto o similar:
<div class='post hentry uncustomized-post-template'>
Debajo, pondremos lo siguiente:
<b:if cond='data:blog.pageType != "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<script type='text/javascript'>
var postetiqueta='<data:label.name/>';
</script>
</b:if>
</b:loop>
<!-- con eso, tenemos el nombre de la última etiqueta (si es que el post tiene varias) guardada en una variable -->
<script type='text/javascript'>
// agregamos el atributo rel con el nombre en la etiqueta body
document.body.setAttribute('rel',postetiqueta);
</script>
</b:if>Y si usamos jQuery podemos reemplazar document.body.setAttribute() por:
$('body').attr('rel',postetiqueta);
De acá en más, en las páginas individuales, la etiqueta body tendrá un atributo rel cuyo valor es el nombre de la etiqueta de la entrada así que, con un criterio similar al comentado inicialmente, podemos usar selectores y definir estilos particulares para esas entradas aunque, en este caso, no necesitamos el comodín.
En este ejemplo algunas de sus reglas son estas:
En este ejemplo algunas de sus reglas son estas:
<style>
body[rel="rojo"] #header-wrapper {display: none;}
body[rel="rojo"] #sidebar-wrapper {display: none;}
body[rel="rojo"] #main-wrapper {width: 100%;}
body[rel="rojo"] {background: #800;}
body[rel="rojo"] .post-title a { ....... propiedades ....... }
body[rel="rojo"] .post-body { ....... propiedades ....... }
</style>Lo mismo ocurre con otra entrada; simplemente, cambian las reglas:
body[rel="azul"] {background: #79B;}
7 comentarios:
muy buen post, me sirvio de mucho, y me serviria para crear nuevas plantillas
saludos
encuentra los moviles android, economicos, y de ultima generacion
Try this:
<body expr:data-tag='data:blog.searchLabel'>
<style>
body[data-tag="Google"] {color:red}
</style>
Yes. It's a good idea for label pages.
Oye y para Sript como le hago solo pusistes para cambiar cualquier tipo con css pero nose como con scrip ocultar un scrip por fa ayudame :D
No se entiende la pregunta. Los sripts no se pueden "ocultar" ya que no son elementos visibles. Son códigos que se cargan y ejecutan algo.
Estimado Vagabundia,
Le escribo para robar un poco de su tiempo, en hacerle 2 consultas.
La primera es saber si existe la posibilidad de crear más de 20 páginas en blogger, si se pudiera hacer ¿cómo se hace?
La segunda pregunta es saber si existe la posibilidad de poder ocultar una o algunas entradas para que no aparezcan en la portada del blog, pero que si aparezcan en la etiqueta a la cual la adjunte.
De atenmano muchas gracias por cualquier ayuda.
Lo primero lo desconozco. Por la web hay algunos trucos que solían hablar del tema pero, no sé si funcionan y no recomendaría usarlos.
En cuanto a lo segundo, tal vez si colocas algún filtro en el loop de Blogger pero tampoco lo recomendaría.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...