Distintos estilos para cada etiqueta (o autor) | Oloblogger 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 depend...

3 de marzo de 2009

Distintos estilos para cada etiqueta (o autor)

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:

<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.


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.

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.

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.



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.

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

14 comentarios :

  1. 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.

    ResponderEliminar
  2. 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.

    ResponderEliminar
  3. 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.

    ResponderEliminar
  4. 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

    ResponderEliminar
  5. 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.

    ResponderEliminar
  6. 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

    ResponderEliminar
  7. ¿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

    ResponderEliminar
  8. 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

    ResponderEliminar
  9. 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.

    ResponderEliminar
  10. 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.

    ResponderEliminar
  11. Acabo de ver que ya la has cambiado. De todas formas, el menú de esta es mucho mejor que la otra. Me ha gustado.

    ResponderEliminar
  12. keda mas sencillo, pero si pongo algo se desplaza para abajo, espero tener tiempo este puente y buscar alguna plantilla nueva.

    un saludo

    ResponderEliminar
  13. Hola tengo un blog sobre libros, y algunas escritoras tienen series, como puedo hacer para que salga el nombre de la escritora y luego el nombre de las series , si que tenga que hacer una etiqueta cada vez??

    nombre de escritora: nombre de serie
    nombre de saga
    sueltos

    ResponderEliminar
    Respuestas
    1. La solución es usar más de una etiqueta por entrada.

      Por ejemplo, Monica McCarty (Clan Cambell). Todos los posts de Monica McCarty deberían llevar la etiqueta de la autora "Monica McCarty". Adicionalmente, los de la serie Clan Cambell, deberían llevar además la etiqeuta "Clan Cambell".

      Si luego en tu lista de autores/as no quieres que salga Clan Cambell, pues editas el gadget y deseleccionas a mano esa etiqueta.

      Esa es la mejor solución que se me ocurre.

      Eliminar