La pregunta concreta era ¿se pueden etiquetar posts desactualizados? Y la respuesta rápida es sí, claro, cualquier etiqueta es válida. Hasta ahí no hay problemas pero podemos hacer un poco más que eso, podemos crear alguna clase de advertencia visual que indique que cierta entrada es vieja y su contenido debería ser tomado como una referencia dudosa ya que muchas cosas pueden haber cambaido desde que fue escrita hasta el presente.

En realidad, lo mismo podemos hacer con cualquier post al que se le haya colocado una determinada etiqueta y queremos mostrarlo de una manera diferente al resto de las entradas.

Una forma de hace eso es buscar esta parte que es más o menos estandard y que solemos encontrarla en el footer de los posts
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
Eso que se encuentra entre <b:loop ... > y </b:loop> es un bucle. Blogger lee cada una de las etiquetas del post y crea el código HTML del enlace con sus nombres (data:label.name) separados por comas.

Entonces, dentro de ese bucle, podemos agregarle condiciones de cualquier tipo que detecten si el post está identificado con alguna etiqueta en particular:
<b:if cond='data:label.name = &quot;nombre_etiqueta&quot;'>
... aquí hacemos algo ...
</b:if>
Para que este sistema funcione bien, debo identificar a los posts uno por uno mediante unatributo ID así que, en este ejemplo, he buscado esto:
<div class='post-body entry-content'>
Y lo he cambiado por esto:
<div class='post-body entry-content' expr:id='data:post.id'>
No importa mucho si la clase tiene otro nombre, sólo importa agregar eso resaltado que no hará otra cosa que identificar el contendio de cada entrada usando el número único que le otorga Blogger.

Supongamos entonces que a ciertas entradas les agrego la etiqueta desactualizado y quiero que esas entradas se muestren con un estilo diferenciado. Usaré un script y un CSS especial para marcarlos. Por ejemplo, crearé una clase llamada postViejo y colocaré lo siguiente antes de </head>:
<style type='text/css'>
/* coloco propiedades específicas para esos posts */
.postViejo {
background: transparent url(URL_imagen) no-repeat 50% 50%;
color: #678;
font-size: 14px;
line-height: 1.4em;
padding: 70px 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function postsViejos(cual) { document.getElementById(cual).className='postViejo'; }
//]]>
</script>
Ya tengo un estilo especial y una función que escribirá el atributo class en una etiqueta determianda; ahora, faltaría llamar a la función así que le agrego el condicional al bucle citado al principio:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;desactualizado&quot;'>
<script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
</b:if> <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop> </b:if> </span>
Lo mismo podría hacerse con cualquier otra etiqueta. Por ejemplo, si uso una etiqueta llamada imagen, podría agregarle algo similar. Necesitaría otra clase CSS que añadiré al estilo anterior y que puede ser todo lo compleja que se quiera:
.postImagen {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #432, inset -10px -10px 25px #432;
background-color: #101921;
margin: 70px auto;
padding: 40px;0;
text-align: center;
width: 450px;
}
.postImagen img {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #765, inset -10px -10px 25px #765;
border: none !important;
padding: 20px !important;
}
Y también otra función que coloco dentro de la misma etiqueta script:
function postsImagenes(cual) {
document.getElementById(cual).className='postImagen';
}
Y el bucle ahora tendrá otra condición más:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;desactualizado&quot;'>
<script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.name == &quot;imagen&quot;'>
<script type='text/javascript'> postsImagenes(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

41 comentarios:

Claudio - Poca Tinta  

¡Interesante!

Dejas abiertas muchas opciones... y después decimos que blogger no es funcional :D

Me parece genial Master, por allí veré como aplicarlo.

Gracias

Responder
JMiur  

Sí, es cierto, no he experimentado conel tema pero creo que podrían lograrse cosas interesantes para entradas especiales :)

Responder
egoloco  

Hola JMuir. A ver si me podés ayudar, porque me parece que estoy divagando un poco. Después de seguir varios post tuyos sobre los códigos raros que nuestro "Dios" Blogger nos deja y después de ver varias veces el código fuente de mi blog creo que encontré la solución para personalizar el formulario de comentarios sobreescribiendo estilos.
Según dijiste, el formulario está colocado mediante un IFRAME y que es un poco complicado recotarlo, pero a ver si esta idea ayuda...

En el código nosotros tenemos esto:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

En el código fuente en ese "href" aparece esta dirección seguido del ID del blog y del post: http://www.blogger.com/comment-iframe.g

Ese es el código del IFRAME... podemos personaliar algo?

Responder
Gem@  

Pues si no recuerdo mal hace tiempo se hizo algo muy parecido (quiero decir que hiciste, yo sólo me limité a observar) se trataba de añadir un estilo distinto a cada entrada según la etiqueta y también hacer que el post con esa etiqueta no apareciera en la página principal.

-Experimentaste al mismo tiempo con los estilos de borde, están geniales :)

Responder
Bocha  

JMiur, tengo una duda...

En este post: http://abrancancha-ac.blogspot.com/2010/01/quien-sera-el-arquero-del-mundial.html coloco este codigo: HR (el cual va entre estas comillas ><)y lo hice para que se vea una linea que divida. Esa linea es de color gris y me gustaria poder editarla, como hago??

Si no se puede, me gustaria que me aconsejaras que otra cosa puedo poner dentro de un post para dividir. Saludos.

Responder
JMiur  

Cualquier etiqueta admite estilos CSS así que bastaría colocarlos; por ejemplo:

<hr style="color:red;">

Pueden usarse propiedades como border, width, height, etc.

Responder
JMiur  

Gem@:
No me acuerdo pero, puede ser :D Uno se repite a si mismo todo el tiempo :D

Sí, ahí jugué un ratito con los bordes, las sombras son realmente muy interesantes para eso y se puden conseguir efectos increibles de manera sencilla.

Responder
Unknown  

Viste que decirle maestro a alguien, por ahí es demasiado, no te gusta ir a clase ;) ...bueno entonces te llamamos destripador -no el Jack-,

Sigue así Jmiur :P

Responder
Oloman  

Lo cierto es que se puede jugar mucho aplicando etiquetas "especiales" para posts "especiales" que debieran tener un estilo "especial": desactualizados, miniposts, destacados, audios, vídeos, citas,... realmente sirve para cualquier contenido que se quiera diferenciar.

Genial, como siempre.

Responder
egoloco  

Bueno el código que te decía en el comentario anterior está acá.

Qué se puede hacer a partir de ésto?

Responder
JMiur  

egoloco:
No había visto el comentario anterior.

Por decirlo de alguna manera, un IFRAME es una ventana que nosotros abrimos a otro sitio web. Podemos decir de que tamaño será o si tendrá un borde o si estará centrada pero, en principio, no podemos modificar su contenido.

Oloman:
Creo lo mismo, que puede servir para desarrollar alguna cosa diferente o jugar con esa idea. Imagino que también debe haber algún otro método para hacer eso; lo ideal sería detectar la etiqueta antes de mostrar el post y no despupés pero, no veo cómo.

Graciela: ¿Destripador? bueno, no me molesta :D

Responder
Ikanus  

Hola JMiur: ¿este codigo puede utilizarse para mostrar ciertas partes del post segun la etiqueta? Por ejemplo, segun la etiqueta ocultar o no un anuncio. ¿Es posible?

Responder
JMiur  

Si, podría hacerse. Así en general, bastaría identificar esos anuncons con algún ID y condicionar el estilo con display:none.

Responder
VozMadridista  

Mi problema es el siguiente: estamos armando un blog con varios colaboradores y queremos que las entradas de cada escritor vengan precedidas de su foto pequeña (más o menos como la de Beckham en este post. Lo que no queremos es tener que poner la foto cada vez que un colaborador sube un post. ¿Hay manera de hacer esto? También veo mucho el asunto de los banner animados actualizables con over text como en este template. Entiendo que para eso es encesario ejecutar ciertos scripts que no pueden subirse a blogger y deben ser externos: ¿tienes algún post sobre cómo operar este tipo de scripts? ¿Lugares donde hospedarlos? ¿Cómo automatizar las actualizaciones? etc. TAgradezco de antemano tu atención y gentil respuesta a esta inquietud.

Responder
JMiur  

Para imágenes de varios autores, podrías ver esta entrada de Oloblogger.

Efectivamente, esa plantilla usa una serie de scripts. mootools jd.gallery.js jd.gallery.transitions.js etc etc. Para ver las alternativas del uso de scripts, fíjate en esta entrada. En resumen, pueden usarse las API de google, alojarlos en un servidor o agregarlos directamente en la plantilla; en ningún caso hay actualizaciones automáticas; tampoco sería bueno que existiera ese tipo de actualizaciones.

Responder
VozMadridista  

Grandioso!!! Lo de las fotos de los autores funciona como la gloria. Sigo sin tener muy claro todo el asunto del alojamiento de los scripts. Iré probando a ver si me apaño. Muchísimas gracias. Eres un Crack!

Responder
JMiur  

Hay que agradecer a Oloblogger que hizo la entrada :-)

Responder
VozMadridista  

El mérito de encontrar a Oloblogger y compartir el descubrimiento también es de agradecer. Ya que estamos, abuso de tu confianza y te pregunto si, en un blog multiautor, hay alguna manera de seleccionar los posts por Autor al modo en que se seleccionan por etiquetas, pero sin crear una etiqueta por cada autor. Por ejemplo, si yo quiero asignar un link a un botón que me lleve a todos los artículos relacionados con un label determinado (en este caso "tecnología"), escribo lo siguiente "href='http://nombredelblog.blogspot.com/search/label/tecnologia' title='TECNOLOGIA'>TECNOLOGIA" usando los consabidos tag markers "< a >" y < / a >", para abrir y cerrar el comando. Existe algo parecido que en lugar de usar "label" use "author" o algo así? Gracias por tu paciencia.

Responder
JMiur  

Eso lo desconozco. No recuerdo haber visto nunca una URL que indicara al autor que es lo que se necesitaría para mostrar algo así.

Responder
Ark  

Jmiur@ Estoy en un pequeño apuro con el diseño del blog...

Estoy condicionando una etiqueta "Noticias" para que los post que la lleven presenten un aspecto diferente en la pagina principal.

Pese a que estoy haciendo progresos estoy teniendo porblemas a la hora de usar los condicionales.

Ya que cuando trato de añadir parámetros a esa etiqueta específica para modificarselos exclusivamente a ella...

.PostNoticias{ (((este sería el equivalente a tu: .postViejo {))) y se modifica sin ningún problema el cuerpo de la entrada

.jump-link { lo añado y lo modifico, pero altera tb el resto de post, aunque no tengan la etiqueta Noticias.
.post h3.post-title. ------ igual, cuando lo modifico para Noticias afecta al resto de post.
.post-author ------- mas de lo mismo....
.lafecha


Te dejo la dirección del blog de pruebas, por si te apetece echar un vistazo y darme tu opinión....


http://anothergames3.blogspot.com/

Responder
JMiur  

Si estás colocando un diseño particular con reglas de estoilo particulares para un cierto sector, como ese al que llamas PostNoticias, el contenido debe seguir la misma estructiura de reglas:

.PostNoticias {}
.PostNoticias .jump-link {}
.PostNoticias .post h3.post-title {}
.PostNoticias .post-author {}
.PostNoticias .lafecha {}

Responder
Ark  

(((joder))) Que sencillo y yo probando las cosas mas enrevesadas que te puedas imaginar. Ahora es tarde ya pero mañana recupero una copia de seguridad de la plantilla y dejo los post de noticias oompletamente terminados.

Gracias de verdad, por la ayuda... Unos meses mas de códigos, de diseños y de ideas y tendremos la gran inauguración. Está usted por supuesto invitado.

Responder
JMiur  

Suerte Ark :D

Responder
Ark  

Casi he acabado el diseño de la sección de Noticias breves que llevará la plantilla nueva....

Si te sobra tiempo échale un vistazo, estoy muy orgulloso de los resultados...

Tu blog me esta resultando de ayuda capital.... a la hora de inspirarme.

Responder
Unknown  

Hola como estas?
Tengo una duda, como se puede hacer para que las etiquetas se oculten el la pagina principal y solo se vean cuando se habré el post?
Si es que se puede, porque yo logre que solo se vea en el primer post y en los demas solo se ve si los habres. Pero no pude hacer que en el primero no se vea.
Desde ya muchas gracias.
Un abrazo.
Bye bye.-

Responder
JMiur  

MaX:
Eso depende mucho de como está diagramada la plantilla; por un lado, puedes buscar el código que las muestra y condicionarlo de este modo:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
..... el código que las muestra
<b:if/>

También puedes ocultarlas con CSS si es que el blog usa las mismas clases que Blogger agrega por defecto, poniendo esto antes de </head>:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-labels {display:none;}
</style>
<b:if/>

Responder
Unknown  

Te la mando por mail la plantilla a ver si me podes dar una mano.
Desde ya muchas garcias.

Responder
JMiur  

¿Por que no colocas el estilo como te indiqué y te fijas el resultado?

Responder
Unknown  

Porque cuando lo coloco me marca un error en la plantilla a la hora de guardar.
Baje una plantilla media rara y esta diferente a las demas que habia utilizado antes, por eso es que me hice mucho quilombo.

Responder
JMiur  

Copio otra vez por que B:IF saló al revés, no es <b:if/> sino </b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-labels {display:none;}
</style>
<b:if/>

Responder
Unknown  

IDOLO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
SOS UN CAPO!!!!!!!!!!!!!
ME QUEDO RE BIEN AHORA!!!!!!!
ES COMO QUERIA!!!!!!
TE LO RE AGRADEZCO!
UN ABRAZO LOCO Y MUCHISIMAS GRACIAS!!!!!!!!

Responder
Ariane  

tenho tentado, nos últimos (muitos!) dias, usar este hack em um dos meus blogs de testes e...nada :( penso que talvez isso se deva as várias modificações que já fiz nele, não sei. Sei que sigo todos os passos e nada resulta. este é um dos posts com a tag que pretendo modificar (coloquei um background:#000): http://testesvariadostnb.blogspot.com/2011/08/sed-sagittis-congue.html
Será que você conseguiria perceber onde estou errando?

Responder
Ariane  

JMiur, por favor ignore o comentário anterior, acabei de perceber meu erro :o (depois de tantos dias, parece inacreditável!).

Responder
JMiur  

Pués, es algo que nos pasa a todos :-)

Responder
juanreina  

Hola JMiur, como veras soy un asiduo a tu blog, lo que he aprendido ha sido por tus magnificos posts.

Me ha funcionado este truco y se me ocurre algo que no se si se podra hacer.

Estaria bien poder personalizar toda la pagina de las entradas de una etiqueta especifica, es decir, por ejemplo que el fondo del blog sea gris y en las entradas de la etiqueta "lo que sea" se vea azul.

¿Se podria hacer esto?

Un abrazo.

Responder
JMiur  

No sería sencillo porque Blogger no nos dice si una página es de etiquetas o no lo es, son un tipo de página quetambién incluye otras como los archivos.

Para colmo, no te sería sencillo saber cuál es la etiqueta. Las condiciones creo que serían algo así:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageName != &quot;&quot;'>

esta es una página de etiquetas
y el nombre la la etiqueta debería estar en <data:blog.pageName/>
así que recién acá adentro deberías empezar a condicionar los estilos con algo como:

<b:if cond='data:blog.pageName == &quot;ETIQUETA 1&quot;'>
<style> .......... </style>
</b:if>
<b:if cond='data:blog.pageName == &quot;ETIQUETA 2&quot;'>
<style> .......... </style>
</b:if>

toma todo esto entre comillas :D

</b:if>
</b:if>
</b:if>
</b:if>

Responder
juanreina  

Gracias por todo JMiur, ire probando esto que me dices con paciencia y si saco algo en claro ya te aviso.

Gracias de nuevo por tu enorme trabajo.

Saludos.

Responder
JMiur  

Suerte, Juan.

Responder
josepartengo  

Como puedo hacer esto que dices, pero que salga un icono en una esquina de la entrada sólo en la página principal del blog, como este blog: http://usemoslinux.blogspot.com/
Osea, que cuando en una entrada pongo tal etiqueta en una esquina del blog me salga la imagen que yo he decidido que salga cuando ponga esa etiqueta en la entrada, pero sólo en la página principal.

JMiur  

Si usas un script para resumir las entradas, el dato de la etiqueta está en el feed y puede ser leido. En ese caso, habrá que armar algún array con la lista de etiquetas y asignarles una imagen a cada una de ellas.

Responder
nightcrawler23  

no se si mi comentario anterior salio o no pero quiero saber si puedo hacer algo asi en mi blog de peliculas idenificando las miniaturas de las que estan en latino, las que son dvd9 , etc con alguna franja de color o algo similar...

Responder

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

 
CERRAR