JMiur [E]

Seguimos con la idea de Blogger estilo magazine.

El problema con que nos topábamos era la necesidad de establecer una altura común a todos los posts ¿Podría establecerse una altura fija, colocar un texto visible y ocultar el resto? Claro, eso es lo que nos aconsejan y podemos hacerlo manualmente o bien utilizando alguna variante del script Leer Más que usábamos para expandir y contraer las entradas. Y digo una variante porque aquí no necesitamos del script en si mismo ya que no vamos a expandirlos sino, simplemente, ocultar una parte del contenido.

Entonces, vamos otra vez a la plantilla, expandimos los artilugios y buscamos algo similar a esto:
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Como las plantillas varian mucho, lo lógico es usar una plantilla mínima para practicar y luego, ver si encontramos los códigos en las otras. La clave, de ahora en adelante, es encontrar el código que escribe los posts y para eso, nos debemos guiar por este dato: <data:post.body/>

Vamos a cambiar ese código por este otro:
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<div style='clear: both;'/>
<b:else/>
<p><data:post.body/></p>
<div style='clear: both;'/>
<span class='leermas'>
<a target='_blank' expr:href='data:post.url'>Leer Más ...</a>
</span>
</b:if>

</div>
Lo que estamos haciendo es usar los condicionales para mostrar los posts de dos maneras diferentes; si estamos en una entrada individual, no hacemos nada pero, si estamos en la página principal, le agregamos, debajo de cada uno de ellos, un enlace que en este caso dirá Leer Más y que apunta a la entrada correspondiente. Al hacer click allí, se abrirá el post completo en otra pestaña.

¿Y cómo ocultamos el contenido del post? Bueno, ahí ya tenemos que hacerlo manualmente. Al igual que hacemos con los posts expandibles, debemos agregar una etiqueta que oculte cierta parte del contenido, eso lo hacemos de la siguiente forma:
el contenido visible del post
<span id="fullpost">
el contenido oculto del post
</span>
y si queremos automatizarlo un poco, agregamos eso mismo en CONFIGURACIÓN | FORMATO, dentro el cuadro Plantilla de entrada.

Lo único que faltaría sería poner el CSS correspondiente que, en este caso, sería algo así:
<b:if cond='data:blog.pageType != "item"'>
<style>
.post {
background-color: #FAF5FF;
border-bottom: 10px solid #FFFFFF;
float: left;
height: 220px; /* la altura fija de todas las entradas */
margin: 0 10px;
overflow: hidden;
width: 310px;
}
.fullpost { /* esto ocultará parte del contenido */
display:none;
}
.leermas { /* las propiedades del enlace con el texto Leer Más */
clear:both;
display:block;
text-align: right;
}
</style>
</b:if>
Bueno. Hay que decir la verdad. Eso, no es todo.

De aquí en más, deberemos tener una serie de cuidados al escribir un post ya que lo que ocurre con este tipo de técnicas es que limitan las cosas que podemos hacer o bien, nos obligan a tener en cuenta el tipo de contenido para que el blog no se distorsione.

Primero que nada ¿qué pasa con las imágenes? Si están ocultas, no hay problema pero, ¿y si están visibles? Las posibilidades son varias:

Podemos forzar a que directamente no se vean agregando la definición dentro del CSS anterior:
.post img {display: none:}

Podemos forzar a que se redimensionen agregando:
.post img {height: 100px; width: 100px;}

Podemos forzar a que se redimensionen y floten agregando:
.post img {float: left; height: 100px; padding: 0 10px 0 0; width: 100px;}

En la mayoría de estos casos, deberemos modificar el código que coloca Blogger cuando insertamos imágenes ya que en ese código se establece la dimensión así que el CSS no funcionaría.

También podemos preveer estas situaciones y usar sólo imágenes de cierto tamaño, pensando cómo se verá eso que escribimos en un ancho más pequeño de lo normal pero no será suficiente porque se nos seguirán presentando alternativas que no podemos contemplar; por ejemplo, ¿qué pasa con los videos? Podríamos hacer más o menos lo mismo, redimensionarlos agregando algo así como:

.post object, .post embed {width: 150px; height: 120px;}

Un ejemplo con algunas de esas características es el que puede verse en este ejemplo online.

¿Y si usamos tablas? ¿Y si tenemos DIVs con medidas fijas? ¿Y si los párrafos están justificados y en un ancho tan pequeño aparecen espacios enormes entre las palabras? Sí. Podemos resolverlo pero habrá que hacerlo todo manualmente y cada tanto, se nos presentarán dificultades o condiciones en las que no habíamos pensado.

A todo esto, yo le sumaría un problema no visible. Ocultar el contenido no hace que ese contenido no sea cargado, es invisible pero está ahí por lo tanto, la carga del blog no es menor, es igual o, eventualmente, más pesada así que si alguien cree que esta es una solución para el tiempo de carga, se equivoca.

Este tipo plantillas, como cualquier otra, tiene un uso específico y no cualquier blog podrá adaptarse con sencillez. Si el blog es básicamente textos, no habrá problemas; si utiliza características multimedia, será más complejo de controlar y esto no es sólo por las limitaciones del mismo Blogger; un blog de WordPress de tipo magazine requerirá que cada post tenga ciertas característica y nos exigirá que agreguemos algunos datos o hagamos las cosas de cierta manera para evitar que se descompagine.

Sin embargo, WordPress posee varios métodos para lidiar con este tipo de idea. Esto que se muestra hasta acá podría ser similar a lo que se llama MORE, es decir, un corte manual, hecho por nosotros mismos. Otra posibilidad es mostrar un resumen automático de cierta cantidad de palabras (sólo de palabras), un resumen que es un texto plano, que no tiene contenido HTML (ni formatos ni imágenes ni objetos); esa característica es bastante compleja de reproducir en Blogger ya que sólo disponemos de JavaScript como lenguaje.

Una última posibilidad es la llamada EXTRACTO.

Un extracto es un texto que uno agrega a una entrada pero que no es parte de la entrada, sólo se muestra en la página principal o en las páginas donde se listan entradas pero no en las páginas individuales ¿Para que sirve? Para olvidarnos del contenido del post y no tener que lidiar con él. Sea cual sea su contenido, el resumen que se mostrará es independiente de este, lo escribimos en otro lado.

¿Será posible crear en Blogger un extracto de las entradas que no cargue el post entero?... Oh, sí, se puede.

21 comentarios:

Ariane  

agora já não durmo...:( aguardo ansiosa o próximo capítulo! :D

Responder
Graciela de Palomas  

jajaja JMIUR, para mi se llama VOLVER A LOS PRINCIPIOS DE BLOGGER...creé la plantilla, se llama PALOMA VAGA (que no estará a la vista jijiji)...si no aprendo ahora nunca!!!-
Dime tesoro una pequeña respuesta: el Download, bien en mi PC nueva estaba pero solo por 40 días o algo así, ¿se compra aparte o se puede descargar???...besos y buen día para todos!!!

Responder
JMiur  

Ariane: Espero poder termianarlo entre hoy y mañana :D

Graciela: ¿A que Download te referís?

Responder
LuzdeLuna  

Hola JMiur,me encanta esta forma de presentar el blog, claro que no todas las temáticas se pueden ajustar a esta forma, en el mio quedaría sin sentido, pero es sumamente valioso para un blog de ayuda por ejemplo.
Pensando cómo me gustaría presentar el mio, (creo que aún no hay una forma en bloggers) es la página principal sin post, solo con un enlace de entrada.:)
Pensé en hacerlo con otro blog que redirija, pero perdería la url. Bue, cuando tengas un minuto libre me tiras una idea si?
Un abrazo

Responder
Gem@  

Casi me lo pierdo :O
Buen regalo para un día como hoy :)

Responder
Graciela de Palomas  

J ¿qué significa); buscamos esta parte y eliminamos (o comentamos), he buscado jajaja, lo que se encuentra!!! mama mía!!!...chauuuu

Responder
JMiur  

Luz: eso sería lo ideal pero, hasta ahora no le encuentro una solución razonable.

Gem@: me alegor alegrar su dia o ... enloquecerlo un poco :D

Graciela: ¿No encuentras eso? Las plantillas varian mucho pero, en última instancia, solo se trata de la fecha y no afectará nada más que la estética. Puedes seguir adelante igual y luego vemos cómo sacarla.

Responder
Graciela de Palomas  

JMIUR es una plantilla como has dicho, sí lo encuentro, pero cuando elimino lo marcado en negrita...sale ERROR EN INGLÉS ESE MALDITO MENSAJE jajaja...ahhh eso le pediría a blogger o los robots o extraterrestres QUE NO APAREZCA MÁS!!! jajaja...aprendí a cerrar todo bien...pero por mi corta experiencia sale igual!!!...bien sigo con la segunda parte ohhh que me encanta!!!

Responder
JMiur  

Se debe estar borrando algo que no se debe o falta borrar algo. Continua y listo. Lo otro se resuelve luego. cualqueir cosa, me envias esa parte de la plantilla y te digo.

Responder
Nuria Cortés  

Hola JMiur,

Vuelvo a consultarte... ¿Se puede hacer este estilo magazine en un videoblog? Es decir, cuando en los post el texto no va acompañado de una imagen sino de un video? Espero que haya solución porque esto me vendría muy bien a mí!!

Responder
JMiur  

Todo es posible, Nuria; lo que ocurre es que allí, en ese caso, habría que ver bien qué es lo que uno mostrará en el home y de qué modo hacerlo.

Dependerá mucho de lo que uno diseñe o pretenda; no hay una respuesta general para eso. Una idea que se me ocurre ahora es colocar un texto explicaitivo o una imagen en miniatura que no se vea en las entradas individuales pero que se vea en el home.

Habría que diseñar la plantilla para eso, claro.

Responder
Nuria Cortés  

¿Y es posible solucionarlo con el Leer Más? Lo he intentado sustituyendo donde ponía img por video pero no me funciona... ¿mi intento es un disparate? -no me ha salido, se me encoge efectivamente pero no se ve el mini video)

Responder
JMiur  

Nuria:
Debería ver el ejemplo funcionando para ver si es algo que tiene alguna solución sencilla.

Responder
Dancer  

hola, queria consultar sobre esas plantilla de los blog de peliculas, donde cada post aparece identificado por la portada en imagen de la pelicula y que al darle doble click pasa a la descripcion, como puedo lograr algo asi? tengo un blog de pelis y me parece mas practica esa presentacion. desde ya muchas gracias!

Responder
JMiur  

Tendrías que buscar ese tipo de plantilla en la web; no sé exactamente a cuales te refieres.

Responder
Gassip  

Segui tu tutorial a la perfección jijiji pero resulta que no puedo ver ningun post jijij puedes ayudarme mi blog s eve vacio jajajaa http:\\www.gassip.tk :s

Responder
JMiur  

¿Por qué no descargas la plantilla demo y pruebas en un blog auxiliar? No es algo que pueda verse online.

Responder
orochimarusama  

ola que ta jmiur disculpa pero tengo una duda ,le verdad es que en mi blog de anime descarge e instale una nueva plantilla ,pero sus entradas estan en tipos como cuadritos y la verdad to les quisiera poner un rectangulo que diga leer mas y quitar esos cuadros ¿como puedo hacerlo?

Gracias

Responder
JMiur  

Has descargado una plantilla de tipo Magazine así que deberás cambiarla bastante para eliminar eso. No hay un respuesta exacta, hay que mirarla y ver si se puede que es más o menos lo mismo que hacerla otra vez.

Responder
Martín Rocha  

JMiur te comento que a raiz del comentaria anterior que te realizaba aplique este sistema de leer mas que es genial pero son dejarle resumen a las entradas y asi lograr que solo sean las imagenes y usnado el css de ese sitio de ejemmploq ue te habia pasado.
Lo que te queria preguntar de que manera logro que se muestren en 3 columnas y no en una sola y en cada una los textos de navegacion, no se si esta mal agregado o su ubicacion.
Desde ya muchas gracias JMiur saludos.

Responder
JMiur  

Así como está diagramado, no sé. Debes crear DIVs independietnes para cada resumen y darles una clase; luego, hacer que, por ejemplo floten. Pra eso debes elimianr el clear que tiene cada uno y quitar la navegación de Blogegr que se repite.

De todos modos, tres de ese tamaño no entrarán porque el ancho es insuficiente.

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