JMiur [E]

Hace ya varios días, Ariane preguntaba si era posible aplicar el mismo truco que permite mostrar los comentarios pares e impares con diferente color, a los posts de tal forma que se vean con fondos diferentes. Imaginé que sí y quedé en contestarle así que, trataré de cumplir.

Para quien no tenga implementada algunas de esas modificaciones, hay que aclarar que lo primero que debemos tener es identificados los posts de manera individual. Eso, puede hacerse agregando el atributo ID en ellos. Buscamos entonces en la plantilla algo así:
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Y le agregamos lo que se muestra en color aunque hay que tener en cuenta que el atributo class puede variar en algunas plantillas pero no tiene importancia; lo importante es agregarle el ID, sea cual fuera el nombre de la clase. Con eso, identificamos cada post de manera individual en las páginas que muestran varios.

Ahora, agregaremos el script y el estilo, justo antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

<style>
.entradaImpar {background-color: #F0F8FF; padding: 10px;}
.entradaPar {background-color: #F0F0F9; padding: 10px;}
</style>
Y por supuesto, las propiedades de estilo son personales así que puede agregarse cualquier otra.

Por último agregaremos el contador y la llamada a la función y para eso, biuscaremos esta parte:
<b:includable id='main' var='top'>
.......
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- no ejecutamos la función en las páginas individuales -->
<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>

</b:loop>
.......
</b:includable>
De esta manera, los posts se mostrarán con fondo de color intercalados salvo en las páginas individuales donde se seguirán mostrando con el esquema gráfico normal del blog.

Puede verse un ejemplo en un blog de pruebas

35 comentarios:

Gem@  

Pues lo voy a probar, y por lo que veo en las páginas individuales no es posible pero aún así está original y se diferente de lo que estamos acostumbrados a ver.

Responder
Maite  

JMiur, puestos a hacer experimentos ... :D:D...

recuerdas que te pedí si existía un contador de entradas por día?
Pues he pensado otra cosa, bajo cada entrada sale la fecha y al pinchar sobre ella te lleva directamente a la entrada individual.
¿Sería posible que al pinchar sobre la fecha saliesen todas las entradas del día, al igual que al pinchar en etiquetas salen las correspondientes a la misma una tras otra?
:D el caso es ponertelo difícil

Responder
Ariane  

ah, isto sim é presente de Natal! :D Vou testar, mas já acredito no resultado. Muito obrigada mesmo. ;)

Responder
Ki  

Siempre te leo, pero recién me animo a comentar... Tienes artículos sumamente interesantes, y tu pagina esta muy bien diseñada.. es realmente cómoda para leer...

Un abrazo!

Responder
maty  

Hace días que me ronda implementarlo en una bitácora que cuido. Pero lo que quiero es diferenciar los comentarios del autor del resto.

Responder
JMiur  

Gem@: En realidad, en las páginas individuales también seria posible, lo que habría que saber es cuál es el criterio a usar. Por ejemplo, deliro un poco, el mes, el dia de la semana ... tal vez la etiqueta :)

Maite: Lo pensaré, tal vez leyendo los feeds, no sé. Sigue siendo untema engorroso porque no hay datos que leer o cómo leerlos.

Ariane: espero que te sea útil. Lamento la demora :)

Ki: Gracias por el comentario. Un abrazo :)

Maty: Esto está basado en otra serie de posts que explican justamente ese tipo de cosas.

Responder
Maite  

Andaré al ojo por si se te ocurre algo :D gracias

Responder
maty  

Gracias por la respuesta. Pasados unos días me pondré a ello y diré algo.

Es para la casa virtual del filósofo y pedagogo Gregorio Luri: http://elcafedeocata.blogspot.com/ (también quiero añadir un pie de página donde poner los archivos multimedia a cuenta de las entrevistas concedidas a los medios, o tal vez crear una sección/página al efecto).

- Buenas Fiestas -

Responder
Anahí  

JMiur, dígame dónde es que tengo que id-entificar el cada post? Tengo todo esto hecho en el blog de pruebas, y chequé haberlo copiado bien pero no funciona, así que supongo que me falta ¿identificar cada post?, si es así, ¿dónde?
Gracias.

Responder
Santi · Silvia & Compañía  

Que tengas un fantástico 2009.
Besos Santi, Silvia e Itzan.

Responder
JMiur  

Anahi:
Para identificar los posts, es que ponemos esto:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

No veo el blog de pruebas. Dime donde está y me fijo online.

Santi, Silvia e Itzan:
Muchas gracias por los buenos deseos ¡Qué tengan un buen año!

Responder
Anahí  

JMiur, lo hice acá con el mismo resultado (no funciona)

http://lospoetasdenuestramerica.blogspot.com

(el de pruebas lo tengo "cerrado al público", porque ahí hago mis bodrios y me estaban entrando visitas...)

Gracias.

Responder
JMiur  

Anahí:

Por lo que veo del código online, parece que hay añgún DIV mal cerrado. Los posts tienen el ID colocado pero, debe haber algún </div> en una posición errónea´o algo similar. Es que en el bucle de los posts se van sumando cosas que estan en el footer como el script de Google Analyticas, por ejemplo.

Si podés, revisalo y si no, mandame la plantilla a ver si lo encuentro.

Responder
Anahí  

JMiur, en algún lugar le le había dejado un mensaje, pero veo que no fue acá ;P
Le mandé la plantilla de:
anahi-cajademusica.blogspot.com (por si lo quiere ver online)
Ahí no tengo avisos de google entre los posts.
Saludos.Gracias.

Responder
JMiur  

No hay problema, Anahí, justo hace unos minutos, acabo de enviarte un mail. Espero que sirva.

Responder
Anahí  

JMiur, para que vea el resultado (ojo, todavía no me decido con los colores, no me dejaba guardar la plantilla hij una gran siete :X , por los ads):
lospoetasdenuestramerica.blogspot.com/
Gracias.

Responder
JMiur  

Genial :D Buen trabajo, Anahí.

Responder
Iradai  

Hola Jmiur
Tengo una plantilla tipo Rounders 3, me gustaria saber si se puede poner un fondo fijo por detras de lo que son las entradas y la sidebar.
Si se pudiera de que tamaño tendría que ser la imagen para que no saliera cortada o repetida para completar espacio.

Gracias de antemano

Iradai

Responder
JMiur  

Se puede poner una imagen de fondo pero, depende de lo que quieras hacer.

Puede ponerse en outer-wrapper y alli, debería ser de 900 pixeles. Es el ancho de ese rectángulo que ocupan las entradas y la sidebar.

O puede ponerse en en body en cuyo caso, no hay un ancho fijo sino que depende de la resolución de la pantalla de quien mire.

La imagen no tiene por que ser justa ya que el CSS permite establecer si se corta, si se repite o cuál es la posición.

Responder
Iradai  

Si se pone en el outer-wrapper, no interfiere la resolución de la pantalla, ¿entonces habría menos problemas de que se desconfigure la imagen, y se repita para completar?
Estoy pensando en poner una imagen en vez de una textura o color fijo, de ahí que quiera que se quede fijo y no se repita.
¿en que parte del codigo html añadiria la imagen?

Gracias

Iradai

Responder
JMiur  

En outer-wrapper no interfiere porque tiene un ancho fijo.

Las imágenes se repiten o no se repiten dependiendo de las propiedades que les demos. Fíjate en este post para ver las posibilidades.

Eso, debe colocarse en las definiciones de estilo. Por ejemplo:

#outer-wrapper {
................
}

Responder
Iradai  

Hola Jmiur, he intentado ponerlo en el outwrapper, pero no hay manera.
Lo que conseguido poner en body, pero claro dependiendo de la resolución se desconfigura.
Puedes decirme la frase exacta que hay que poner en el outwrapper para poner la imagen de fondo.
Espero tu respuesta, gracias de antemano

Iradai

Responder
JMiur  

Depende de lo que queiras hacer. En principio, es elo mismo que has colocado en el BODY.

Lo que ocurre es que las tres columnas también tienen un fondo, en este caso de color plano y, como están arriba, tapan el fondo.

Entonces deberías eliminar esos colores de fondo que están en background de:
#main-wrap1
#sidebartop-wrap
#sidebarbottom-wrap1

Lo cual hará de debas también cambiar el color de los textos que ahora son negros. Eso, está en diferentes definiciones de color:XXXXX

Responder
Iradai  

Jmiur, lo que quiero hacer dejar una imagen fija de fondo, manteniendo de momento el color de los post y de la sidebar, como si estos flotaran encima de la imagen.
Es como lo que tengo puesto ahora en mi blog (http://www.buscandopelis.blogspot.com), pero quiero que este en el outwrapper para que no se desconfigure con otras resoluciones, he intentado poner la misma frase pero no funciona.

Un saludo
Iradai

Responder
JMiur  

Colócala y déjala puesta para que pueda ver el código que está poniendo.

Responder
Iradai  

Ya he puesto el código tanto en outwrapper como en body. Si quito el que está en body, dejo de ver la imagen.
Mira ver si estoy escribiendo mal el código en outwrapper.

Gracias
Iradai

Responder
JMiur  

El código es incorrecto. fíjate que difiere del que tienes en el body. Dice:

background-image: url(http://i487.photobucket.com/albums/rr240/appryl3/LunaAnochecer.jpg) fixed no-repeat top left;

Y, en todo caso, debería decir:

background: transparent url(http://i487.photobucket.com/albums/rr240/appryl3/LunaAnochecer.jpg) fixed no-repeat top left;

Responder
toni  

continue assim

Responder
DJ BENKO  

Hola me gustaria saber si del mismo modo que se cambian los titulos de la siderbar para quedar mas llamativos, se podria hacer con los titulos del post.... Ps los quiero centrado y con otro tipo de letras.. espero pronta respuesta.. Gracias

Responder
JMiur  

Te respondí en esta entrada

Responder
LobosDiario  

Jmiur. Es excelente el blog de ayuda que tienes. Me gustaría saber si los posts se pueden individualizar, es decir, si se pudiese, como en la etiqueta IsFirst post, hacer algo así como entrada 2, entrada 3 y así.

Mi idea es que la primer entrada tenga letra más grande, y así ir decreciendo las mismas. Te agradeceré la respuesta

Responder
JMiur  

No hay un dato que permita contar las entradas así como hay uno que permite detectar el primero pero, si sólo se trata de modificar un estilo tal como el tamaño de la fuente, el concepto a seguir es el mismo que el que muestra este post, es decir usar JavaScript para contar y ejecutar alguna función que vaya disminuyendo el tamaño de la fuente.

Algo que se me ocurre es establecer un tamaño de entrada y luego irlo disminuyendo de a dos en dos:

var fuente = 16;
function ContarP(cual) {
document.getElementById(cual).style.fontSize = fuente + 'px';
fuente = fuente -2;
}

Sólo hablo en voz alta :D

Responder
resultadojogodobicho.blogspot.com  

(y)Legal hermano!!!!!muy biene...

Responder
cafe72  

saludos por fin me animo a participar espero sea en el lugar adecuado..
Una pregunta quisiera saber si ha cambiado el diseño de las entradas, pues ahora que estoy re-construyendo mi blog en las entradas no puedo editar como antes, ejemplo: crear enlaces, subrayar texto,el color del texto,color de fondo del texto,tamaño ,tipo de letra, etc.....O sólo es mi blog? saludos y espero me puedas ayudar...!!ah y eso de crear página que para que es? eso que pusieron abajo del nombre del blog...ahora si, hasta pronto :)

Responder
JMiur  

No, nada ha cambiado; los editores siguen siendo los mismos; varian dependiendo de la Configuración pero todos ellos poseen esas opciones.

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