JMiur [E]

En estos días, Carlos me preguntaba si existía una forma de mostrar la página principal del blog donde sólo se vieran los títulos y un enlace que abriera las páginas individuales pero, sin aplicar ninguno de los trucos para que se ocultara el contenido y se expandieran. La idea era tener una lista tipo índice cronológico que se actualizara automáticamente.

Lo primero que se me ocurre es el método más engorroso, debemos agregar un nuevo elemento blog a la plantilla y hacer que uno funcione en la página principal y el otro en las páginas individuales. Lo mejor para eso es crearlo manualmente desde el código HTML donde buscamos:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
</div>
y lo cambiamos por:
<div id='main-wrapper'>
<b:if cond='data:blog.pageType == "item"'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
<b:else/>
<b:section class='main' id='mainHOME' showaddelement='yes'>
<b:widget id='Blog2' locked='true' title='Entradas pagina principal' type='Blog'/>
</b:section>
</b:if>

</div>
Ahora, tendríamos que modificar el elemento Blog2, quitar los includes que no sean necesarios y hacer las modificaciones que nos gusten ... muy complicado para mi gusto.

Una forma más sencilla es pensar, bueno, si lo que quiero es una lista y sólo poder ingresar a las páginas individuales, no necesito nada más, no necesito el autor ni las etiquetas ni la cantidad de comentarios ni ranking ni posts relacionados, sólo necesito el título y el enlace; nada más.

Y eso, podemos resolverlo con bastante sencillez usando los condicionales. Lo que necesitamos es ubicar esa condición en el lugar preciso que es dentro de este INCLUDABLE que vemos si expandimos los artilugios:
<b:includable id='post' var='post'>
... el código actual ...
</b:includable>
El contenido de eso es muy largo y varia mucho de una plantilla a otra así que no vale la pena mostrarlo, sólo hay que saber que no tocaremos el contenido existente sino que lo condicionaremos para que se ejecute sólo en las paginas individuales y de esta manera, toda esa parte del blog no cambiará:
<b:includable id='post' var='post'>
<b:if cond='data:blog.pageType != "item"'>
<!-- ... aquí pondremos el nuevo código ... -->
<b:else/>
... el código actual que no tocamos ...
</b:if>
</b:includable>
Si en este momento guardáramos la plantilla, la página principal de nuestro blog no mostraría ninguna entrada pero cualquier página individual seguiría funcionando como antes.

Entonces, lo que faltaría poner es alguna clase de código que nos mostrara el título y el enlace a cada entrada así que deberíamos reemplazar esto:
<!--  ... aquí pondremos el nuevo código ... -->
por un código cualquiera; por ejemplo:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee más</a>
<div style='clear: both;'/>
</div>
</div>
¿Qué es lo hay ahí? Un bloque al que le asigno una clase llamada postResumen que contendrá cada titulo y dentro de ese bloque, otro con una clase a la que llamo enlaceResumen y a las que luego daré propiedades CSS.

data:post.title es el título de cada entrada
data:post.url es la URL de cada entrada y con ellas se crean los enlaces

¿Podrían agregarse otros datos? Sí. Hay algunos a los que se puede acceder:

data:post.author es el nombre del autor de la entrada
data:post.timestamp es la hora de publicación de la entrada
data:post.numComments es la cantidad de comentarios
data:post.dateHeader es la fecha pero tendrá las mismas restricciones de siempre, si hay varias entradas con la misma fecha, sólo se mostrará una

Las etiquetas de la entrada también pueden listarse usando el mismo código que en las entradas individuales:

<div class='post-footer-line post-footer-line-2'>
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

La cantidad de comentarios puede mostrarse usando el código normal:

<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>

El CSS de esa sección puede ser cualquier cosa y dependerá de la imaginación de cada uno. Para el ejemplo que he colocado en un blog de pruebas, las definiciones son las siguientes:
.postResumen {
background-color: #EEEEEE;
height: 52px;
margin: 10px 0 0;
}
.enlaceResumen {
font-weight: bold;
line-height: 32px;
padding: 0 0 0 10px;
}
.enlaceResumen a {
color: CornflowerBlue;
float: right;
font-size: 11px;
font-weight: normal;
margin: -32px 10px 0;
}
.enlaceResumen a:hover{
color:CornflowerBlue;
text-decoration:none;
}
.comentariosResumen {
float: right;
font-size: 11px;
font-weight: normal;
padding-right: 10px;
}
Y el código HTML utilizado es el siguiente:
<div class='postResumen'>
<div class='enlaceResumen'>
<data:post.title/> <a expr:href='data:post.url'>Lee el artículo y coméntalo &#187;</a>
</div>
<div class='comentariosResumen'>
<b:if cond='data:post.numComments == 0'>
Sin Comentarios
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 Comentario
<b:else/>
<data:post.numComments/> Comentarios
</b:if>
</b:if>
</div>
<div style='clear: both;'/>
</div>
Ver demo online

42 comentarios:

Gem@  

Es muy interesante para plantillas tipo noticias :)

Responder
k_nelita  

Realmente salvo para lo que dice gem@, aunque... no se... tampoco me gustaría leer solo los títulos, no le encuentro mucho sentido, sería una larga lista de títulos... :S

Bueno para que veas que no soy una obsecuente, no comento solo para halagarte, esto no me gusta, claro, ya se, no me digas nada, Carlos te lo pidió... :X Y si... soy una obsecuente, si sos tan inteligente para hacer eso, que aunque a mi no me guste, ni para mi, ni para leer en ningún lado, hay que hacerlo ehh... Te felicito chee ja ja jaa :D

Querés que te cuente algo mas que no funciona de nuestro querido Blogger?
El feed de tu blog en los seguidores, vine porque se que después de las 12hs publicás, pero en los seguidores (desde mi escritorio) tu blog no tenía ninguna actualización, que mas sigue ahora? :O

Responder
Eulogio  

Hola JMiur:
Mi blog cumplirá un año el próximo mes y me gustaría para entonces ponerle algo para que recordara cada día lo publicado "hace un año", creo haberlo visto en algún blog pero de los que tienen dominio propio, ¿habrá forma de hacerlo en blogger?
Un saludo y Feliz 2009

Responder
Graciela de Palomas  

Jmiur no está mal para realizar un blog tipo periódico.
Necesito de tu ayuda: anduve en la bolsa negra...casi me quedo a vivir allí anoche :).
Debes tener explicado pero no lo encuentro:
Cómo hago para que en los títulos de las entradas, que los blogs amigos...no se vean en azul y con la rayita debajo???...gracias y buen día!!!

Responder
Diego  

Hola soy Diego, tengo un par de dudas acerca de Blogger y me sería de mucha ayuda si me las aclararas, disculpa si no tienen que ver con el tema del post.

1- ¿Se puede agregar un map a la imagen del header?

2- ¿Cómo puedo crear páginas como las de Wordpress para "Acerca de", "Contacto", etc...?

3- ¿Existe alguna manera de editar el código del blog y tener una vista previa off-line?

Muchas Gracias y Felicitaciones por la excelente calidad de tu blog, me ha servido de mucho para recopilar información y empezar mi blog.

Por las dudas te dejo mi mail: inviernotriste@gmail.com


Saludos

Responder
JMiur  

Gem@: Efectivamente, serviría para eso. Sería un primer paso ;)

k_nelita: La verdad, no sabría decirte que pasa con esas actualizaciones de los seguidores pero no me extraña nada de nada :D

Eulogio: Si se trata de hacerlo automáticamente y que busque una fecha exacta, no veo manera de hacerlo en Blogger ya que no tenemos acceso a esos datos.

Graciela: No sé si querés cambiar solo eso o todos los enlaces. Por lo que veo, no están definidos en el CSS y por eso salen de ese color. Podés agregarle esto antes de </b:skin>

a, a:link, a:visited {
color:red;
text-decoration:none;
}

a:hover {
color:blue;
text-decoration:none;
}

El primero es para loe enlaces normales y el segundo para cuando pasás el mouse encima. En color, ponés lo que quieras, claro.

Si lo que querés es sólo cambiar lo de la sidebar, es similar:

.sidebar li a {
..........
}
.sidebar li a:hover {
..........
}

Hay un post que habla de los enlaces en general pero, cualquier detalle, me envias un mail y lo vemos en detalle.

Diego:
Sí, se puede agregar un mapa a la imagen del header pero no usando el elemento de Blogger sino haciéndolo con un elemento HTML.

No se pueden crear páginas estáticas como en Wordpress. Sólo posts.

No es posible editar el código del blog para tener una vista previa off-line pero podrías usar el código fuente que te muestra el navegador para crear una simulación.

Responder
Carlos Mario Cortés H.  

:D ¡Es un muy buen truco! Y sí, no es para todo el mundo, claro. Muchas gracias JMiur por el favor.

Yo lo utilizaré para mostrar el programa de un grupo de estudio. En ésta pág: http://csimbolica.blogspot.com

Ahí ves, gracias de nuevo.

Responder
bollullero  

Estimado Jmiur, quisiera que me explicaras, si eres tan amable, cómo puedo hacer para que en mi blog la fecha aparezca en todas las entradas (incluso las que publique en el mismo día). Mi plantilla es la blogy insense.

Perdona que te hable aquí de esto, es que me han dicho qu tú me puedes ayudar, pues ya has hablado del tema, pero no encuentro ese post. Gracias un saludo y Feliz Año.

Responder
bollullero  

Perdona, mi blog es www.elblogdebollulleros.blogspot.com. Es que no puedo dejar comentarios desde la cuenta de google, me da problemas. No se qué pasa. Un saludo

Responder
Graciela de Palomas  

:) gracias tesoro!!!...estaré mirando por allí, saludos!!!

Responder
JMiur  

Saludos, Carlos. Es cierto, no es para cualquier tipo de blog pero resultó ser una idea interesante :D

bollullero: el post es este. No es sencillo de encontrar el lugar exacto, las palntillas varian mucho en este tema. Fíjate y luego vemos.

Graciela: Suerte :D No creo que te resulte difícil de solucionar.

Responder
Fali  

¡Extraordinario!
¿De dónde sacas el tiempo?
Gracias por tantas divulgaciones.
¡¡¡Feliz 2009!!
Saludos
Fali

Responder
Gem@  

El otro día me peguntaba que pasó que no pusiste al señor seriote del gorrito rojo y me lo sigo preguntando.
En fin que mañana voy a estar muy ocupada y no sé si podré venir, no quería dejar escapar la oportunidad de desearte ¡Feliz año y feliz vida! :)

Responder
JMiur  

Saludos, Fali, gracias por el comentario.

Gem@: frente a tanto concurso navideño, decidí mostrar la imagen seria del notario :D

Feliz año para ti y ... casi apostaría que mañana te harás un ratito de tiempo para darte una vueltita por la internet :D

Responder
Diego  

Ok, muchisimas gracias por aclarar mis dudas, solo me queda preguntarte como puedo hacer para crear un post que funcione como un página estática, así como tu tienes "Inicio", "Blogger", etc...


Saludos
Diego

Responder
Gem@  

¿Cómo sabías que me daría una vueltita ? jajajaja es cierto, lo sabrás por los comentarios de las posteriores entradas pero esto lo dijiste el día anterior jajaja también eres brujo :)

Responder
JMiur  

Diego:
Lo que yo hago es una simulación de una página estática, son posts nomales a los que les quito algunas cosas. Hay una explicación de eso en esta entrada.

Gem@:
Lo sabía, lo sabía, lo sabía. Hubiera apostado cualquier cosa a que sería así y es fácil de saber: Yo hago lo mismo :$ es más fuerte que uno :D

Responder
Victor H.  

Hola, suelo seguir este blog, del que he aprendido mucho, con bastante frecuencia, pero hasta el momento no me he puesto con contacto contigo.
Quisiera agradecerte la ayuda que prestas y hacerte una pregunta: ¿Cómo puedo hacer para poner este resumen de títulos con un borde (o meterlo en un cuadro) todo el conjunto?. A ver si me puedes ayudar.

Un saludo

Responder
JMiur  

¿Todos juntos significa la lista de títulos completa?

Si es así, en esa misma plantilla mínima deberías ver esto:

.main .Blog {
.................
}

Allí podrías ponerle cualqueir propiedad, un borde, por ejemplo:

.main .Blog {
border: 1px solid red:
}

Responder
Victor H.  

Gracias JMiur. Es eso lo que quiero.
Aunque hay un pequeño problema: justo arriba de esta zona, del main wrapper, tengo añadido un gadget desde "elementos de la página", entonces cuando añado este borde tambien incluye a dicho gadget, y no queda bien. Mi idea era poner un borde sólo a la zona de las entradas publicadas. No se si me entiendes.
Un saludo

Responder
JMiur  

Entonces, tendría que ver el sitio online para ver si hay otros IDs o clases que puedan usarse.

Por ejemplo si tengo un cuadrado dentro de otro y quiero recuadrar el de abajo, un alternativa es recuadrar todo y luego, quiatrle el borde al de arriba pero eso, depende de como estén armados. Por lo general, siempre hay una solución.

Responder
Victor H.  

Ok, el blog es www.elblogdebollulleros.com, ahí puedes ver la plantilla.

Seguro que te suena el blog, ¿verdad?. Te explico soy uno de los administradores que participa en este blog junto a Francisco. Has estado modificando algunas cosas con él (a través del correo, creo) pero no ha querido contactar contigo, dice que mejor que lo dejemos así, que ya te ha molestado bastante.

Un saludo. Victor

Responder
JMiur  

Sí, claro que lo recuerdo :D

Allí parecería sencillo separar los posts del mensaje superior. Deberían agregar una definición CSS antes de </b:skin>

.blog-posts {border:1px solid black;}

Ahí se recuadraría sólo esa parte.

En la clase .blog-posts definden cualquier otra cosa, color de fondo, padding (para separarlo del borde, etc.)

Responder
Victor H.  

Pues si que ha sido sencillo, ya está colocado GRACIAS. Pero, ¿hay alguna forma de que este borde sólo salga en la página principal del blog?.

Un saludo. Victor

Responder
JMiur  

Sí. Deben tener algún tipo de condicional colocado para que los posts se vean de esa manera en la página principal. No recuerdo exactamente cómo lo habíamos hecho.

Si ese condicional existe, hay que colocar esa definición dentro. Así, sólo se ejecuta allí.

Responder
Victor H.  

Entonces, ¿qué crees que podemos hacer?. Los pasos que se han seguido son los que indicas en esta entrada. Perdona que te moleste de nuevo. Un saludo

Responder
JMiur  

Por ejemplo, antes de </head> agregar esto:

<b:if cond='data:blog.pageType != "item"'>
<style>
.blog-posts {border:1px solid black;}
</style>
</b:if>

Y allí, en ese STYLE poner todas las definiciones que se quieran. Esas no se ejecutarán en las páginas individuales.

Responder
Victor H.  

No te entiendo muy bien JMiur, ¿me lo puede explicar con un ejemplo?. Yo yo quiero poner un video, por ejemplo, o una imagen, ¿Cómo lo tengo que poner?. Es que estoy intentando y no lo consigo. GRACIAS

Responder
JMiur  

Ahora me perdí. La pregunta era: ¿hay alguna forma de que este borde sólo salga en la página principal del blog?.

¿´Cómo es eso de imágenes o videos?

Responder
Victor H,  

Perdona, fui yo el que se lió un poco.

Lo del borde me quedó claro. Lo que después quería saber es qué tengo que hacer si yo quiero poner un video, una imagen, o el código de las últimas entradas, por ejemplo, y que se vea sólo en la página principal, debajo de las entradas(por ejemplo). No se si ahora me entiendes.

Gracias

Responder
JMiur  

En términos generales, del mismo modo:

<b:if cond='data:blog.pageType != "item"'>
.....todo lo que va aca sólo se ve en la página principal
</b:if>

Hay más detalles en esta entrada.

Responder
Isaac  

Hola Jmiur, por casualidad me he re-encontrado con este post (suelo visitar tu blog :D, pero no le había dado mucha importancia) y con las indicaciones que das y los consejos que ofreces en los comentarios, he estado aplicando este formato a mi plantilla.

En el blog de ejemplo, en la página principal, además del título de cada entrada, aparece el enlace (lee el artículo...) y los comentarios, y yo quisiera saber:

1.- Cómo puedo hacer para poner la etíqueta a la que pertenece el articulo.
2.- ¿Es posible añadir al número de comentarios el nombre de la última persona que dejó un comentario?.
3.- ¿Es posible poner una especie de contador que diga más o menos: "visto x veces"? (se refiere el número de veces que han visitado una entrada concreta).

A ver si me puedes ayudar. Miles de gracias y enhorabuena por el blog. Un abrazo

Responder
JMiur  

Algunas cosas puedo contestarlas aunque sea de manera general.

Las etiquetas pueden ponerse. E scuestiòn de encontrar el código, copiarlo y pegarlo allí, abajo de los comentarios. Dice algo así:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
.................
</b:loop>
</b:if>
</span>

Lo de colocar el nombre del último comentarista, no creo que sea posible porque no tenemos el dato, Blogger no lo provee.

Algo similar te diría que pasa con ese contador. Alguien debe contar y Blogger no lo hace. Tal vez, haya algún servicio externo que provea un widget para eso aunque no recuerdo haberlo visto.

Responder
Isaac.  

Muchas gracias Jmiur por la respuesta. Te comento algunas cosas:

- En el escaparate de rosa, he visto este post: http://elescaparatederosa.blogspot.com/2007/10/ver-el-nombre-de-los-comentaristas-de.html, y es eso más o menos lo que quiero, pero no se cómo hacer para que se vean en la página principal, junto a lo de " x comentarios".

- En cuanto a lo del contador, he visto que hay algo, lo llaman "contador de clicks", y sirve para contar las veces que abren un enlace, el título de una entrada, por ejemplo, pero no permite que ese número de clicks lo visualicen los visitantes del blog.

Un saludo

Responder
JMiur  

Acabo de verlo, no lo he probado pero suena lógico y, por lo que entendí, es justamente para que se vea en la página principal y no en las páginas individuales, justamente tiene una condición que hace que eso ocurra. Si no logras que funcione, debería poder ver algún ejemplo online para decir qué ocurre.

Muchos servicios de estadísticas tienen ese tipo de función que permite ver la cantidad de clicks pero, como bien dices, es un dato interno que no puede mostrarse. No conozco ninguno que ofrezca esa posibilidad.

Responder
kxrl0z  

no te entiendo muy bien no se que codigo debo modificar en el nuevo elemto creado nose si me puedes dar los codigos del nuevo elemnto creado ya modificado saludos y muchas gracias

Responder
kxrl0z  

Buenas disculpa por molestarte otra ves pero aun sigo sin entender el tutorial que dejaste podrias postear el codigo xml de la plantilla
Muchas gracias

Responder
JMiur  

Puedes descargar la plantilal aquí

Responder
Felipe  

Hola Jorge :)

Como siempre, explicaciones muy bien estructuradas, con muchas opciones para que escojamos y probemos y 100% funcionales.
Me ha servido para un blog que estoy modificando y funcionó al primerazo.

Un saludo.!

Responder
JMiur  

me alegro que funcionara, Felipe.

Responder
Younes Elazizi  

muy bueno; me gustaria que me dieras tu opinion si lo debo utilizar en mi blog o no http://www.comunidadbloggers.com

Responder
JMiur  

Eso no puedo contestarlo; son decisiones personales y totalmente subjetivas.

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