Más de Códigos Condicionales

LuJo


Los códigos condicionales:


• El uso de IF en una acción indica poder elegir entre distintas referencias. En el siguiente ejemplo se juega con la respuesta: si es VERDADERO iremos por un camino y si es FALSO tomaremos otro.


<b:if cond='hambre == como'>

... si tengo habre comeré porque respondo que es VERDADERA (true)...

<b:else/>

... si es false (falsa) no como ...

</b:if>


• En lugar de usar == (indica igualdad), usamos != (indica desigualdad).


<b:if cond='hambre != como'>

... si tengo habre no comeré; hay desigualdad en el código...

<b:else/>

... si es false (falsa) comeré, tengo hambre ...

</b:if>


• Supongamos que sólo tengo respuesta a una una posibilidad:


<b:if cond='hambre == como'>

... si tengo hambre comeré ya que es verdad...

</b:if>



• Se pueden usar estos condicionales para ejecutar en ciertas páginas unas órdenes u otras. El dato que lo indica es data:blog.pageType que puede tener tres posibles valores:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
Lo que se indique sólo se mostrará en una entrada individual

</b:if>



<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Lo que se indique se mostrará en las páginas que listan entradas

</b:if>



<b:if cond='data:blog.pageType == &quot;index&quot;'>

Lo que se indique se mostrará en el resto de opciones

</b:if>


• La combinaciones de igualdad y desigualdad, hará que podamos mostrar u ocultar un elemento preciso:


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

Se mostrará cualquier página excepto en las entradas individuales

</b:if>


• Con esta condición se está en la página principal:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Sólo se muestra en página principal

</b:if>


• Se puede condicionar lo que sea. Un ejemplo son:

Metas o Etiqueta META o metaetiqueta en una web

Cambiar optimizar títulos del blog o web. Tutorial



<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style>

... Las propiedades que se detallen sólo se aplican en la página principal...

</style>

</b:if>



<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script>

... El script que se indique sólo se cargará en la página principal...

</script>

</b:if>


• El código que hay que tener siempre presente es:

Es una fórmula para que si estamos identificados, autentificados, somos administradores.. en nuestra cuenta de Blogger lo veamos, pero estará oculto para el público.Para hacerlo efectivo es necesario colocarlo en el post (Edición de HTML) dentro de un elemento DIV o SPAN.

Ejemplo:Barra superior de Blogger o nabvar personalizada en un gadget HTML

- Alternativas:


<b:if cond='data:blog.pageTitle == "Ocultar codigos mientras los probamos"'>


data:blog.pageTitle es el contenido de la etiqueta TITLE en el HEAD - header.


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



data:blog.url es la dirección URL de la entrada que podemos averiguar cuando publicamos el post.


&<b:if cond='data:blog.pageName == &quot;Ocultando codigos m&quot;'>


data:blog.pageName es el título de la entrada individual. Con las etiquetas podemos:

<b:if cond='data:blog.pageName == &quot;NOMBRE_ETIQUETA&quot;'>

o:

<b:if cond='data:blog.url == &quot;http://miBlog.com/search/label/NOMBRE_ETIQUETA&quot;'>

Blogger no permite colocar condiciones múltiples en una sola instrucción, se soluciona anidándolas (una dentro de otra).
Ejemplo: Mostrar una inforamción en el resto de páginas excepto en páginas individuales y principal.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
... NO es una pagina de entradas, puede ser pagina principal o cualquier otra
<b:if cond='data:blog.url != data:blog.homepageUrl'>
... NO es la pagina principal es el tipo de pagina que estoy buscando
</b:if>
</b:if>

Ejemplo: Condicionamos el color de los textos de las entradas.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post-body {color: black;}
</style>
<b:else/>
<b:if cond='data:blog.pageName == &quot;BLOGGER&quot;'>
<style type='text/css'>
.post-body {color: blue;}
</style>
<b:else/>
<style type='text/css'>
.post-body {color: red;}
</style>
</b:if>
</b:if>
<b:else/>
<style type='text/css'>
.post-body {color: green;}
</style>
</b:if>

Fuente: VG


En Blogger, se pueden colocar condiciones para que se muestre el blog de distinta forma según estemos en página principal - individual o lo que sea. Básicamente, lo que podemos detectar es si estamos en una página de entradas individuales o no; para eso, hay un código que lo marca:

data:blog.pageType = &amp;quote;item&amp;quote;

Todos las instrucciones en forma de gadget que agregamos en HTML con el título MI ELEMENTO tiene la misma estructura:


<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>

<b:includable id='main'>

[ ... el código interno ... ]

</b:includable>

</b:widget>


HTML7 es la ID exclusiva de ese gadget, el atributo type cambia dependiendo de dónde esté: Label, Archive, Feed, etc...
HTML7 se muestra en páginas individuales.

<b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quote;item&quote;'>
[ ... el codigo interno ... ]
<b:else/>
<style>#HTML7 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

Mostrar el elemento en el resto de páginas (no las individuales):

<b:if cond='data:blog.pageType != &quote;item&quote;'>

Este esquema permite contemplar una sidebar distinta en páginas individuales y principal:

<b:if cond='data:blog.pageType != &quote;item&quote;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
[ ... el codigo de los diferentes elementos de la sidebar de la pagina principal ... ]
</b:section>
</div>
<b:else/>
<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar-2' preferred='yes'>
[ ... el codigo de los diferentes elementos de la sidebar para entradas individuales ... ]
</b:section>
</div>
</b:if>

Fuente: VG


Problemas causados por los códigos condicionales que hacen que en la página de Diseño se oculten elementos.

•Mostrar elementos ocultos en la pantalla de DISEÑO a causa de los condicionales.


Existe un problema que surge cuando jugamos con los condicionales y hacemos que salga la página principal de una forma y las individuales de otra: algunos gadget, widgets o elementos no aperecen; son invisibles en la zona de Diseño | Elementos de la página por lo que se dificulta su edición.


En las plantillas clásicas aparece algo entre <b:skin> </b:skin>
que llaman:

/** Page structure tweaks for layout editor wireframe */

Allí vemos reglas de estilo que son las que controlan la forma en que se verá la página de diseño donde podemos editar los elementos. En las plantilla Mínima sólo dice:


<code>

body#layout #header {margin-left: 0px; margin-right: 0px;}

</code>




Este elemento es el que ayuda a resolver a suertes los problemas que se deriven.

Ejemplo: Supongamos que la sidebar sólo se muestra en las páginas individuales.


<b:if cond='data:blog.pageType != "item"'>

<style>

#sidebar-wrapper {display:none;}

</style>

</b:if>


Se haría visible en Diseño | Elementos de la página añadiendo una línea en condicional.


<b:if cond='data:blog.pageType != "item"'>

<style>

#sidebar-wrapper {display:none;}

body#layout #sidebar-wrapper {display:block !important;}

</style>

</b:if>


La línea que se agrega (roja) afectará sólo esa parte interna de Blogger.El blog se seguirá viendo de la misma forma.

Fórmula genérica:


body#layout #id_elemento {display:block !important;}

O



Si se trata de otras zonas....
/*
#main-wrapper {display:none;}
#sidebar {display:none;}

body#layout #main-wrapper {display:block !important;}
body#layout #sidebar {display:block !important;}
*/



 


UP