JMiur [E]

La sidebar del blog suele ser una de las cosas más "pesadas" a la hora de cargarlo. Solemos colocarles muchas cosas ... tal vez, demasiadas pero, es parte de nuestra idiosincracia.

En Blogger, hay una forma bastante sencilla de colocar condiciones de tal manera que el blog se muestre diferente en función del tipo de página donde nos encontramos. Básicamente, lo que podemos detectar es si estamos en una página de entradas individuales o no; para eso, hay un dato interno que lo indica:

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

Si esto es así, entonces, también sería sencillo hacer que ciertos elementos de la sidebar se muestren o se oculten según sea el tipo de página.

Todos los elementos que agregamos tiene la misma estructura; por ejemplo, si agregáramos un elemento HTML con el título MI ELEMENTO; podría verse esto:
<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 el ID que variará de acuerdo a la cantidad que tengamos agregados y el atributo type será diferente si se trata de otro tipo de elemento (Label, Archive, Feed, etc).

Blogger no nos deja colocar código antes de b:widget así que colocaremos la condición adentro:
<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 código interno ... ]
<b:else/>
<style>#HTML7 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>
En el ejemplo, el elemento HTML7 sólo se mostrará en las páginas individuales y ya que a veces, aunque no tenga contenido, el elemento tiene "tamaño"; reforzamos la instrucción ocultándolo por completo.

La condición inversa sería no mostrar el elemento en las páginas individuales; para eso, lo más fácil es usar:
<b:if cond='data:blog.pageType != &quote;item&quote;'>
El armado de la página de forma condicional no está limitada a los elementos individuales. Podemos condicionar casi cualquier cosa. Este esquema nos permitiría tener sidebars diferentes para las páginas individuales y la página principal:
<b:if cond='data:blog.pageType != &quote;item&quote;'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
[ ... el código de los diferentes elementos de la sidebar de la página principal ... ]
</b:section>
</div>
<b:else/>
<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar-2' preferred='yes'>
[ ... el código de los diferentes elementos de la sidebar para entradas individuales ... ]
</b:section>
</div>
</b:if>
Moraleja: cualquier cosa es posible y el resto queda librado a la imaginación de cada uno.

47 comentarios:

JuliansMG  

Muy buena la entrada, la verdad... muy bueno tu blog... trato de aprender de él, a ver si mejoro el mio. Si podés, pasá quiero tener una opinion de alguien que sabe del tema, un saludo grande.

Responder
SpamLoco  

Ahora ya me lo sé de memoria, pero hasta hace un tiempo entraba acá a ver como era el código que tenía que poner y dónde :D

Responder
Pegaso  

Hola JMiur me encanto tu blog hoy que entre, me encantaria que me pudieras ayudar en esta pagina http://www.veocine.es ponen los videos incrustados desde su pagina web y se me hizo muy interesante.

Espero que tengas un excelente dia y me pudieras ayudar =)

Responder
Pegaso  

De nuevo yo, disculpa jeje mira para ser mas exacto es esta la url http://www.veocine.es/60154/pelicula/cuatro_vidas aunque me gustaria hacerlo un poquito mas pegado al video asi no se tendrian que salir de mi pag y hacerlo grande ahi mismo

¿esta padre la idea no?

Responder
JMiur  

Pegaso:
Én ese sitio no hay videos incrustados; lo que se ve es un IFRAME de Megauploads.

Responder
Pegaso  

Muchas Gracias JMiur y creeme que cualquiera se molestaria, pero bueno no hablare mas del tema ya que seria agrandar mas el problema

Agradezco tus atenciones y el tener un blog asi =)

Responder
JMiur  

No sé a que problema te refieres o si la página que quieres ver es otra. En este sitio:
http://www.veocine.es/60154/pelicula/cuatro_vidas

No hay videos incrustados. Sólo un IFRAME que dice:
<iframe id="veocine" class="veocine" frameborder="0" scrolling="no" src="http://www.megavideo.com/?v=24KYXSWG">

Es sumple de comprobar. Mira el código funte y busca etiquetas EMBED u OBJECT y verás que no hay ninguna. Así que deberías aclarme un poco que es lo que quieres hacer o que es lo que te ha llamado la atención.

Responder
Pegaso  

Hola JMiur me resulto perfecto el post que encontre en Vagabundia del IFRAME.

Al problema al que me referia es a el chavo este desconocido que entro reclamando injustamente del post y pues yo tambien me hubiera molestado por su forma de reclamar.

Que bueno que lo borraste.

Una disculpa por el malentendido y me encanta tu blog.

Responder
JMiur  

No hay problema, no te preocupes. Es que ese tipo de páginas pueden cambiar dinámicamente y tal vez, yo veia una diferente a la que tu veías o mi navegador bloqueaba alguna parte; por eso preguntaba qué parte exactamente era la que te interesaba.

Responder
Maite  

Como tú dices que todo es posible... (jajaja también para los novatos como yo?)lo intentaré esta noche y te cuento.
Gracias, besazo.

Responder
JMiur  

Oh sí, Maite, seguro que sí. Sólo se necesita paciencia y más paciencia :)

Responder
gh  

Hola,
seguí las instrucciones y tuve algún problema, conseguí sacar de la pagina del post partes de la sidebar pero en la página principal no veo los titulos....
por otro lado, será posible esconder todos menos uno de los elementos de la sidebar, sin tener que hacerlo uno por uno?
agradecería tu ayuda!!! gustavo - gh@lenoardofinotti.com

Responder
JMiur  

Si no ves los títulos, es posible que hayas eliminado el código, por lo general, dice esto:

<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Esconder todos menos uno; dependería de que escondas, si son identificados como IDs no, pero, podrías colocar la condicion de ocultos en el head:

<b:if cond='data:blog.pageType == "item"'>
<style>
#HTML1, #HTML3, #Label1 #HTML7 {display: none;}
</style>
</b:if>

Es una respuesta un poco ambigua porque todo dependerá de la plantilla o de la forma de aplicar estas cosas.

Responder
gh  

Hola, ha funcionado el segundo, y ha sido muy facil
Podes verlo en http://leonardofinotti.blogspot.com
Gracias, y acepto otras sugerencias!!!

Responder
JMiur  

Perfecto, gh :D

Responder
gh  

hola

vengo con otra pregunta, será posible hacer esto mismo para el footer en vez de la sidebar
pensaba usar el footer como página de inicio, una imágen, y luego sacarlo en las entradas, trabajando solo con etiquetas y sin posts a la vista

gracias como siempre, tu blog es importante!

gh

Responder
JMiur  

Sí. Puede hacerse con cualquier DIV o sección del blog. Busca el ID que lo identifica y listo. Por defecto sería footer-wrapper.

Responder
gh  

estimado

sigo con esto de esconder el footer
no entendí bien, el div footer-wrapper, es ahi donde debo poner el codigo o debo modificar el código para que actúe ahi?
disculpá la burrada

abrazo
gh

Responder
JMiur  

No sé exactamente tu idea pero, si quieres que el footer se expanda y contraiga, debes ocultarlo y colocar en alguna parte algún enlace que ejecute el script.

Responder
Uve  

Jmiur!! hoy te mandé un correo preguntandote por alguna de estas cosas porque yo siempre lo hacia mal!! y ahora encuentro más entradas tuyas sobre condicionales :)

Ya he conseguido del todo ocultar el estilo de mis gadgets en la "portada" de nuestra página... y hacerlos diferentes para las páginas individuales :)

Ahora solo me falta la idea de poner sidebars diferentes dependiendo de la sección a la que entren desde esas secciones que hay en la página principal :)

Si tienes alguna idea de como podría hacerlo, te dejo la dire para que veas como está organizado y lo que quisiera:
http://pruebasdeuve-miradas6.blogspot.com

Responder
JMiur  

Ló unico que se me ocurre es detectar la URL de la página o su título. para eso, hay dos datos:

<data:blog.pageName/>
y
<data:blog.pageTitle/>

Habría que probar pero, creo que si las secciones on etiquetas, data:blog.pageName contienen el nombre de la etiqueta.

Sólo es una idea genérica, no lo he intentado.

Responder
Uve  

Gracias Jmiur por contestar tan rápido :)
probaré y te cuento como lo llevo, jejeje ¡tardé mucho en ver como ocultar totalmente algo!

aunque he visto que podría hacer que algo (como una sección) se mostrara de manera diferente según la página que se abriera, he querido prevenir por si en algún momento algo fallaba, y ya que cada sección es un widget con su sidebar y estilos propios, lo que he hecho es crear mas sidebars para que se muestren en las demás páginas...

A ver si esto me sale :)

Saludos!

Responder
Uve  

Por ahora todos los intentos han sido malos...
no se como hacer para que solo aparezca ese gadgets donde hay una entrada con X etiqueta, como hago con las últimas entradas publicadas de esa sección al decirle qué entradas son las que quiero que me muestre :(


Otra pregunta que quería hacerte, era...
en la sección de "blogger feliz" he utilizado los minipost... he creado una entrada con ese texto, y luego le he dado con css ese estilo para que aparezca así en mi sección. ¿Es posible poner un enlace?? por ejemplo en el actual que hay ahora... donde dice "mistico" que enlace a su blog...

Saludos :)

Responder
JMiur  

Uve:
Eso de detectar la etqiueta es muy complejo. La unica forma de hacerlo es con alguna clase de script dentro del blucle de cada post.

Lo de los miniposts no lo comprendí. Explícame un poco más.

Responder
Onetwothree  

Muy buen artículo, utilizo esos elementos condicionales para no alargar la carga en cada post individual.

Una pregunta, hace poco sin yo tocar nada a veces le da por cargarse y a veces no mi "recent comments" y mi "recent post", tiene ambas "display: block" en las propiedades.

A qué se puede deber que según tengan el día se muestren o no?

Muchas gracias JMiur

Responder
JMiur  

Con display: block le dices al navegador que ese elemento se muestre (es el valor por defecto). Eventualmente, puede ocurrir ue eso que quiere mostrarse sea inaccesible, ya sea un script, un feed o una imagen. Ahí ya el tema es otro y el código agregado no influye.

Si esto pasa seguido habría que verificar esos elementos porque no es normal, puede ocurrir pero no habitualmente.

Responder
Onetwothree  

Ya por eso lo puse como para que saliese de todas, todas pero el caso es que al principio no pasaba es desde hace un tiempo y yo no he modificado nada para que no salga.

Ya te digo son los "Recent Comments" y "Recent Post", no es algo raro es algo que viene predefinido y funcionada correctamente.

Compararé la plantilla original y la mia para ver las diferencias (ya que la original supongo que no tendrá éstos problemas) y a ver cuales son las diferencias.

Si se te ocurriese algo te agradecería que me lo dijeses te lo agradeceré.

Un saludo.

Responder
JMiur  

Onetwothree:
En este momento, se ve un mensaje de error en el código fuente. Dice:

The resource from this URL is not text: http://money4jacky.googlepages.com/blogger-widget.js

Y entonces, ese script no se ejecuta. No sé si eso tendrá influencia ya que no sé que hace ese script.

Responder
Antonio F. Lara  

No encuentro esta etiqueta en mi código data:blog.pageType = "item" habrá alguna equivalente, gracias.

Responder
JMiur  

Seguramente está en alguna parte. Busca: data:blog.pageType == &quote;item&quote;

De todas formas, no improta si está o no está, los códigos condicionales se agregan donde se quieran utilizar.

Responder
Admin  

Hola JMiur, antes que nada quiero felicitarte por tu blog, es genial, uno puede aprender mucho aunque en mi caso particular, soy totalmente novato en esto, y no entendí mucho sobre este tutorial... En ninguna parte de mi plantilla encontré este código interno que tu citas

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

lo más similar fue data:blog.pageTitle y además los elementos de mi sidebar tienen la siguiente estructura



similar pero no igual a la que tu mencionas que es la siguiente

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

Si me puedes ayudar te lo agradecería, mi blog es www.rallyderanchos.blogspot.com

Responder
JMiur  

No se ve el código de lo que has escrito.

data:blog.pageType = &quote;item&quote
seguramente está porque sino, no podrían verse los comentarios en las páginas individuales, de todos modos, eso no importa ya que es una condición que se agrega indiscriminadamente.

Si el código (es eque no se ve) varía, es normal, no es problema siempre que logres identificar de que se trata. No sé, excatamente qué quieres hacer. Explícame un poco más.

Responder
Admin  

Hola JMiur gracias por responder tan rapidamente, no sé si pasaste por mi blog, pero lo que quiero hacer es que algunos elementos de mi sidebar, aparezcan en la portada o pagina principal, y otros que aparezcan en las otras pestañas... Espero haberme explicado, y te pido disculpas por mi ignorancia.
En el comentario anterior lo que no se ve es lo siguiente: te decía que los elementos de mi sidebar tienen una estructura similar a la que vos describiste pero no igual ... en mi plantilla los elementos tienen la siguiente estructura



asi los describiste vos

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

de nuevo gracias...

P.D.: a que llamas codigo interno??

Responder
JMiur  

No puede agregarse código directamente en un comentario.

Todos los elementos agregados son similares y para condicionarlos, hay que colocar ese IF rodeando el contenido:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
........... esto no se verás ...........
</b:if>

Así que, en general sería algo asi:

<b:widget id='XXXXXXX' locked='false' title='XXXXXXX' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
....... ....... ....... .......
....... aqui puede ser que haya cualquier otro código que es el que se va a ocultar .........
....... ....... ....... .......
</b:if>
</b:includable>
</b:widget>

Ahí, XXXXXXX indica cualquier dato que haya, son el tipo y nombre del elemento. Eso de ... el código interno, es, justamente l oque se va a ocultar y da lo mismo que se acualquier cosa salvo en algún elelemento especial como Archivos; en el resto, es indiferente.

Responder
BM  

Hola Jmiur! Estoy armando un blog y tengo un problema. Con las indicaciones de este post logré esconder la sidebar en el "home" pero el main queda del tamaño que está en todas las entradas, claro, y me gustaría que quede del ancho total. Es decir, que en el home pueda poner el main de otro tamaño.
Por ejemplo, este es el home: http://bmeni-web.blogspot.com/
Y así se ve una entrada común: http://bmeni-web.blogspot.com/2010/05/cortadoras-de-cesped-electricas-sin.html
Espero puedas ayudarme, saludos!

Filigrana.

Responder
JMiur  

No sé cuál es el resultado final que quieres obtener pero, así como ocultas la sidebar, condicionándola, lo mismo puedes hacer con el CSS; en este caso, poniendo algo así antes de </head>

<b:if cond='data:blog.pageType != &quote;item&quote;'>
<style>
#main-wrapper { width:950px; }
</style>
</b:if>

En ese ejemplo, cambias el ancho del DIV main para que ocupe también el espacio de la sidebar oculta. Puedes poner cualquier valor o agregarle o cambairle propiedades que sólo serán efectivas en las páginas que no sean entradas.

Responder
BM  

Gracias Jmiur! Pero pruebo y al poner vista previa me pone un error bX-r68sfo (lo sentimos pero no hemos podido llevar a cabo su petición) y si pongo guardar cambios me pone "TEMPLATE ERROR: LHS of numeric is null before 26 in data:blog.pageType != item" ...que puede ser?
Lo que yo quiero lograr es que al entrar al blog no haya sidebar y el main ocupe todo el ancho, y que solo cuando se entre a las entradas individuales aparezcan.
Gracias por tu ayuda!

Responder
JMiur  

Estaba mal escrito. Intento otra vez:

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

espero que ahora salga bien :

Responder
BM  

Si si si perfecto! Millones y millones de gracias Jmiur, era lo que me faltaba resolver para terminar el blog. Gracias! :D
Saludos.

Filigrana.

Responder
JMiur  

Genial, lamento el error anterior :D

Responder
Bilosony2™  

Hola Jmiur tengo un problema he querido hacer esto que tu explicas y no logro hacerlo, te cuento que quiero que el gadget que explicas en esta entrada:

http://vagabundia.blogspot.com/2010/07/ultimas-entradas-con-miniaturas.html

Solo se muestre en la pagina principal y en las demas no se muestre este gadget...

Me podrias ayudar para lograrlo???

Saludos!!!

Responder
JMiur  

No sé qué estás haciendo o cúal es el código que utilizas. Así , en general sería:

<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
... el código que haya ...
</b:if>
</b:includable>

Responder
Bilosony2™  

gracias!!! estaba poniendo unas letras mal jeje


Saludos!!

Responder
Sailor©  

Holaaaaaa!!! es viejita la entrada pero me sirvió un montñon!!! Gracias.

Responder
Ark  

Jmiur, quiero recuperar este tema.... ¿Habría alguna forma de sacar un tipo determinado de entradas y situarlas en la sidebar?

Por ejemplo, yo tengo un tipo de entradas diferentes condicionadas a una etiqueta concreta, "noticias". Me preguntaba si podría ponerlas en la barra lateral, y que esta actuara como una especie de segundo "main" con los gadgets al principio, y a continuación las entradas de noticias.

Es dificil de explicar pero....

-Main- Sidebar
Entradas Entradas
tipo 1 tipo2

Mas o menos esa era la idea que tenia, cuando pense en poner noticias.

Responder
JMiur  

Colocar otro elemento Blog no ya que eso no permite controlar las etiquetas. Debes usar Json y leer los feeds.

Responder
Hernan Dario Alvarez Benitez  

Ganaste, felicitaciones!! muy profundo tu conocimiento de Blogger, muchas gracias por compartir

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