Distintos estilos para cada etiqueta (o autor)
03/03/2009
12
Obdemurian me planteó hace unos días la posibilidad de resaltar cada uno de sus posts con distintos estilos. El usar un estilo u otro dependería de la etiqueta que llevara cada uno de ellos.
He encontrado una manera de hacerlo, pero tiene un inconveniente: es necesario que haya una única categoría para cada post. Por tanto, este truco es sólo de aplicación para blogs con una sola etiqueta por entrada.
El caso es que la variable que conserva el nombre de cada etiqueta (data:label.name) necesita estar dentro de un bucle concreto para interpretarse: <b:loop values='data:post.labels' var='label'>. En consecuencia, si existe más de una etiqueta, el contenido del post se mostrará repetido tantas veces como etiquetas existan.
Lo bueno del caso es que con la misma idea, sí que se pueden mostrar sin ningún inconveniente, distintos estilos para post redactados por distintos autores. Esto parece especialmente útil para los blogs colectivos.
Para ambas variantes, hay que localizar (expandiendo artilugios) la parte de código que muestra el contenido de cada post y que es <p><data:post.body/></p>. Una vez encontrado, se sustituye por lo siguiente:
* Estilo según etiquetas:
* Estilo según autores:
Lo que hemos hecho ha sido asignar una clase al contenido de cada entrada. La clase tendrá como nombre, el de la etiqueta del post en el primer caso y el del autor en el segundo.
Por tanto, ahora lo que toca es crear los distintos estilos para todos nuestros nombres. Para ello, localizamos la parte de CSS que es la que está antes de ]]></b:skin> y justo antes, creamos las clases necesarias con el estilo que se quiera. Si vamos a trabajar con etiquetas, creamos tantas clases como etiquetas distintas tengamos. Una definición para cada uno de los nombres de nuestras categorías. Idem si vamos a aplicarlo a los autores. Por ejemplo:
Los nombres de las clases Autor1, Autor2, Autor3, etc. hay que cambiarlos por los nombres con que aparecen los distintos autores de vuestro blog.
Si vais a cambiar el estilo según etiquetas, entonces habrá que cambiarlos por las que tengais vosotros. En el caso de este blog: Artilugios, Blogger, CSS, etc.
He encontrado una manera de hacerlo, pero tiene un inconveniente: es necesario que haya una única categoría para cada post. Por tanto, este truco es sólo de aplicación para blogs con una sola etiqueta por entrada.
El caso es que la variable que conserva el nombre de cada etiqueta (data:label.name) necesita estar dentro de un bucle concreto para interpretarse: <b:loop values='data:post.labels' var='label'>. En consecuencia, si existe más de una etiqueta, el contenido del post se mostrará repetido tantas veces como etiquetas existan.
Lo bueno del caso es que con la misma idea, sí que se pueden mostrar sin ningún inconveniente, distintos estilos para post redactados por distintos autores. Esto parece especialmente útil para los blogs colectivos.
Para ambas variantes, hay que localizar (expandiendo artilugios) la parte de código que muestra el contenido de cada post y que es <p><data:post.body/></p>. Una vez encontrado, se sustituye por lo siguiente:
* Estilo según etiquetas:
<p><b:loop values='data:post.labels' var='label'><span expr:class='data:label.name'><data:post.body/></span></b:loop></p>
* Estilo según autores:
<p><span expr:class='data:post.author'><data:post.body/></span></p>
Lo que hemos hecho ha sido asignar una clase al contenido de cada entrada. La clase tendrá como nombre, el de la etiqueta del post en el primer caso y el del autor en el segundo.
Por tanto, ahora lo que toca es crear los distintos estilos para todos nuestros nombres. Para ello, localizamos la parte de CSS que es la que está antes de ]]></b:skin> y justo antes, creamos las clases necesarias con el estilo que se quiera. Si vamos a trabajar con etiquetas, creamos tantas clases como etiquetas distintas tengamos. Una definición para cada uno de los nombres de nuestras categorías. Idem si vamos a aplicarlo a los autores. Por ejemplo:
.autor1 {color:#990000;font-family:Trebuchet;background:#FFFF99;}
.autor2 {color:#3366FF;font-style:italic;background:none;}
.autor3 {color:#000000;font-weight:bold;background:#999999;font-family:courier new;border:1px dashed #000000;}
etc.
.autor2 {color:#3366FF;font-style:italic;background:none;}
.autor3 {color:#000000;font-weight:bold;background:#999999;font-family:courier new;border:1px dashed #000000;}
etc.
MI BLOG
LOREM IPSUM
Publicado por Autor1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
Publicado por Autor1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
IPSUM LOREM
Publicado por Autor2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
Publicado por Autor2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
LOREM IPSUM LOREM IPSUM
Publicado por Autor3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
Publicado por Autor3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum dui eu nibh. Phasellus non lorem vel nunc lacinia fringilla. Mauris tincidunt enim a quam. Nullam consectetur nisi sit amet sapien vehicula lobortis. Nullam eu nisi. Aenean sem dolor, feugiat eu, eleifend sit amet, ultricies eget, odio.
Los nombres de las clases Autor1, Autor2, Autor3, etc. hay que cambiarlos por los nombres con que aparecen los distintos autores de vuestro blog.
Si vais a cambiar el estilo según etiquetas, entonces habrá que cambiarlos por las que tengais vosotros. En el caso de este blog: Artilugios, Blogger, CSS, etc.
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
12 comentarios:
Muchas gracias por el post, lo aplicaré de inmediato. Para no deshacerme de todas etiquetas lo que haré será crear varias cuentas para mi y postear con una identidad u otra en función del aspecto que quiera.
Me surje una pregunta.¿Se podría modificar ese bucle para que lo abandone tras leer la primera etiqueta? Con el fin de que se identifique el post con la clase asignada a la primera etiqueta. Si es posible, se me ocurre que así se podrían tener varios estilos según la primera etiqueta sin renunciar a extensas nubes de etiquetas.
POr mi parte investigaré a ver que averiguo, si logro una solución, la dejaré aquí para que todos puedan usarla.
Una vez más muchas gracias.
Hola oloblogger. Me acabo de registar para leer tu blog, pues soy novata en esto y creo que eres de gran ayuda. Y es eso lo que te voy a pedir ahora.
Resulta que tengo un blog, pero desde hace algún tiempo solo me escribe en negro, he ido preguntando y me han dicho que en diseño, plantillas....pero resulta que donde tienen que estar el tipo de letra y el color, me aparece en blanco. ¿Cómo puedo solucionarlo? Gracias.
Hola Anchama. Si no me equivoco, no tienes una clase específica para la letra del contenido del post. Así que el sitio donde tienes que cambiar el color es en el BODY.
body {
background: #fdfdfd url(http://img264.imageshack.us/img264/327/bodybgdx3.jpg) top repeat-x;
color:#000;
margin:0;
padding:0;
}
Cambia el #000 por el color que desees y ya me cuentas.
Blog muy bueno, felicidades.
Una consulta, tengo un problema con la plantilla uno de los blog del equipo, el 1º post siempre aparece con un gran hueco, pongas lo que pongas, da igual texto o imagenes, es este: http://urbatigeriketa.blogspot.com/
no se como solucionarlo ya que queda muy feo....
gracias antes de nada
Hola Urbat Wp.
1ª Opción: Puede que la segunda barra lateral, tenga algún artilugio que ocupe ancho de más. Es curioso que lo que ocupa de larga esa barra, es aproximadamente el espacio que te deja en el post. Para probar, simplemente traslada los gadgets a la primera sidebar a ver si alguno de ellos es la causa.
2ª Opción: He visto en tu código fuente una anotación sobre anuncios Adsense antes de los posts. Realmente no se ve, pero en tu plantilla puede que haya algo que provoque el hueco, aunque no sea visible el anuncio.
3ª Opción: Desde Elementos de Página, comprueba que no hay ningún gadget montado justo encima de las entradas.
4º Opción: He visto una clase llamada SEPARATOR, que no aparece en el CSS visible por mí. Compruébala, porque sólo sale en el primer post.
5º Opción... Hmmm No se me ocurre nada más sin tener acceso a tu plantilla.
Gracias por contestarme tan rapido
parece que es la opcion 1 al poner todos en el la 1ª o 2ª barra el espacio aumenta si los quito todos desaparece, pero queda muy sosa, se te ocurre alguna forma de solucionarlo....
No tengo adsense puesto o eso creo, y ningun gadget sobre las entradas, no lo permite la plantilla solo en las dos barras de la izquierda permite añadir gadgets.
Lo del SEPARATOR no se donde buscarlo....
Un saludo
¿Has probado a eliminar los gadgets de la columna más a la derecha, sin pasarlos al otro sitio? Si no quieres perder los códigos correspondientes, cópialos en el bloc de notas o similar. Me da la impresión de que es el de arriba del todo, el que anuncia lo de las fotos.
Si no es así, envíame una copia de seguridad de tu plantilla al e-mail de la barra lateral.
Saludos
Si los puse todos abajo del todo y asi se veia correcto el primer post, he probado uno a uno y ocurre lo mismo solo si los quito todos se ve correcto...
Ahora mismo lo he quitado (el de las fotos) y idem
El código es correcto, porque además de lo que ya había visto, he montado la plantilla en un blog de prueba (http://cosicasdeprueba.blogspot.com) y no da el menor problema. Para mí todo esta bien.
Está claro que se trata de uno de tus gadgets y puedes descartar (están bien) el directorio, y lod links. Si las imágenes de la parte de arriba de cada columna las añadistes con el gadget IMAGEN, lo más seguro es que también estén bien.
Si no encuentras el problema, traslada todos, de ambas columnas y ve incorporándolos uno a uno hasta que descubras el "defectuoso". Empieza por los que te comento que están bien.
Suerte.
Hola otra vez
Ya he quitado todo menos los links y el directorio y sigue igual, creo que lo mejor sera buscar otra plantilla parecida y cambiarla, ya que no doy con el error.
Un saludo y muchas gracias por todas las molestias ocasionadas.
Acabo de ver que ya la has cambiado. De todas formas, el menú de esta es mucho mejor que la otra. Me ha gustado.
keda mas sencillo, pero si pongo algo se desplaza para abajo, espero tener tiempo este puente y buscar alguna plantilla nueva.
un saludo
PUBLICAR UN COMENTARIO