29 abr 2009

Elementos condicionales ( Parte 1 )

Si hay algo que me encanta de Blogger es que alberga unos utilicimos condicionales que nos permiten mostrar "cosas" solo en determinadas paginas. Cada pagina tiene un nombre, veamoslos:

Index: Es la pagina principal de nuestro Blog.

Por ejemplo:
http://NombreDelBlog.blogspot.com

Item: Son las paginas donde se muestran los Post.

Por ejemplo: http://NombreDelBlog.blogspot.com/2009/01/UnPostCualquiera.html (Pagina de un Post)

Etiquetas: Son las paginas que se ven cuando hacemos click en una etiqueta.

Por ejemplo: http://NombreDelBlog.blogspot.com/search/label/UnaEtiquetaCualquiera (Pagina de una Etiqueta)

Esas son las tres clasificaciones básicas, y las que por ahora nos interesan. Pero ¿Para que me sirven? En principio para mostrar cosas en un tipo de pagina que no se vera en el otro. ¿Un poco confuso? Veamoslo con ejemplos:

♦ Mostrar un elemento solo en la pagina principal:

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


[..... AQUÍ VA EL CÓDIGO ......]

</b:if>


♦ Mostrar un elemento solo en las paginas de los Post:

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

[..... AQUÍ VA EL CÓDIGO ......]

</b:if>


♦ Mostrar un elemento solo en las paginas de Etiquetas:

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

[..... AQUÍ VA EL CÓDIGO ......]

</b:if>

Como verán no es para nada difícil usarlos y en la practica podemos condicional cualquier cosa, veamos ejemplos:


♦Condicionar CSS:

<b:if cond='data:blog.url == data:blog.homepageUrl'> /*En el Home */

<style type="text/css">

#IdElemento {
width: 200px;
height: 100px;
background: #223366;
}

</style>

</b:if>


<b:if cond='data:blog.pageType == "item"'> /*En las paginas de Post*/

<style type="text/css">

#IdElemento {
width: 100px;
height: 200px;
background: #663322;
}

</style>

</b:if>

El resultado seria que cuando estemos en la pagina principal el elemento se muestre asi:

EN EL HOME

Y en las paginas de los Post se mostraría de esta forma:

EN LOS POST

El Código CSS condicionado lo deben poner donde muestra el ejemplo:

<head>

[..... CÓDIGO ......]

<b:skin><![CDATA[/*

[..... MUCHO MAS CÓDIGO ......]

]]></b:skin>

[..... AQUÍ VA EL CÓDIGO CSS CONDICIONADO ......]

</head>

Siguiendo el mismo principio se puede condicionar casi cualquier cosa, en la segunda parte aprenderemos a condicionar los "Elementos".
Ellos han comentado!
HaCk CrAcK

Que buena explicacion! me quede con ganas de mas :p
Espero tu proximo tutorial, si haci quieres llamarlo. Puedes poner como titulo en estos post de ayuda "Aprendiendo con Shark Bloody: (nombre del post, ejem "elemntos condicionales")"
Que tul!

Shark_Bloody

Me alaga tu comentario, de echo paso de la parodia de titular mi explicacion, y me centro en que aprecias el trabajo. :)

¿Desea hacer un comentario?

Diseño: Shark_Bloody
MDEQ® - Todos los derechos reservados