JMiur [E]

La característica principal de un blog es que eso que publicamos se ordena de manera cronológica, desde lo más nuevo hasta lo más viejo, por lo tanto, el dato que indica la fecha suele ser un dato importante.

Uno podría imaginar que las entradas son una serie de rectángulos apilados, cada uno de ellos conteniendo datos (fecha, titulo, etc) y eso sería lógico pero, la forma en que Blogger maneja las fechas de las entradas es extraña; por algún motivo, esa fecha está afuera, en un rectángulo separado y accedemos a ella con un dato tan particular que sólo se muestra una vez, es decir, si hay dos entradas en la misma fecha, sólo se muestra una de ellas:


El formato de esa fecha es la que podemos establecer en Configuración | Formato:

Formato de cabecera de fecha

En un blog "normal con algún truco, podemos hacer que se muestre en todas las entradas, algo imprescindible si usamos alguna característica gráfica como los calendarios pero que esté separada no sólo molesta en este sentido, también complica las cosas cuando usamos alguna clase de plantilla donde se muestran las entradas de manera resumida ya que debemos ocultar esa fecha.

En realidad, no es necesario seguir las reglas de Blogger y es más sencillo eliminar ese dato tal como está ya que de todos modos, la fecha es accesible igual sólo que el dato a leer es otro.

En una plantilla mínima, la fecha se muestra de este modo:
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<data:post.dateHeader/> es el dato que contiene la fecha y es el que molesta así que fuera con él; eliminamos todo eso de un plumazo.

Hay un segundo dato que nos da la fecha y que se encuentra dentro del post en si mismo y es todo lo que que necesitamos. Se llama <data:post.timestamp/>

Por lo general la vemos en el footer de los posts y lo usamos para mostrar la hora de la publicación ya que así está establecido por defecto pero, en la misma Configuración | Formato, podemos seleccionar la forma en que se mostrará. Por ejemplo, la definimos como fecha:

Formato de hora

De ese modo, la hora no será la hora sino la fecha en formato mes/dia/año y la vamos a usar para crear un DIV nuevo que contenga el encabezado completo de cada entrada, la fecha, el título, el autor y cualquier otra cosa que se me ocurra.

Por defecto, el título de las entradas se encuentra en <b:includable id="post" var="post" > y tiene este código:
<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>
Vamos a cambiarlo por algo así:
<div class='elEncabezado'>
  <span class='lafecha' expr:id='&quot;fecha-" + data:post.id'>
    <script type='text/javascript'>calendario(&#39;<data:post.timestamp/>&#39;);</script>
  </span>
  <b:if cond='data:post.title'>
    <h3 class='post-title' expr:id='&quot;titulo-&quot; + data:post.id'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h3>
</b:if>
<span class='elAutor'>mi_nombre</span>
<span> ... cualquier otra cosa ... </span>
</div>
Eso, hará que ahora, las entradas sean rectángulos individuales y por lo tanto, serán mucho más sencillas de manipular cuando intentemos resumirlas:


La primera parte contiene un script optativo que se usará para descomponer la fecha y mostrarla de manera diferente; su código debería agregarse antes de </head> y es el siguiente:
<script type='text/javascript'>
//<![CDATA[
  // LAS FECHAS DE LOS POSTS
  var mes=new Array();
  mes[1]="ene"; mes[2]="feb"; mes[3]="mar"; mes[4]="abr"; mes[5]="may"; mes[6]="jun";
  mes[7]="jul"; mes[8]="ago"; mes[9]="sep"; mes[10]="oct"; mes[11]="nov"; mes[12]="dic";
  function calendario(cual) {
    var verCero;
    var lafecha = cual.split('/');
    verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }
    fday = "<span class='lafechaDia'>"+lafecha[1]+"</span>";
    fmonth = "<span class='lafechaMes'>"+mes[lafecha[0]]+"</span>";
    fyear = "<span class='lafechaAnio'>"+lafecha[2]+"</span>";
    document.write(fday+fmonth+fyear);
  }
//]]>
</script>
Nos faltaría agregar el CSS.

Aquí lo más importante es agregarle la propiedad position:relative al DIV con el encabezado. Esto será la clave para poder ubicar cada parte de su contenido de manera absoluta, sin márgenes extraños, flotaciones que perturben ni propiedades complejas; de tal forma que pueda verse correctamente en cualquier navegador. Agregamos entonces las definiciones entre <b:skin> y </b:skin>.

No hay demasiadas restricciones al respecto:
/* titulo de los posts */
.post .elEncabezado {
  /* lo importante es definir ancho, alto y posición */
  background-color: #000;
  height: 70px;
  margin: 20px 0;
  position: relative;
  width: 100%;
}
.post h3.post-title {
  border-bottom: 1px solid #444;
  border-top: 1px solid #444;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  line-height: 1.4em;
  margin: 0;
  width: 410px;
  /* con esta propiedades posicionamos el título */
  padding: 10px 0 20px 60px;
  position: absolute;
  left: 0;
  top: 0;
}
.post h3.post-title a, .post h3 a:visited { 
  /* estas propiedades deben colocarse porque el título es un enlace */
  color: skyBlue;
  display: block;
  font-family: Lucida Grande,sans-serif;
  font-size: 28px;
  font-weight: normal;
  text-decoration: none;
}

/* el autor de los posts */
.post .elAutor {
  color: skyBlue;
  /* con esta propiedades posicionamos al autor */
  position: absolute;
  right: 5px;
  top: 45px;
}

/* la fecha de los posts */
.lafecha {
  display: block;
  font-family: Verdana,Arial;
  font-weight: normal;
  height: auto;
  line-height: normal;
  text-align: center;
  width:40px;
  /* con esta propiedades posicionamos la fecha */
  position: absolute;
  left: 5px;
  top: 4px;
}
.lafechaDia {
  color: #6495ED;
  display: block;
  font-family: Georgia;
  font-size: 36px;
}
.lafechaMes {
  color: #94D5FD;
  display: block;
  font-size: 14px;
  margin-top: -10px;
}
.lafechaAnio {
  color: #DDDDEE;
  display: block;
  font-size: 14px;
  margin-top: -6px;
}
En resumen, dentro de un rectángulo llamado elEncabezado, colocamos cada parte a mostrar y usamos la propiedad position:absolute para ubicarlo en un lugar preciso y eso lo hacemos con las propiedades top, bottom, left y right.


Ahora que lo tenemos todo el post en un solo bloque, ya podemos empezar a ver la forma de mostrarlo resumido.

94 comentarios:

EM2.0  

Hola, ¿y no hay ninguna forma de que te aparezca por orden alfabético?, no me sirve como widget, te explico. Has visto el menu que he puesto, en el submenu están las categorías, pero cuando las abres evidentemente aparecen por orden cronológico del ultimo post que he colgado al primero, ¿no hay una forma para que eso se cambie y aparezcan alfabéticamente?. Y otra cosa que te iba a preguntar no encuentro el lapicerito, me da igual el que aparece en comentarios pero es que no consigo que me aparezca en los post para poder editar sin abrir la parte trasera, ¿donde está mi lapicero?, ya marque donde supuestamente tenía que aparecer pero no sale.

Responder
Unknown  

probando..

Responder
Gem@  

Casi que no llego a tiempo a esta clase, la estaba esperando.
Puede usted seguir que tomo nota :D

Responder
Blog de Pruebas  

me enrede... me interezo la parte de la fecha en las entradas pero con tanto codigo no lo entendi :S ¿serias tan amable de explicarme concisamente como habrise que hacer para que aparezca la fecha en todas las entradas?
gracias de antemano

Responder
JMiur  

Dña.Urraca: Pués eso había ocurrido en un tiempo y aparentemente, se había solucionado, De todos modos, fíjate en esta entrada porque el código parece estar y lo único que no se ve es la imagen que, por algún motivo, Blogger no carga pero, podemos reemplazarla por una propia.

Suerte, Jared, prudencia porque es algo engorroso :)

Gem@: Lo prometido es deuda, en un apr de dias sigo adelante. La verdad, se hace complciado de explicar :D

Responder
Unknown  

hay qué bonito, quedé encantadísima...veremos si lo aplico en alguna semana jajaja...lo que tardoooooooo

Responder
EM2.0  

Gracias caballero, me has devuelto el lapicero y un sobre que no sabia que había perdido. Ha sonado como si te los hubiera quedado tú verdad?, :D ¿que ibas a hacer con tantos lapiceros? confiesa.

Responder
Anónimo  

Yo lo tengo así para mostrar la hora y el autor justo en la misma linea que el titulo de la entrada :)... (configuré la hora para que mostrara la fecha ^^) y gracias a una de tus entradas lo pude colocar utilizando la posición

Ahora me gusta mucho más, ya que antes tenía que utilizar el espacio que hay justo debajo de la linea que subraya el titulo para mostrar esa información, y ahora quería mostrar otra (Escuchando y Estado) y tanta cosas en una linea no entraban jeje... así que muestro ahora la misma información (y más, con lo que he añadido de ecuchando y estado) pero visualmente se utiliza el mismo espacio y no queda feo :)

Ahora me falta añadir las etiquetas... jejeje, a ver si encuentro por aquí alguna idea :)

Responder
Andres  

y no hay forma de que la fecha se muestre fuera de la entrada
porque yo lo intente pero no me quedo muy bien, como lo hago mi blog es
http://andresfanatico.blogspot.com/

Responder
Danols  

Hola, me presento ante ti hoy para hacerte una complicadita pregunta. Espero puedas ayudarme.

Tengo ya varios meses con un nuevo blog de noticias sobre el mundo del séptimo arte junto con varios amigos: http://zinegame.blogspot.com/

En dicho blog se nos ha presentado un pequeño inconveniente y es que para la publicación de cada noticia solemos colocar una pequeña imagen de 150x150 pixeles para que en la página principal no se deforme el mini cuadrito de cada noticia. Esto se ha tornado un poco tedioso a pesar de ya habernos acostumbrado, y quisiéramos saber si tal vez podrías ayudarnos a programar la plantilla para que cuando coloquemos una imagen, de cualquier tamaño, la plantilla cree su propio "thumbnail" que es como la llaman.

El resultado sería que al ver la noticia en la pág principal se viera la imagen reducida pero al leer la noticia en su página independiente, la imagen pueda ser de un tamaño mayor.

Es más o menos lo que sucede en esta plantilla: http://falknerpress.blogspot.com/

Espero me haya explicado bien y me hayas entendido.

Responder
JMiur  

Tómelo con calma, Graciela :D

Dña.Urraca: Juro que no, el mio tamnbién se fue de paseo y nunca volvió :D

Uve: No veo tu blog pero puedes hacer lo mismo si encuentras la parte de las etiquetas, la mueves de lugar y luego usas position para ubicarla. A lo sumo, necesitarás aumentar la altura de esa parte pero, no deberías tener problemas.

Andres: ¿Qué significa fuera de la entrada? ¿Algo como esto que explica Gem@ ?

Danols: Así en general, se podría pero, lo que ahora veo es que las imágenes que colocan contienen datos como el ancho y el alto y eso lo hará muy complicado. En teoría, habría que condicionar el estilo de las imágenes para que en las páginas que no sean individuales, estas tengan un tamaño máximo o un tamaño fijo:

<b:if cond='data:blog.pageType != "item"'>
<style>
.post img {
max-height: 150px;
max-width: 150px;
height: 150px;
width: 150px;
}
</style>
</b:if>

Responder
Unknown  

ohhhhhhhhhh yes estoy inspiradísima hoy jajaja
sacar lo que tenía, luego la fecha en todos los post...guau Jmiur esto me encantó y gracias a vos que te iluminas!!!

pereciosoooooooo harrrmosoooooooo

Ahora veré la manera de hacer más cambios o yessssssssss

Buen martes y la canción???

Yo soy tu maestro, yo soy tu maestro jajaja

Responder
JMiur  

Ohhhhh que bueno :D Es verdad, usted está inspirada :D

Responder
Anahí  

No sé qué cuernos pasó en mi blog, pero tengo todas las fechas en "undefined" y con diferente formato desde hace un par de horas ... ¿será que me atacó un "bichito" en el FF, la máquina o algo así...? :((
Aparte : ahí donde usté dice de borrar el dataheader yo tengo metido entremedio el calendario, y ni idea de cómo borrar uno y no el otro, JMiur (hoy tengo un día espantoso, che)
Saludos.

Responder
Anahí  

Me parece que blogger sacó el formato de fecha entre guiones, ¿puede ser que eso sea que me descuajeringó las fechas?
Y una cosa más y no jorobo más: ahí donde está el dataheader también tengo parte del picabú... :-|
¡s.o.s., s.o.s.!

Responder
Anahí  

Buen día, JMiur, paso por aquí para avisar que mi blog "amaneció" normal. Al de pruebas le llevó un rato más, pero lo mismo ya se normalizó. Debe haber sido un ataque de caspa nomás.
Saludos.

Responder
JMiur  

Llegué tarde pero veo que todo se arregló. Debe haber sido o un problema de conexión o un error circunstancial. Sigamos adelante :D

Responder
Anahí  

Sí, sigamos jugando, JMiur, ¿cómo borro el dataheader sin borrar el calendario y el picabú para hacer esto del título?
Slaudos.

Responder
JMiur  

El script de la fecha del calendario variará levemente, tomará el dato de otro lado pero, la aprte del diseño puede ser exactamente la misma.
Con lo de Peek-a-Boo fíajte en esta otra entrada reciente donde se usa algo similar que incluye el encabezado este.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur. Lo primero que pensé cuando terminé de leer el post es que no es para mí, yo uso el dato de la hora al pie del post algo así: Publicado por ... El fecha a las hora. Si lo configuro como fecha quedará feo. En el atributo title de <data:post.timestamp/> está otro dato que da la fecha data:post.timestampISO8601, lo probé y funciona, no es necesario que configurarle y muestra la fecha en el orden año-mes-día-hora-zona horaria. ¿Podría usar ese dato para el calendario?

Responder
Anahí  

Pues parece ser que a ciertas horas de la noche (porteña)... cha chan cha chan... en vez de convertirse en vampiro, lobo o ciguapa... mi blog enloquece y le cambia el formato a las fechas, se vuelve "undefined", y desaparece el formato "entre guiones" de las opciones del editor. Tomá mate, che, ¿qué me contursi?...

Responder
JMiur  

Bonzu: No l ohe probado, n osé que formatos devuelbe ese dato.

Anahí:
Eso veo. La fecha se muestra con este formato: 16/10/2009 no eres la única al parecer :D

Fijate en Configuración Formato y, en todo caso marca ese modelo con los datos separados por barras y luego, cambia esto en el script:

var lafecha = cual.split('-');

por esto:
var lafecha = cual.split('/');

Debería solucionarse. Lo raro es que el formato va y viene, eso es extraño realmente.

Responder
Anahí  

Sí, es raro, JMiur. Ya lo cambié, pero con la opción de barras el mes queda en números, entonces lo que hice siguiendo su criterio y provisoriamente (o sea hasta nuevo aviso) puse el formato del mes en letras y con separación de espacios, y bueno también le cambié el orden (año + día + mes), porque el mes queda laaaargoooo (eso tenía de bueno los guiones, el mes abreviado)
Saludos.

Responder
Anahí  

Gracias, Bonzu, me funcionó lo de replace para abreviar el mes.
Saludos.
pd. nada que ver, pero en weebly se pueden alojar scripts.

Responder
JMiur  

Anahí: Hay algo raro en el tema fechas, puede ser un error o un cambio de Blogger, habrá que esperar. Lo que has hecho es perfecto, voy a ver si puedo hacer una lista con las opciones posibles.

Bonzu: Por favor no escribas códigos tan extensos y complejos en los comentarios porque sólo se ve un galimatías lleno de emoticones.
Contestó hasta donde entendí. Si el formato es de este tipo 2009-10-16T10:14:00-07:00, para el mes puede usarse el mismo tipo de array que hay en el post:
fmonth = mes[lafecha[1]];
en lugar de usar replace doce veces.
En resumen, se puede usar el mismo script pero con separador guien en lugar de barra inclinada y permutando el orden de las cosas. El único detalle es el día donde sólo hay que tomar los dos caracteres iniciales y descartar el resto, verificando que los días que sólo tengan un carácter se muestren con un cero delante.

Responder
Bonzu Pipinpadaloxicopolis III  

Ok, sólo quería compartir lo que estaba aprendiendo, es más fácil cómo tu dices.

Responder
Prof. Cristian E. Moyano  

Muchas gracias JMiur solucionaste mi problema, aunque no podamos poner la hora, pero esta es una solución muy elegante! Gracias por tu paciencia..:)

Responder
Prof. Cristian E. Moyano  

Una pregunta, si yo quisiera agregar otro elemento como la imagen del perfil del autor del post que debo hacer?

Responder
JMiur  

Cristian:
Siguiendo con este ejemplo, podrías ir agregando SPANs:
<span> y aquie el codigo </span>
No sé como quiseras verlo exactamente. También podrías colocar esa imagen donde está el nombre del autor. Lo que no recuerdo es cuál es el código o si es accesible pero podría leerse el autor y poner ua imagen cualquiera que varie según sea su nombre.

Responder
Prof. Cristian E. Moyano  

JMiur - "Pero podría leerse el autor y poner una imagen cualquiera que varie según sea su nombre." ¿y cómo hago eso? ya que creo que sería los más conveniente...desde ya Gracias por tu consejo!! :)

Responder
JMiur  

Hay un dato llamado <data:post.author/> en las plantillas normales pero no sé si es el mismo cuando hay varios autores. Si fuera el mismo, sería algo así:

<b:if cond='data:post.author == &quot;UN_NOMBRE&quot;'>
... aqui colocas una imagen ...
</b:if>
<b:if cond='data:post.author == &quot;OTRO_NOMBRE&quot;'>
... aqui colocas otra imagen ...
</b:if>

Como nunca he experimentado con blogs colectivos no sabría darte muchos más detalles.

Responder
Prof. Cristian E. Moyano  

Ok muchisimas gracias JMiur! me pondre a experimentar..

Responder
Prof. Cristian E. Moyano  

Si funcionó!! :) puedes verlo aquí

Responder
JMiur  

Perftecto, Cristian :)

Responder
WIÑAYPAQ  

Hmmm... http://falknerpress.blogspot.com/ en ese blog, cömo hace para que el slide de imágenes que se encuentra encima de los posts desaparezca al entrar a uno de esos posts?

Responder
JMiur  

Eso puede hacerse utilizando etiquetas condicionales. Por ejemplo, esta entrada muestra cómo hacerlo en la sidebar pero, es igual para cualquier otra aprte del blog.

Responder
WIÑAYPAQ  

No me sale este truquito :'( Al momento de reemplazar me dice que está mal.

Qué es lo que tengo que reemplazar?

Tengo la plantilla mínima :(

Responder
JMiur  

No sabría decirte qué está mal porque no sé lo que has hecho.

Responder
WIÑAYPAQ  

Hola, de nuevo. Quiero usar esta plantilla http://falknerpress.blogspot.com/ y quisiera saber por favor si se puede poner submenúes en esa barra de navegación que tiene.

Saludos.

Responder
JMiur  

Seguramente que si, pero, tendrás que buscar los códigos para para ese tipo de menú y adaptarlos.

Responder
Roberto Caamaño  

Pues a mi no me funciona la fecha ¿Que hice mal? Esta es la plantilla de mi Blog de pruebas

http://www.fileden.com/files/2009/11/12/2648456/template-6495742595903464057.xml

Responder
JMiur  

Tendría que verlo online y el sitio que indicas no parece existir:
http://probandoplanillasyscripts.blogspot.com/

Responder
Roberto Caamaño  

Ahora si, creo

http://probandoplantillasyscripts.blogspot.com/

Responder
JMiur  

Ahora si :D

Sólo parece faltarte establecer el formato de la hora para que muestre la fecha, fíjayte en el post. Tiene que ser algo como mes/dia/año

Responder
Neo  

Hola. Llevo horas trasteando con mi plantilla y no soy capaz de poner el título de las entradas de mi blog debajo. Me explico:

Si accedes al blog http://trailersyestrenos.blogspot.com/ verás que tengo el título de la entreda, una imagen en miniatura a la izquierda y un resumen a la derecha. Todo ésto en la vista previa acompañado del sigue leyendo habitual.

Bien, ya he conseguido quitar en un blog de pruebas que tengo la barra de abajo (la de sigue leyendo...) y lo que no soy capaz de hacer, es que aparezca el título en la parte inferior del resumen de entrada, donde ahora mismo está colocado el sigue leyendo.

No sé si me explico bien. ¿Cómo haría ésto? ¿Me puedes ayudar?

Gracias

Responder
JMiur  

Sólo puedo darte una iea general ya que los detalles ólo se ven en la misma plantilal. Lo que deberías hacer es buscar la parte del código con el título, algo como:

<h3 class='post-title entry-title'>

identificar bien donde comienza y donde termina, quitarlo de allí y colocarlo abajo del post, donde estaba el seguir leyendo que, imagino era el footer de cada post.

Responder
Neo  

Gracias por la información, el fin de semana lo intentaré trasteando esa parte del código que me has dado y quitando y poniendo, osease haciendo pruebas porque no tengo ni idea, veré si soy capaz. Ya te informaré si lo consiguo para que así puedas ver como me ha quedado por curiosidad.

Enhorabuena por tu página porque gracias a ella he conseguido trastear mi blog sin tener ni idea de HTMl. Sigue así. Soy un seguidor tuyo desde hace mucho tiempo. Saludos.

Responder
Neo  

Después de muchas pruebas, por fin lo he conseguido. Ahora mismo tengo el blog de pruebas que estoy utilizando lo que es la imagen y debajo el título de la entrada. Todo perfecto. Ahora quería hacerte una pregunta:

Para acceder a la entrada tengo que pinchar sobre el título de la misma ya que sobre la imagen que aparece encima de ella no me da opción. ¿Sabrías decirme si no es mucha molestia por donde tengo que meter mano a la plantilla para que también se pueda acceder a la entrada a través de la imagen?

Muchas gracias

Responder
JMiur  

Neo: No sé en cual blog lo tienes colocado. Si la imagen es una magen del post, debes agregar el enlace en ese post.

Responder
Neo  

Una vez más gracias por tu atención. No podías verlo porque lo tenía en un blog de pruebas al cual solomente podía acceder yo. Ya he pasado los cambios realizados a mi web http://www.trailersyestrenos.es/

Como verás hay 16 entradas que forman los póster de películas y debajo de ellos he colocado el título del post. Pues bien, yo para acceder a ver un trailer tengo que pinchar en el título. En la imagen no me deja. Yo quería si es posible, que pudiese pinchar tanto en la imagen como en el título para que me accediera a la entrada correspondiente.

Espero haberme explicado bien. Gracias

Responder
JMiur  

Como te dije, si la imagen está en el post, es allí donde debes crear el enlace; sino, habría que ver la plantilla para saber si es posible agregar algo automático; no es algo ue pueda verse online.

Responder
Neo  

La imagen está en el post. Lo que pasa es que no aún enlazandola con la entrada no va. Debería ser agregar algo autómatico como se hace con el título de la entrada, que se hace automáticamente. Habría que retocar la algo en la plantilla para que cogiera también la imagen.

Este es el template que utilicé:

http://btemplates.com/2009/09/02/chucky/

Responder
JMiur  

Colcoando el enlace en el post funcionará. Basta publicar la entrada, copiar la URL generada y editar el post para colocar el enlace correcto.

Lo otro es más complejo, habría que enviarle la URL:
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;)
y cambiar la función createSummaryAndThumb para que lea eso y luego cree el enlace.

No hay una respuesta genérica para eso.

Responder
Neo  

La primera opción ya la probé y no funciona. La otra opción de la que hablas, ceo que es ésta:


createSummaryAndThumb("summary");







NOTA - Donde pone iv es div y cript es script

Ya sé que ésto es muy engorroso y que no tienes porque solucionarme los problemas que me genera una plantilla, pero si tuvieras un hueco un día de estos y pudieras solucionarme para que al pinchar en el cartel de la película se accediera a la entrada, te lo agradecería mucho.

De todas formas, si no lo haces, lo entenderé. Somos muchos los que tenemos problemas con los trucos aquí publicados y comprendo que no puedas ayurdanos a todos. Por lo menos me distes la pista para cambiar el título de la entreda de arriba hacia abajo.

Saludos.

Responder
JMiur  

El tema no es simple, hay que cargar la plantilla y ver si es posible modificar el script o cómo hacerlo.

Responder
Neo  

Ok, lo comprendo JMiur. Intentaré buscar por otro lado para ver si alguien me echa un cable para poder perfeccionar este pequeño detalle en mi web.

Muchas gracias por todo

Responder
Mun2  

Jmiur tengo problema con la posiciones de mi blog mira
http://admin-parasubirfotoacv2company.blogspot.com/
el problemas es el lo Estilo CSS no se que le pasa por que me tira todo lo temas para el mismo lugar, y no tengo una buena posicion , me podria ayudar con esto

Responder
JMiur  

Te respondí el mail que enviaste.

Responder
matias_hm  

es genial lo que haces. Felicitaciones!!!!

Responder
guti  

J.Miur,quisiera saber cómo puedo poner la flechita esa pequeñita que se pulsa para abrir las entradas, y luego una vez abierta al final de la misma, se pulsa para cerrarla.en sus titución del signo del + y -.Muchas gracias por tu ayuda y tu trabajo impresionante

Responder
JMiur  

Si te fijas en la segunda parte, en lugar de poner un texto, punes una imagen acá:

<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>[+/-]</a>

algo así:

<a class='toggleresumenpost' expr:onclick='&quot;toggleResumenPost(\&quot;&quot; + data:post.id + &quot;\&quot;)&quot;' href='javascript:void(0);'>
<img src='URL_imagen' />
</a>

Para que haya un enlace de "cerrar" cuando está desplegado, simplemente copias ese mismo enlace y lo colocas donde quieras verlo, por ejemplo, al final del DIV oculto:

<div class='post-oculto' expr:id='"dummy-" + data:post.id'>
.........
AQUI EL ENLACE
</div>

Responder
SMS Gratuito  

Hola,

He llegado a esta entrada poniendo en tu buscador "createSummaryAndThumb". Es el código que tengo para que mostrase en la página principal los resúmenes de las últimas entradas junto a una imagen.

Ayer mismo me dí cuenta que ya no se muestran mis ultimas entradas de esta forma. No se si puede ser que falle algún script o que haya cambiado código sin darme cuenta. La plantilla que uso es una modificación propia de una ya hecha anteriormente, en donde venía ya el código para que se mostrara el resumen de cada entrada (fue esta una de las razones por las que elegí esa plantilla). En algunas de tus entradas comentas como instalar esto o algo parecido, pero como las modificaciones que habría que realizar son sobre una plantilla digamos "estandar" no se por donde meterle mano a esta.

Te dejo mi enlace, que la última vez se me olvido ponerlo: www.smsgratuito.es

Si logras ver donde están mis fallos de lo agradecería.

Un saludo y gracias por todo.

Responder
JMiur  

Efectivamente, hay un script de tu plantilla que no se carga proque el enlace ha dejado de existir o es erróneo:

<script src='http://tinyurl.com/bloggerdashboardtemplates' type='text/javascript' />

Es probable que las funciones que controlan esa aprte esten en ese archivo y por ese motivo han dejado de funcionar.

Responder
SMS Gratuito  

De nuevo me has ayudado a resolver el error. Efectivamente, el script dejó de funcionar. Solo he tenido que sustituir la parte de código que me has indicado por otra dirección donde está alojado el script (igual o parecido).

Lamento decirte que seguiré molestándote con los siguientes problemas que me surjan.

Muchas gracias por todo.

Responder
JMiur  

Perfecto :D

Responder
Unknown  

Hola soy juan y desde hace tiempo tengo ganas de tener las entradas presentadas como tú las tienes pero el caso que en mi plantilla no encuentro donde se presenta la fecha y no puedo ni siquiera empezar. Mi pregunta es si me podrias decir donde se encuentra en mi plantilla. Gracias

http://malagaenllamas.blogspot.com/

Responder
JMiur  

Aparentemente, por l oque se ve en el códigi fuente, deberías ver dice lo mismo que indica el post:

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

busca la variable dateHeader

Responder
Unknown  

Muchas gracias por tu ayuda, el problema recide en que soy un poco novato en esto y no habia dado a expandir plantillas de artilugios,una vez dado lo encontré e hice todo paso a paso,pero me da este error

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:includable" must be terminated by the matching end-tag "".

He revisado todo un par de veces pero me sigue saliendo ese mensaje, ¿que puedo hacer? gracias de antemano por tu ayuda.

Saludos

Responder
JMiur  

Es algo que no puede verse online. El error puede deberse a cualquier etiqueta mal cerrada.

Responder
Unknown  

ok Gracias por tu tiempo.Saludos

Responder
Ark  

JMiur@ Estoy teniendo un problema con una plantilla que estoy fabricando... "Inspirándome" en tus diseños para el encabezado de los post he intentado hacer algo diferente... con trasparencias y añadiendo los comentarios y posicionandolo todo sobre la imágen de los post.
El caso es que estaba ya casi satisfecho con el efecto logrado.

((Una imagen vale mas que mil palabras))

http://anothergames3.blogspot.com/

Cuando lo tenía todo ajustado y se veia bien: En ie8, firefox y crhome... que son mis prioridades. Pero tras descartar un ultimo cambio me doy cuenta de que la imagen de cabecera de los post se ven descuadrada hacia la izq en Ie8. Lo curioso es que durante todos los cambios habia permanecido bien posicionada....

Intento cargar copias anteriores de la plantilla y sigue descuadrada, cuando yo estoy totalmente seguro de que en esas plantillas anteriores estaba perfectamente posicionada....

Agradecería cualquier opinión tuya a este respecto.... De todas formas voy a seguir trabajando en corregirlo.

Responder
Ark  

Bien he tomado la solución mas sencilla: hacer un comando espécifico para Ie8 usando un asterístco... Pero ni me convence la solución ni entiendo cual ha sido el problema del descuadre....

Responder
JMiur  

No sé qué es lo que quiere hacer con exactitud ¿centrar esas imágenes?

En principio, usar márgenes negativos nunca es bueno así que yo cambiaria esto:
margin: 2px 0px 5px -16px;
*margin: -2px 0px 5px 0px;

y las centraría de esta forma:
margin: 2px auto 5px;

pero, lo que ocurre con eso y con cualquier otra definicion que afecte a esas imágenes es que en los posts, ya tienen un estilo y por lo tanto, uno interfiere con el otro:

<div style="clear: both; text-align: center;" class="separator">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1" href="xxxxxxxxxx">
<img border="0" src="xxxxxxxxxx"/>
</a>
</div>

Cuando se quiere personalizar este tipo de cosas, es aconsejable utilizar códigos simples, tal vez con una clase que definas en el CSS:

<img src="xxxxxxxxxx" class="centrada" />

o como mínimo, elimina el style de la etiqueta IMG.

Responder
Ark  

Estoy .... Jodido, si me permites la expresión. Perdona pero estoy super cabreado. Estoy haciendo un diseño complicado para las portadas de los artículos.

Parto de tu tabla "elEncabezado" le añado de background un png semitrasparente, y la pongo justamente encima de la imagen de cabecera de los post ( superpuesta al pie de estas). Y el caso es que sin motivo aparente se descuadra solo en Ie (8y9 en los demás ni me molesto en alcanzar compatibilidad) y elEncabezado aparece en medio de la imagen.

Lo curioso es que guardo la plantilla con frecuencia, casi cada vez que hago un cambio, y me remonte a plantillas muy anteriores y en Ie la cabecera de los post siempre aparecce descuadrada en mitad de la imagen....

Es incomprensible que en plantillas anteriores esté mal, por que siempre había aparecido en su sitio hasta esta mismisima mañana.

Es la segunda vez que me pasa y me está desquiciando, lo que mas me molesta es que no vale de nada tomar precauciones, las cosas se rompen por que si, sin motivo aparente, y sin poder dar vuelta atrás.

Te dejo un enlace del blog de pruebas donde estoy montando el diseño.
Si tienes tiempo, y sobre todo ganas, agradeceré cualquier opinión tuya a este respecto:

http://anothergames3.blogspot.com/

Si abres en firefox comprobaras la posición correcta, en Ie... pues la que dios quiso ponerle.

Responder
JMiur  

Las cosas no se rompen porque si. Si usas posiciones relativas, trata que estas sean referncias a alguna posición absoluta y no uses paddings ni márgenes salvo que sean necesarios. Evita usar márgenes negativos. IE posee un esquena de cajas que difiere del resto y por lo tanto, determinadas cosas deben ser ajustadas dependiendo del navegador a utilizar.

Responder
Ark  

Gracias por las sugerencias Jmiur; Supongo que debo olvidarme un poco de ie por ahora, y seguir avanzando. En todo caso se le puede hacer mas tarde su propia hoja de estilos.

Responder
Unknown  

Hola soy nuevo por aquí aunque os sigo desde hace tiempo te felicito eres genial, he conseguido todo lo que dices en este post pero no consigo ajustar el alto del título para que se muestre en más de dos líneas y no se monte con el post, perdona mi ignorancia y gracias por tu tiempo

Responder
JMiur  

La tahona: No veo exactamente a que te refieres.

Responder
Unknown  

Ok muchas gracias ...Este post me va ayudar a cambiar la imagen de mi blog.. espero que lo visites.. http://manosparaamar.blogspot.com ..gracias

Responder
Unknown  

Gracias por la explicación ahora solo hay que cambiar el diseño ;)

Responder
JMiur  

No sé cuáles son las líneas de codigo que no encuentras.

Responder
JMiur  

Pués, en realidad, está allí en el post-header pero, el IFRAME que lo contiene tiene propiedades CSS extrañas:
left: -10000px; position: absolute; top: -10000px;
con lo cual, permanece oculto.

Si agregaras una regla así:

.post-header iframe {
position: static !important;
}

seguramente lo verías.

No sé decirte el por qué se agregan esas propiedades.

Responder
JMiur  

Junto con el reato del CSS, por ejemplo, antes de </b:skin> o bien en una etiqleta style antes de </head>

<style>
.post-header iframe {
position: static !important;
}
</style>

Responder
JMiur  

La actualización esa no modifica la posición, sólo el script. El lugar donde se mostrará es aquel en donde coloques el código <g:plusone ....
así simplemente busca donde tienes esos otro s dos botones y allí colcoas el código.

Responder
Rodrigo Acuña Bravo  

Hola Jmiur, tiempo que no te molestaba

Ocurre ahora que al modifcar los encabezados las fechas no me cambian de estilo...de hecho he intentado poner el estilo calendario en otras ocasiones pero nunca me ha funcionado. Ahora he seguido este turorial y todo funcinoa ok salvo la parte fecha..que puede ser ? Tengo solución?

En sus manos maestro

www.rodrigoacunabravo.blogspot.com

Desde Chile
Rodrigo

JMiur  

No veo que en ese blog esté aplicado, Rodrigo. Veo el formato clásico con als fechas en
<h4 class="date-header">

Rodrigo Acuña Bravo  

Seguramente fue porque estuve haciendo unas pruebas por siaca..

Dejé todo tal cual nuevamente...a ver si puedes verlo nuevamente, Gracias !!!

NO Hallo la forma de que me funcione

Rodrigo

JMiur  

Bien. Ahora si.
Al parecer, lo que te falta es configurar el formato de la fecha; eso, debes hacerlo en el elemento Blog de la primera pantalla de Diseño.
En realidad, no dice fecha (esa seria la otra) sin oque dice formato de la hora y si despliegas eso, verás que no sólo muestra la hora sino que también hay formatos de fecha así que ahí debes seleccionar el que se va a usar que es de tipo 17/04/12

Responder
Rodrigo Acuña Bravo  

Hola Jmir, gracias nuevamente.

Efectivamente faltaba lo que me señalaste, sin embargo, en la página de inicio sólo en las dos primeras entradas me aparece bien la fecha, en lasa dos siguientes se desconfigura descomponiendo un número sobre otro...si pincho sobre una etiqueta casi todas me funcinoan bien, salvo una.....que loco, que puede ser ?

Saludos
Rodrigo

JMiur  

En este momento, en el home no lo veo colocado pero, lo veo en cualquier pagina de etiquetas y allí, no noto problemas de ningún tipo.

Rodrigo Acuña Bravo  

Si, es que eliminé las entradas en el Home, en la lista de etiquetas todo está en regla pero acá te dejo un enlace con una entrada que presenta ese problema

http://rodrigoacunabravo.blogspot.com/2011/02/feliz-cumpleanos-marita.html

Gracias y Saludos

JMiur  

Eso es en las entradas individuales, allí, debería solucionarse de manera sencilla ya que el problema es que el ancho es escaso y entonces, cuando los caracteres (2 y 0) ocupan más lugar que otros, uno de ellos se va par abajo.

Bastaría que aumentaras el ancho en esta regla:

.lafecha {}

en lugar de width:40px, poner un poco más, por ejemplo, width:45px,

Rodrigo Acuña Bravo  

Ahora si que si. Eternamente agradecido por la paciencia y la disposición.

Saludos
Rodrigo

JMiur  

Perfecto, Rodrigo :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

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