JMiur [E]

Esto comenzó como curiosidad y luego fue ampliándose tanto que terminé por dividirlo en tres partes, como si fuera una novela de misterio así que, un poco de paciencia verguenza

Hace ya un mes o más, Gem@ me mostraba un truco que había visto en Blogger Buster, donde se explicaba la forma de crear algo similar a una de esas plantillas que están tan de moda en WordPress y que, genéricamente, se denominan tipo magazine.

Luego de varios intentos infructuosos, renunciamos al asunto, no tanto porque no funcionara sino porque su uso terminaba siendo bastante limitado pero ... año nuevo vida nueva así que vamos otra vez a la carga a ver hasta dónde es posible llegar risa

Para guiarme en el tema, prefiero la entrada de Ariane en Templates Novo Blogger por varias razones, porque me resulta más clara y además, porque recientemente la han ampliado y además, nos dan la plantilla demo para descargar.

La idea, entonces, es empezar desde ahí y ver las dificultades que tiene este tipo de plantilla y las alternativas que ofrece.

Comienzo entonces con la plantilla mínima modificada en su ancho. Para eso, recurro al tutorial que muestra cómo hacerlo o bien, cambio las dos o tres definiciones CSS directamente:

en #header-wrapper, #outer-wrapper y #footer-wrapper cambiamos el ancho y escribimos width: 980px;
en #main-wrapper usamos width: 560px;
en #sidebar-wrapper usamos width: 390px;

Lo primero será eliminar la fecha de los posts. Esto, lo hacemos porque sino, se nos hará difícil de manejar esa parte ya que Blogger la separa del resto; luego, veremos si hay otra alternativa. Entonces, expandimos los artilugios, buscamos esta parte y eliminamos (o comentamos) las lineas en negrita:
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>
Ahora, sólo nos queda modificar una cosa: el ancho de los posts que, en realidad, no están definidos en ninguna parte. Como todo en el blog, el área de posts es un rectángulo, un DIV que está dentro de otro y el ancho es definido por alguno de los "elementos padre". En la plantilla mínima pasa esto:
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Entradas del blog" type="Blog">
<div class="blog-posts hfeed">
<div class="post hentry uncustomized-post-template">
....... aqui se muestra el post .......
El ancho de los posts es igual al ancho de main-wrapper pero, podemos modificarlo y, por ejemplo establecer que su ancho sea la mitad; de esta manera, como flotan, aparecerán uno al lado del otro en lugar de uno debajo del otro. Pero, esto lo queremos hacer sólo en la página principal y no en las entradas individuales así que lo más sencillo es usar los condicionales y agregar el estilo CSS, justo después de </b:skin>. Por ejemplo:
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post {
background-color: #FAF5FF;
border-bottom: 10px solid #FFFFFF;
float: left;
margin: 0 10px;
overflow: hidden;
width: 310px; /* este es el dato importante */
}
</style>
</b:if>
Si no hacemos nada más, lo que veremos, será esto.

Con facilidad, podemos colocar un post al lado del otro pero, si no hacemos algo más, el resultado será extraño porque las alturas de cada entrada son variables y el resultado será bastante aleatorio así que el punto fundamental de este tipo de plantillas es que debemos controlar esa altura, debemos establecerla nosotros mismos para que cada rectángulo sea igual al otro, sin importar el contenido. Entonces, podríamos cambiar un poco el estilo CSS anterior, indicar la altura (height) y, para evitar que se corte, poner una barra de desplazamiento lateral:
.post {
background-color: #FAF5FF;
border-bottom: 10px solid #FFFFFF;
float:left;
height: 200px;
margin: 0 10px;
overflow-x: hidden;
overflow-y: scroll;
width: 310px;
}
El resultado será un poco mejor pero, bastante primitivo así que habrá que seguir pensando. (ver ejemplo online)

Respiramos y vamos con la segunda parte ...

40 comentarios:

k_nelita  

Se me hace bastante engorroso esto, pero veo que es lo que se está usando.
Te puedo tirar una idea? Se me ocurre que para que no salgan las barras laterales se podría incluir el leer mas... en alguna de sus opciones no? Me refiero a las diferentes opciones de leer mas, en expandible, etc. Alguna que se adecuara a esto, entonces todas las entradas tendrían el mismo largo por así llamarlo y se evitarían esas feas barras de desplazamiento, es una idea, no se si es aplicable, yo solo tengo ideas, de ahí a que se pueda es otra historia... ;)

Responder
Ariane  

o que eu fiz foi estabelecer uma altura e usar o hack Leia Mais (veja aqui: Teste) e coloquei o template a disposição para download lá no meu blog. Ainda não sei se é o ideal, mas já evita as barras. O que você acha?

Responder
Daniel  

Muy interesante... pero como dice Ariane y K_nelita, es mejor usar el leer más... tantas barras de desplazamiento hacen que se vea feo y dificulta la navegación.

Responder
JMiur  

Oh si pero ... no se apuren, esto continua por varios días más :D

Es sólo para poner un poco de suspenso :D

Responder
k_nelita  

Perfecto el ejemplo que pone Ariane, es lo que yo decía, pero ya que estamos vuelvo a la carga, para que la sidebar tan ancha? Que vas a meter allí? hay una sola hilera de gadgets, etiquetas, archivos lo que sea, el espacio restante para que es? es simplemente un espacio vacío... :S

Responder
Silvi  

Wow, en algún punto tuve una gran obsesión con las plantillas tipo magazine y las envidiaba de wordpress. Pero creo que los cibernautas no muy expertos se pierden en la navegación. De todas maneras me encantaría hacer una prueba con una plantilla modificada así!

Responder
JMiur  

k_nelita:
Eso no es una plantilla para colocar en ninguna parte, sólo es un demo que sirve para mostrar una técnica que por cierto, recién comienza :D

Sivi:
Si quieres, hazlo en un blog de pruebas pero espera que durante la semana hay más y conviene tener el panorama completo.

Responder
Graciela de Palomas  

Jmiur he visto tu demo, también el blog de Ariane, me gusta la idea de tener como un blog periódico...seguiremos tus pasos por la vereda...digo por el blog!!!
Has recibibo mis respuestas del consurso???..te lo envié a contacto!!!...buen día!!!

Responder
Quique  

Genio! Estoy impaciente! :)

Responder
Gem@  

Me gusta el experimento, y bueno ya sabía más o menos pero sigo impaciente el desarrollo y haré mis pruebas como de costumbre.

Por cierto no veo para suscribirme a los comentarios con este formulario :(

Responder
Grupo Hiper  

Como vi que te paseaste por mi blog sí, realmente esto que haces ya esta hecho por Smashing. Yo lo puse estos dias puedes verlo, aunque ya creo que lo viste no?

http://1hiperdelared.blogspot.com/

Saludos de vez en cuando vienen bien no?

Responder
BanakaBanaka!!  

Hola,
nosotros también tenemos algo parecido en nuestro blog desde el principio:

http://banakabanaka.blogspot.com/

Sólo que a dos columnas y sin barras de desplazamiento.

En cualquier caso qué bien que alguien explique cómo hacerlo, porque nosotros nos volvimos locos para conseguyirlo trasteándo con el código. Saludos y gracias.

Responder
JMiur  

Graciela: sí, lo recibí.

Gem@: hay que seguir intentándolo aunque, como ya hablamos, en Blogger, el uso es limitado.

Grupo Hipier: No recuerdo haberlo visto, es posible, no hay muchos sitios de Blogger que usen este tipo de sistema. En Smashing no me he fijado pero, es posible que haya explicaciones al respecto; la rueda ya está inventada hace mucho y cada uno la descubre en algún momento. Nada del otro mundo. No entiendo el resto del comentario.

BanakaBanaka: sí, ese sitio lo vi cuando mandaste un mensaje por Twitter. Supongo que aplica el mismo criterio o algo similar, es algo que online no puede verse.

Responder
Antony  

Hola! :)
Que buena idea!
Este truco es igual como lo tiene Pizcos en su blog? Y Habra una diferencia?

Saludos!

Responder
Graciela de Palomas  

J estamos en una clase de yoga jajaja...ésta mañana no me dí cuenta de 'respiramos...' jajaja...ahora toca buenas noches, si puedes dormir, escuché que la temperatura se fue arriba!!!

Responder
ARMIDA MARTIN  

No puedo decir que està bueno sino rebueno!!!

Gracias por compartir...

Responder
Anónimo  

hola!
estoy intentando configurarlo pero uno de los problemas que tengo es que no me reduce el tamaño de las imagenes en la pagina principal. se ve igual que en la pagina individual de la entrada.
por que puede ser?
saludos
y excelente entrada

Responder
JMiur  

Que bien. Estos comentarios los respondí ayer y el mio ha desaparecido :D

Antony: lo estuve biendo y la idea es la misma. Pizcos está mostrándolo como mucho mñas detalle. Mi intención es mostrar sólo la técnica general y ver hasta donde podemos llegar.

Graciela: han sido dos dias terribles y con cortes de electricidad, imaginate !!!!

El tema de las imágenes está más explicado en la segunda parte o en el blog de Ariane.

Es cierto, todo eso debe ajustarse y agregarse.

Responder
ELPLANETADELCELULAR  

Hola queria saber si hay alguna manera de cambiar de lugar un post,osea lo publico ahora pero ponerlo como que fue el primero...me explico??...
ha otra cosa si se puede poner en color una sola de las etiquetas,que esten todas negras y una sola se destaque en color rojo....

elplanetadelcelular.blogspot.com

Responder
JMiur  

Los posts se ordenan por fecha; esa es la única regla así que deberías colocar uno con una fecha adelantada.

Lo de las etiquetas es complciado, no hay nada directo, para eso, habría que crear un script.

Responder
ELPLANETADELCELULAR  

y como ago para poner uno con una fecha adelantada????

Responder
JMiur  

Publica un post ya, con la fecha actual y luego lo editas y le cambias la fecha.

Es el único método porque sino, queda como "pendiente".

Responder
ELPLANETADELCELULAR  

:X:$:$:$:$:$:$...como le cambio la fecha???...en editar entradas no me deja...:(:(:(:(:(

Responder
JMiur  

Sí, desde el editor. No hay ningún problema en cambiar las fechas cuantas veces se quiera.

Responder
Víctor  

Bueno... je, je, je, me da un poco de verguenza, pero yo me quedé en este post y no paso a los demás.

Resulta que mis post no "flotan", no logro de ninguna forma que los post tomen un orden de "uno al lado del otro", ya que cuando les cambio el tamaño, los post quedan uno debajo del otro, he entrado a este post regularmente, intentado y desmotivado he salido una y otra vez, pero hoy como la cuarta o la quinta vez que lo intento, pues ya me doy cuenta que por mas que lo intento no logro hacer que me salgan los post "uno al lado del otro".

¿Alguna ayudita Jmiur?

Responder
JMiur  

Si se trata de La Plegaria de un pagano, te diría que allí, el problema está en esa imagen que se muestra sobre cada post y que sirve de cabecera:

<img height="33" align="middle" width="600" title="Post" src=".......barra-mac-superior-2.0.gif" alt="Post"/>

La imagen tiene dado un ancho fijo de 600 pixeles y entonces, si reduces los posts y flotan, esa imagen queda en el medio y anula la flotación. Haz la prueba quitándola, aunque sea temporalmente y luego, coloca en la clase .post un width de mas o menos 250px y float:left.

Eso lo puedes probar sin necesidad de guardar la plantilla, usando la Vista Previa.

Si quitando la imagen sigue ocurriendo eso, es porque el ancho de dos posts y sus márgenes, es superior al total. Lo verificas reduciendo ese valor.

Responder
Jared  

Tengo un problema que sé que es tonto pero no puedo resolver:
Quiero poner un color de fondo para las entradas, pero el resultado es este: http://yfrog.com/effondovtj
Quiero que el texto se aleje de los bordes.
Probé con padding pero no resulta, qué está mal?

mi blog es: http://tinyurl.com/yf8fwp6

Responder
JMiur  

No sé cuál es el resultado que quieres obtener. E todos los casos, debes usar background-color pero, dependerá de qué parte o partes quieres colorear:.

#main-wrapper {} toda la columna izquierda
.post {} lo mismo pero no incluirá la fecha
.post-body {} sólo colcoa el fondo en la entrada en si misma

Responder
Jared  

sisisi, entiendo, mi problema no es saber dónde colocar el background, el tema es el texto que queda muy al borde del main-wraper, post y post-body.

Responder
JMiur  

En esas mismas definiciones, puedes agregar la propiedad padding apra separar el contenido de los bordes.

Responder
Jared  

yes! gracias! con padding pude, pensé que margin era lo que definia el texto, pero era el borde del bloque.
Una pregunta más, qué diferencia hay entre px (pixels) y em (que no se lo que es)?

.post {
background: #9d9d9d;
padding:.5em .5em .5em;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
}

Responder
JMiur  

En términos generales, margin separa el bloque y padding separa el contenido de ese bloque.

px es pixeles, una medida que tiene que ver con la pantalla misama. em es una medida que es una referencia al tamaño de la fuente definida para cierta etiqueta; es por decir así, un porentaje del tamaño de esa fuente. 1 es el 100% 2, es el doble, etc.
Puede usarse cualqueira de ellas y hay una equivalecia aproximada entre ambas pero, como las fuentes dependen muchas veces del navegador, en principio, es preferible usar pixeles como unidad a menos que las medidas tengan alguna relación con los textos.

Por ejemplo, quisiera que el padding equivalga a 4 caracteres, sin importar si cambio la fuente del texto.

Responder
Jared  

Gracias sensei :) muy clarito todo.

Responder
Otto la piloto  

Hola! he instalado la plantilla en lotaoto.blogspot.com
como es un blog de relatos, me gustaría saber como poner un pequeño trozo en cada cuadradito, para que se pueda "leer más" al apretar. Podrías indicarme?? muchas gracias por la labor

JMiur  

Te falta establecer l ID de cada post:. Revisa la tercer parte del tutorial.

<div expr:id='&quot;original-&quot; + data:post.id' style='display:none;'>

Responder
Otto la piloto  

OK, muchas gracias, ya he seguido los pasos. Pero veo que dices que es complicado añadir lo de 'leer más'??
También tengo otro problema, sabes cómo podría cambiar la posición de la barra principal de blogger que en la plantilla que tengo queda abajo a la derecha?? gracias mil

JMiur  

Lo que indican estas entradas son algo genérico así que los detalles, habría que verlos uno por uno. No es una plantilla desarrollada. Sólo es un ejemplo de cómo usar determinadas técnicas.

En cuanto a la barra de Blogger, se ve así porque parece que está dentro de la sidebar; puedes moverla, arrastrándola y colocándola afuera, en cualquier otro lado.

Otto la piloto  

ahi voy, hasta otra. gracias!

Responder
Jose Luis Castro  

hola,lo he puesto en mi blog lo he adaptado a mi diseño, pero ayer trate de ponerlo en dos columnas y me es imposible de alinear. http://elpetatedelmarinero.blogspot.com.es/ si me pudieses ayudar... te lo agradeceria pues yo ya no se que hacerle. Gracias por tu atención

JMiur  

Tienes alguna etiqueta DIV mal anidada porque en el código fuente se ven los divs con clase date-outer incluidos unos dentro de otros.

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