JMiur [E]

Esta es una respuesta a una pregunta de Samuel Rego que quiere hacer algo que tal vez no usemos todos los dias pero que creo que puede servir como idea genérica y ver hasta donde es posible manipular los códigos condicionales de Blogger.

Lo que desea hacer es que un widget específico se muestre en tres entradas y sólo en esas tres entradas de su blog.

La solución es, tal como lo intentó, anidar las condiciones, es decir, poner una dentro de la otra; eso puede lograrse, sólo se requiere paciencia pero, aún cuando se consiga, se encontrará con un problema; deberá repetir TODO el código tres veces o crear tres widgets diferentes lo cual es, como mínimo, engorroso así que la idea es ver si es posible simplificarlo.


Condicionar un post es sencillo, basta saber la URL de ese post y utilizar esta condición:
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
.......
....... aquí colocaremos el código a ejecutar .......
.......
</b:if>
Si lo que debemos condicionar son dos posts, haríamos esto:
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
.......
....... aquí colocaremos el código a ejecutar .......
.......
<b:else/>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
.......
....... aquí colocaremos el código a ejecutar por segunda vez .......
.......
</b:if>
</b:if>
Y si tuviéramos que condicionar tres posts, esto:
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
.......
....... aquí colocaremos el código a ejecutar .......
.......
<b:else/>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
.......
....... aquí colocaremos el código a ejecutar por segunda vez .......
.......
<b:else/>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada3.html&quot;'>
.......
....... y aquí colocaremos el código a ejecutar POR TERCERA VEZ.......
.......
</b:if>
</b:if>
</b:if>
Si el código a ejectuar es corto, es molesto repetirlo pero si es largo es un infierno y lo más probable es que nos equivoquemos; además, la plantilla se medirá por metros.

Como las condiciones no pueden modificarse ya que no hay códigos que nos permitan simplificarlas, lo que podemos hacer es reducir ese código a ejecutar para no tener que escribirlo tres veces y eso sí es algo que Blogger nos permite porque tiene una instrucción específica llamada include que es la clave de todo esto; su sintaxis elemental es esta:
<b:include name='miContenido'/>
donde el nombre (name) que le damos, debe ser único e irrepetible.

Lo que hace esto es INCLUIR cierto código que se encuentra en el mismo widget, un código que puede ser cualquier contenido y que debe estar colocado en una etiqueta especial llamada includable:
<b:includable id='miContenido'>
el ID es igual al nombre que que usamos en include.

Traducido al español
<b:include name='miContenido'/> leerá e incluirá el contenido de <b:includable id='miContenido'> en alguna parte del widget.

Todo widget de Blogger tiene, como mínimo, una etiqueta includable cuyo ID es siempre el mismo, se llama main:
<b:includable id='main'>
.......
</b:includable>
Es la parte principal del widget, la que manda, la que se ejecuta; desde ella, se pueden incluir otras así que lo que debemos hacer es partir nuestro widget en dos. Vamos a un ejemplo práctico. Agrego un elemento HTML, le doy un nombre y luego, lo busco en la plantilla expandiendo los artilugios; me encontraré con esto:
<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

</b:widget>
Sólo tiene un includable ya que es simple; voy a agregarle otro, pondré todo el código en ese nuevo y lo cargaré con include:
<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
<b:include name='franki'/>
</b:includable>

<b:includable id='franki'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

</b:widget>
Si guardo y miro el blog, no habrá cambios, ambos códigos hacen exactamente lo mismo.

Ahora, entonces, podemos condicionar los tres posts con las limitaciones del caso pero, sin repetir el código de los contenidos:
<b:widget id='HTML6' locked='false' title='FRANKI' type='HTML'>

<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada1.html&quot;'>
<b:include name='franki'/>
<b:else/>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada2.html&quot;'>
<b:include name='franki'/>
<b:else/>
<b:if cond='data:blog.url == &quot;http://misitio.blogspot.com/2010/04/entrada3.html&quot;'>
<b:include name='franki'/>
</b:if>
</b:if>
</b:if>
</b:includable>

<b:includable id='franki'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>

</b:widget>
Esto es lo que se puede ver en el mismo demo online si se navega y accede a estas tres entradas: 1 | 2 | 3. En ellas, se verá en la sidebar la cara del amigo Franki que no se verá en ninguna otra página.


Un detalle que también me preguntaban es más difícil de contestar en general ya que mucho depende de las plantillas. El tema es que muchas veces, al ocultar el contenido de un widget o condicionarlo, una parte de él se sigue viendo. Esto suele pasar si los elementos tienen algún tipo de propiedad CSS tal como margin o padding que hace que una etiqueta tenga una dimensión aún cuando no tenga contenido; lo mismo ocurre si tienen un borde o algún otro elemento gráfico que genere una altura.

La plantilla Mínima, por ejemplo, tiene una definición como esta:
sidebar .widget, .main .widget {
border-bottom: 1px solid $bordercolor;
margin: 0 0 0.5em;
padding: 0 0 0.5em;
}
Como dije, no hay una solución genérica para ese detalle, se debería ver caso por caso; por ejemplo, en lugar de márgenes en los widgets pueden ponerse márgenes en los títulos; también sería bueno separar esa definción en dos ya que sino, afectará tanto a la sidebar como a las entradas y tal vez, no nos interese que tengan las misma propiedades:
.main .widget {
.......
}
sidebar .widget {
.......
}
Si se quiere mantener el borde, podría usarse otra clase genérica que es la del DIV que se ocultará y se llama widget-content:
.sidebar div.widget-content {
.......
}

21 comentarios:

Felipe  

Sencillamente, excelente.
La explicación es clara y funcional, y tal como mencionas al principio, hay que tener calma cuando tratamos de lograr ciertas cositas, siempre buscandole la mañita a Blogger. :)

Lo digo porque quise hacer algo así con aquello de los avatares en los comentarios y porque puede ser una herramienta muy útil.

Ahora, permíteme hacerte una pregunta
Con este mismo estilo, ¿Es posible añadir Meta-Descripciones a ciertas entradas que nos interesen?

Lo pregunto porque me interesa especificar Meta-Descripciones a unas entradas/secciones de mi blog que me interesa promocionar más.

Un saludo cordial Jorge

Responder
JMiur  

Sí. Basta colocar las condiciones en el head de la plantilla e ir anidando las condiciones o simplemente, ponerlas una debajo de la otra:

<b:if cond='data:blog.url == &quot;URL_1&quot;'>
<meta ................ />
</b:if>
<b:if cond='data:blog.url == &quot;URL_2&quot;'>
<meta ................ />
</b:if>

Ahí no es necesario anidarlas y sin son muchas, es más sencillo de este modo.

Responder
JCAN  

Hola JMiur!

Quisiera saber si sería posible usar condicionales asociados a las etiquetas de cada entrada, de modo que, cuando se muestre la página que contiene las entradas con una etiqueta específica, se muestre un contenido particular para esa etiqueta en el sidebar.

Siguiendo el ejemplo que propones, la cara de Franki solo aparecería en las entradas con una etiqueta como: "Inteligencia Artificial" (Brian Aldiss) o "Podemos Construirle" (Philip K. Dick), dentro de una variedad mayor de etiquetas sobre temas no relacionados, los cuales presentarían una imagen o un texto distinto en el sidebar, usando un widget que pudiera distinguir entre etiquetas.

Por favor, déjame saber si ya antes has publicado una explicación para lograr este efecto.

Gracias!

Responder
Samuel Rego  

Querido amigo, la solución que presentas es sencillamente brillante. Mi mayor agradecimiento. Es admirable tu altruismo que habla a las claras de la gran persona que eres.
reiterándote mi agradecimiento te mando un cordial saludo.

Responder
Gem@  

Pensaba que los genios llevaban bata blanca y pelo alborotado ¿dónde dejaste la bata blanca?
El tema delas condicionales da para mucho, con paciencia podemos cambiar totalmente el aspecto del blog, guardaré la entrada en mis favoritas porque me va a hacer falta ;)

Responder
JMiur  

JCAN:
El problema es que en el único lugar de la plantilla donde puede saberse a qué etiqueta perteneces determianda entrada, es en el loop que muestra los posts. Por lo tanto, para conseguir eso, habría que usar algún script.
Podría hacerse pero no hay una respuesta general para eso; sería algo muy específico que debería ahcerse para un blog determinado con un contendido determinado. No parece algo sencillo e resolver.

Samuel:
Espero que te sea útil; fue un desafío interesante :D

Gem@:
El tema es interesante, lástima que eso que propone JCAN es casi imposible porque sería extraordinario para llevar la personalización a niveles insospechados.

Responder
VeoDivx  

Imagen para ver

JMiur me acabo de encontrar que Internet explores 8 tiene bordes como FireFox dejo una imagen para que veas.

Están son las propiedades css

-moz-border-radius: 20px 20px 0 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);

Blog pruebas

Un saludo.

Responder
JMiur  

VeoDivx:

En realidad, no es así, IE8 no tiene una propiedad para eso; lo que ocurre es que en las nuevas plantillas como esa que estás utilizando, Blogger inserta un script de manera automática:

http://www.blogger.com/static/v1/jsbin/XXXXXXX-ieretrofit.js

donde esos XXXXXXX parece que son un número que varían según la plantilla; por ejemplo:

http://www.blogger.com/static/v1/jsbin/597892936-ieretrofit.js

Aparentemente, usando unas definiciones especiales, imita ciertas propiedades del CSS3 como:
-goog-ms-box-shadow
-goog-ms-border-radius
siempre que se coloquen en la plantilla, entre <b:skin> y </b:skin>

No hay ninguna información respecto a eso, sólo algunos mensajes en los Grupos de Ayuda de Blogger respecto a bugs o errores al cargarse ese script.

Google tiene varios proyectos semejantes pero este en particular, parece reservado a esas plantillas y no he visto que pueda ser utilizado en otras aunque sería interesante que fuera una alternativa.

Responder
.::: Anthony :::.  

que tal amigo.. .me encanta tu estilo es muy claro y sencillo ... espero que visistes mi blog y lo veas, y ps m digas que tal te parace.. tengo uno que es de ayuda para blog q se llama friki bloggeo.. espero te guste amigo... chao y suerte con tu blog

Responder
Felipe  

Hola JMiur.

Estoy haciendo unas pruebas en un blog auxiliar para un cambio en la plantilla y he querido implementar los Includables para tratar de lograr lo siguiente:
Quisiera en el bloque de comentarios poder resaltar a algunos comentaristas que dejan buenos aportes en el blog con un "cartelito" que dice "Colaborador Destacado".

Imagen de Ejemplo

Para eso, se me ocurrio crear un Includable que dice lo siguiente:

<b:includable id='CP'>
.. imagen del cartelito ...
</b:includable>

Y luego en el Loop de los comentarios hacer algo similar a esto:

<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/xxxxxxxxxxx"'>
<b:include name='CP'/>
</b:if>

Es decir, la idea es utilizar las Url de los perfiles de Blogger de ciertos comentaristas para mostrarles el cartelito debajo de su avatar.

El problema, jeje, es que no funcionó. :)

Hize un ligero cambio a ver si andaba de este modo:

<b:includable data='comment' id='CP' >
.. imagen del cartelito ...
</b:includable>

Y luego poner <b:include name='CP' var='comment'/> y tampoco andó.
Siempre lo está mostrando en el primer comentario y no está teniendo en cuenta el filtro que quiero de la Url.
¿Estoy utilizando mal el código o de pronto se te ocurre alguna idea para tratar de emularlo?
De antemano agradezco tu colaboración. Saludos.

Responder
JMiur  

El concepto del primer ejemplo es correcto y funcionará pero, claro, no sé cuñal es exactamente el código que estás poniendo ni dónde lo estás poniendo:

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/xxx&quot;'>
<b:include name='CP'/>
</b:if>

<b:includable id='CP'>
............... la imagen
</b:includable>

Y lo mismo sin un includable

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/xxx&quot;'>
............... la imagen
</b:if>

Responder
Felipe  

Hola de nuevo Jorge y gracias por tu respuesta.

Mira por ejemplo esta entrada del blog de pruebas.

Digamos por ejemplo que entre los que comentaron quisiera que 'Locomosxca' tuviera el cartelito, asi que uso la Url de su perfil y creo el código: (la imagen la pongo mediante un Sprite)

<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/01445858993903651239"'>

<span class='unspr cp' style='left: -76px;top:70px;position: absolute;'/>

</b:if>

Y de ese modo tampoco funciona, hay algo que no termina de cuadrar, y no creo que usar el nombre del comentarista sea la mejor solución. :S

Responder
JMiur  

En ese ejmplo que muestras, lo veo colocado.

Responder
Antonio José  

estoy intentando condicionar una entrada de este codigo ondragstart=return false en el body que sirve para no poder arrastrar imagenes el caso es que me an dixo que es muy complicado condicionarla, es para un formulario y necesito ke el boton izkierdo en esta este habilitado. cual codigo podria utilizar? graciassssss

Responder
JMiur  

Para condicionar una función debe ponerse la condición y adentro, la funcion con etiquetas script pero, cualquier intento de impedir el uso de los botones del ratón en un navegador es indeseable e inutil.

Responder
mis compritas  

creo que hay una forma de hacer esto que es aun mas facil, que tal asi?

creo que asi deveria funcionar tambien






aqui va el codigo de lo que va a aparecer en estas 3 entradas

Responder
mis compritas  

si intento condicionar estas entradas de forma alrevez, osea, en forma negativa, si intento, que en vez de aparecer el codigo en estas tres entradas, no aparescan, pongo los codigos asi:

para lograr que un widget específico (no)se muestre en tres entradas y sólo en esas tres entradas del blog





aqui el contenido





yo logre que el codigo no aparesca en ninguna de estas entradas si tener que repetir el codigo pero deve de haber una forma de usar este metodo con el para hacerlo alrevez y lograr que el widget o el codigo específico se muestre en estas tres entradas, no lo he logrado aun pero digame que puedo hacer, se que deve de haber una manera de lograrlo de esta forma, he logrado hacer esto en varios lenguajes de programacion y funciona, en html deve funcionar asi tambien pero no se mucho de las condiciones en html, usted que dice, cree que halla una forma de manipular la condicion para ponerla alreves y lograr hacer lo que usted explico mas arriva pero con este metodo?
hay una forma?

Responder
JMiur  

En ningun ode tus dos comentarios se ve el código, debes usar &lt; para escribir el carácter < y &gt; para escribir el carácter >

Responder
mis compritas  

<<
si quisiera hacer lo que usted explica en este tema, pero alrevez, y sin tener que escribir tantos codigos, creo que podria poner los codigos asi:





aqui va el codigo





si la url no es (entrada1) entonces pasa a la condicion 2, si la url no es (entrada2) entonces pasa a la condicion 3, si la url tampoco es igual a (entrada3)entonces el codigo se mostrara.

osea que si la url es igual a (entrada1)o(entrada2)o(entrada3) entonces la condicion se interrumpira y no se cumplira y no se mostrara el codigo en en ninguna de estas tres entradas

(Ahora yo le pregunto a usted)? se podria usar este metodo para lograr hacer lo que usted explica en este tema sin tener que escribir los codigos mas de una vez,? usando un << <> o algo que se le paresca

por ejemplo, podria yo manipular el html asi?









aqui el codigo




lo que quiero decir es
("universo" no es igual a "cielo")
("sol" no es igual a "cielo")
("estrella" no es igual a "cielo")

(de lo contrario) "osea supongamos un "



finalizar("universo" no es igual a "cielo")
finalizar("sol" no es igual a "cielo")
finalizar("estrella" no es igual a "cielo")



digame que es lo que usted cree que seria una forma posible de hacerlo.

lo que pasa es que estoy usando unos codigos para poner la pagina en otro idioma en diferentes entradas y no quiero tener que repetir los codigos tantas veces

>>

Responder
JMiur  

¿Leiste mi comentario? Parece que no.

Todo los códigos que escribes NO son visibles; los formularios de comentarios no admiten que se agreguen etiquetas HTML más allá de las permitidas.

Blogger carece de operadores lógico excepto == y !=

De todos modos, si lo que se quiere es evitar que cierto código se ejecute, no hay necesidad de repetir nada; se debe repetir cuando en la condición hay algo "distinto". Si se quiere que algo n ose muestre en tres entradas específicas, se anidan las condiciones:

<b:if cond='data:blog.url != &quot;URL_entrada1.html&quot;'>
<b:if cond='data:blog.url != &quot;URL_entrada2.html&quot;'>
<b:if cond='data:blog.url != &quot;URL_entrada3.html&quot;'>
....... aquí el código a ejecutar en cualquier página excepto en entrada1 2 y 3 .......
</b:if>
</b:if>
</b:if>

Muy distinto es el caso si en las entradas 1 2 y 3 se quiere agregar o mstrar un código en cuyo caso, no existe forma de anidarlo y debe repetirse.

Responder
Jose Luis Arismendi  

Gracias lo voy a probar

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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