JMiur [E]

Blogger tiene dos códigos diferentes para agregar la fecha de las entradas, por defecto, en las plantillas se utiliza el menos flexible a la hora de personalizar el diseño:

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 ...

Tal como comentaba en esa entrada, el rectángulo (cada etiqueta es un rectángulo) que contiene la fecha esta MUY afuera del rectángulo que contiene el título y por lo tanto, cuando se quiere poner uno al lado del otro, las cosas se complican. A veces, esto se resuelven con CSS y a veces no, sobre todo, en las nuevas plantillas.

En general, el esquema de las entradas que veremos en el código fuente es este:
<!-- este es el rectángulo que contiene todos los posts o uno solo si se trata de una entrada individual -->
<div class='blog-posts hfeed'>
  <!-- este es el rectángulo que contiene cada post -->
  <div class='date-outer'>
    .......
    <!-- esta es la fecha por defecto que sólo se muestra una vez si hay varias entradas con la misma fecha -->
    <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  .......
  <!-- más rectángulos !!! -->
  <div class='date-posts'>
    <div class='post-outer'>
      <div class='post hentry'>
        <!-- por fin, acá está el título de la entrada -->
        <h3 class='post-title entry-title'> ....... </h3>
        <!-- y su contenido -->
        <div class='post-body entry-content'>
          .......
        </div>
      </div>
    </div>
  </div>

  <!-- si no es una entrada individual, habra otro igual al anterior, tantos como hayamos definido -->
  <div class='date-outer'> ....... </div>
  <div class='date-outer'> ....... </div>
  .......
  <div class='date-outer'> ....... </div>
</div>
Entonces, si queremos darle una solución definitiva y queremos seguir usando ese dato, lo razonable sería mover la fecha y ponerla arriba del título (o debajo si se nos ocurre):
<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        .......
Y lo mejor para personalizar eso es empezar desde cero, eliminando cualquier padding, margin, etc. Lo hago paso a paso y sin modificar etiquetas:
/* este es el rectángulo de cada post */
.post { background-color: Gainsboro; margin: 0; padding:0; }

/* esta es la fecha */
h2.date-header { color: Teal; font-family: Arial; font-size: 20px; font-weight: normal; margin: 0; }

/* este es el título */
.post h3 { font-weight: normal; margin: 0; padding: 0; }
/* que es un enlace */
.post h3 a, .post h3 a:visited, .post h3 strong { color: Crimson; font-family: Georgia; font-size: 30px; }

/* y este es el contido de la entrada */
.post-body { margin: 0; padding:0; }
Se verá ... esto:


Para separar una entrada de la otra, les agrego un margen arriba y abajo:
.post {
  .......
  margin: 20px 0;
}
separo la fecha y el título del contenido de la entrada:
.post-body {
  .......
    margin: 30px 0 0;
}
y separo la fecha y el título del borde superior:
.post {
  .......
  margin: 30px 0;
  padding: 10px 0;
}

Voy a poner la fecha a la izquierda y el título a la derecha de esta, una al lado de la otra. Para eso, uso float:
h2.date-header {
  .......
  float: left;
}
.post h3 {
  .......
  float: left;
}
y como flotan, limpio la flotación en la siguiente etiqueta y uso padding en lugar de margin para separar el contenido:
.post-body {
  .......
  clear: both;
  padding: 30px 0 0;
}

Alineo verticalmente la fecha y el título dándoles una altura y estableciendo line-height con ese mismo valor:
h2.date-header {
  .......
  height: 40px;
  line-height: 40px;
}
.post h3 {
  .......
  height: 40px;
  line-height: 40px;
}

Le agrego un color de fondo a la fecha y coloco un padding para separar el texto y que se vea el tamaño real de esa etiqueta:
h2.date-header {
  .......
    background-color: White;
    padding: 0 10px;
}

Uso margin para separar la fecha del borde izquierdo y del título que está a la derecha:
h2.date-header {
  .......
    margin: 0 10px;
}

Ahora, hago lo mismo con el título:
.post h3 {
  .......
  background-color: Bisque;
  padding: 0 10px;
}
Y ya tengo uno al lado del otro y bien alineados.


Obviamente, este no es el único metodo que existe pero puede dar una idea de cómo se manipulan las etiquetas y cuales son alspropeidades que las afectan.

32 comentarios:

Unknown  

Jmiur, ya me parecía que no estaba equivocada, no me llegan más tus entradas por correo. Eliminarlo no porque guardo todo jajaja no me preguntes para qué. Chauuu ahora te leo por otro lado :D

Responder
JMiur  

Feedburner me dice que está todo normal ... siempre dice lo mismo :-)

Responder
Administrador  

Hola JMur pregunto esto aqui porque te estas metiendo con css pero no es del tema de las fechas(disculpa si me equivoco).
Estoy implementando el plugin de bloggerplugin para agregar etradas relacionadas, meti el codigo y el script y todo bien, quiero personalizarlo y he hecho todo lo que quiero menos un detalle:
La leyenda de "entradas relacionadas" es un div en la parte de arriba metido en otro div donde va los enlaces y miniaturas, el problema es de 2 pixeles entre navegadores, si pongo 432 en el div de arriba ie bien pero los demas sacan dos pixeles a la derecha, si pongo 430 todos bien menos ie y se descuadra el recuado porque el ancho minimo es de 432 para que quepa, se podria corregir dandole a ie los 432 y al resto 430 he intentado con comentarios condicionales , y con el * html {estilo} pero no lee ninguno, si se te ocurre algo te agradezco me ayudes.

Responder
JMiur  

Tendría que ver el blog para saber si hay alguna propeidad que esté infleunciando en eso, márgenes, paddigns pero, de todas maneras, puedes establecer una regla para IE agregándola antes de </head>

<!--[if IE]>
<style>
... y aqui colocas la regla de estilo ...
</style>
<![endif]-->

Un detalle, puede ser que IE8 la muestre de una forma y las versiones inferiores de otra.

Responder
Administrador  

Si señor!! agregandole la declaración de estilo al comentario si lo lee, personalmente creo que ese script aunque en funcionalidad es perfecto su maquetacion es rara y ahi que hacer maromas como esta, gracias JMur.
Si quieres echarle una ojeada al blog, te dejo la direccion de una etrada que se visualiza bien, tengo tres categorias con solo 5 post y quiero q se muestren 5 miniaturas y contando el post q las contiene, necesita 6 post minimo cada categoria para mostrarlas completas.

http://tobysoft.blogspot.com/2011/02/irfan-view-magnifico-visor-de-todo.html

Responder
Administrador  

:S me apresure a decir TODOS, solo lo estaba mirando con ie y chrome, pero ahora que lo miro con firefox y opera esta con mas cosas raras, pero los otros dos bien, voy a meterle mano y te aviso.

Responder
Administrador  

Listo JMur me quedo perfecto, mejor hice lo siguiente: en vez de poner tamaños y backgronds a cada parte del script lo meti todo en un div nuevo y a ese le di fondo, luego si en los estilos del script lo personalize y que se mueva ahi dentro del div.

Responder
AUB’S  

Hola JMiur. He leído tu entrada y me ha parecido magnífica pero mi pregunta es: ¿puedo modificar como se muestra la fecha usando únicamente el código CSS? Te explicó: estoy usando Blogger in Draft y puedo agregarle (o en su caso modificarle) el código CSS directamente en el Diseñador de Plantillas sin tener que liarme con el código HTML de la plantilla.
De antemano gracias.

Responder
JMiur  

Dependerá de la plantilla. En las nuevas, lo dudo mucho pero, habría que verlo..

Responder
AUB’S  

Si tengo de las nuevas: Awesome Inc. Así que no se si haya inconveniente en como te explique usando Blogger in Draft y directamente en Modificar código CSS en el diseñador de Plantillas.

Responder
JMiur  

Lo que no me has dicho es qué es lo que quieres modificar, cómo quieres que se vea.

Responder
AUB’S  

Ah, había pensado en cambiar la fecha que se vea más estilizada ponerla en un recuadro rojo usando código CSS sin tener que meterse con la plantilla HTML (se trataría más de agregar que modificar) en el Disenador de Plantilla de Blogger in Draft.

Responder
JMiur  

Para eso debes agregar las reglas de estilo al rectángul oque contiene la fecha y al texto en si mismo:

.main-inner .widget h2.date-header {
......... acá las propeidades
}
.main-inner .widget h2.date-header span {
......... acá las propeidades
}

Responder
AUB’S  

Gracias.

Responder
Anónimo  

¿podríamos decorar la fecha y el titulo añadiéndole algún efecto o color?, si es así ¿como sería? Porque estoy muy interesado en hacerlo en mi blog

Responder
JMiur  

Si. Hay decenas de formas de hacerlo con CSS y/o JavaScript; es imposible enumerarlas, depende de lo que quiera hacerse.

Responder
Yona  

¿Funciona esto hoy, con los nuevos cambios de google? Es que los códigos de mi plantilla son bastante diferentes a los que aparecen aquí y no he editado nunca esa parte.

Responder
JMiur  

Los códigos de tu plantilla depende de quien la haya creado así que puede tener infinitas variantes.

Responder
Héctor Hernández  

hola jmiur disculpa, todas las propiedades CSS que mencionas ahi, se agregan antes de ]]> ?

Responder
JMiur  

Sí, puedes colcoarlas allí o entre etiquetas <style> </style>

Responder
Amandysha  

¡Hola JMiur! ¿Cómo se puede tener la fecha así cómo la tienes tú en el titulo de este post?

JMiur  

Fíjate en esta entrada.

Responder
Charo Fresneda  

Hola JMiur,

Primero darte la enhorabuena por tu blog, me está siendo de gran ayuda en esta hazaña que estoy emprendiendo sin tener ni idea de nada sobre el html.
Estoy intentando diseñar mi blog y está siendo una referencia muy buena para personalizar en base a la plantilla que he cogido como referencia (simple).
He podido hacer casi todos los cambios que más o menos quería pero me estoy encontrando con un problema que no logro solucionar.
Te cuento:
He logrado poner la fecha al lado del titulo de los post, pero no soy capaz de agrandar las letras, he tocado de todo creo pero nada.

Y otra cuestión es porque no se refleja el mismo tipo de letra en los widgets y título cuando estoy poniendo la misma.


#fecha {
display: block;
margin:0 1px;
float:left;
padding: 1px;
color: #464646;
background: transparent;
border:0;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 14px;
font-weight:bold;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}
.div.calefecha {width: 50px; float: left;}
.post h3 {
margin: -40px 20px 20px 60px;
font-family: arial;
font-size: 20px;
font-weight:bold;
color: #3a0d23;
text-transform: uppercase;
}

No logro subir el tamaño de la letra del título del post aunque toque el font-size.

Otra cuestión "capitalize" significa que tu eliges si quieres poner el titulo del post en mayuscula o minúscula? perdona mi ignorancia.

Gracias















JMiur  

Tendría que ver tu blog para decirte con exactitud dónde está el problema.

text-transform: capitalize; hace que cada palabra del texto comience con una mayúscula
text-transform: lowercase; coloca todo el texto en minúsculas
text-transform: uppercase; coloca todo el texto en mayúsculas
text-transform: none; lo deja tal como se ha escrito

Responder
Magoplup  

Una duda ¿hay dos etiquetas? <h2 class='date-header'><span><data:post.dateHeader/></span></h2>

JMiur  

Sí y no, depende de la plantilla. Puede haberlas. Probablemente, están dentro de condicionales o en includables distintos por lo tanto, se usan en diferentes situaciones.

Responder
Anónimo  

Hola Jmiur, soy un fiel seguidor de tu blog, creo que desde hace 3 años y hoy acudo a ti como último recurso, ya que no logro solucionar un pequeño problema que me trae con un dolorsito de cabeza estos últimos días. Mira, te cuento, en mi blog: www.appmetro.net tengo 2 autores, cada uno con una imagen diferente, seguí la guía en: http://www.oloblogger.com/2008/09/una-imagen-distinta-para-cada-autor.html. Todo funciona bien excepto el apartado de la fecha de cada post, en un autor se alinea correctamente pero en otro se desalinea como 10px hacia izquierda. Le he movido el css, he intentado todo para tratar de que se emparejen pero no he tenido éxito. De hecho ya no se que hacer, agregue el atríbuto !important, padding-left, margin, left, position:relative... y nada, no se acomoda. ¿Me puedes echar la mano?. Aquí te dejo el código de la fecha.

.post-date {
position:relative;
top:2px;
right:188px;
padding-left:21px;
margin-left:10px;
}

---------------------------------

<span class='post-date'>
<b:if cond='data:post.dateHeader'>
<span style='position:relative;right:18px;'>
<script>var mismaFecha = '<data:post.dateHeader/>';</script>
<img src='https://lh5.googleusercontent.com/-H-5m31R5cAo/Ucd25WOlYsI/AAAAAAAADnI/azn-EKlCc_Q/s12-no/date.png' style='margin-right:4px;'/><span style='color: #AAA;'>Hace</span> <data:post.dateHeader/></span>
<b:else/>
<script>document.write(mismaFecha);</script>
</b:if></span>


JMiur  

Hay muchos span y muchas posiciones relativas mezcladas con paddings y márgenes.

Digamos, para no cambiar mucha cosa, podrías modificar la regla de estilo .post-date {} de este modo:

.post-date {
display: block;
position: relative;
}

y en lugar de <span style='position:relative;right:18px;'> poner:

<span style='position: absolute; top: -17px; left: 40px;'>

En realidad, todo se te simplificaría si le agregaras position:relative; a la regla .post-header-line-1{} y definiendo su altura que es constante: height: 32px;

De ahí en más todo lo que esté dentro podría posicionarse con exactitud usando position: absolute y los valores top y left:

Aproximadamente esto:

.post-author {position: absolute;}
.post-date {left: 50px;position: absolute;top: 22px;}

La imagen con el avatar: style="float: left; margin-right: 6px;"

y el <span style='position:relative;right:18px;'> no haría falta o lo dejas pero quitas el estilo.

Responder
Anónimo  

Oye Jmiur, ya, para no quitarte más tu tiempo. Tengo otro pequeño problema. Recientemente he visto mi blog www.appmetro.net en otro navegador, Firefox, pero siempre utilizo Google Chrome, y he notado un par de desperfectos en el diseño, es decir, no se ven como deberían.

He tratado de solucionar esos desperfectos pero llego a acomodar los elementos correctamente en Firefox pero en Chrome se ven mal y a la inversa. No logró que en los 2 se vean igual. Haber si me puedes echar la mano con eso.

El primero es la caja del buscador del menú principal que se ubica 2 píxeles más abajo.

El segundo es el botón "Suscribirse" que se ve cortado, no mantiene el ancho interior y se ubica 3 píxeles más abajo.

El tercero es la imagen de la flecha izquierda del gadget superior de noticias destacadas que en Firefox no se muestra.

(Te iba a pegar el código y CSS de cada elemento para facilitarte las cosas pero son muy extensos que no me deja publicar el comentario).

De antemano muchas pero muchas gracias Jmiur, en serio, estoy en deuda contigo para siempre.

JMiur  

El problema de la caja del buscador es que todas las reglas de estilo de los divs header son contradictorias. Hay anchos y altos que son excesivos; se usa margin auto cuando en realidad no se está centrando algo; hay un excesos de posiciones relativas que se ve que se han utilizado para posicionar los elementos y que a su vez suman márgenes o flotaciones.

Lo más sencillo es lo más en algo así, es establecer al div contenedor con la propiedad position:relative y luego, posicionar los elementos internos con position :abosute eliminado márgenes y flotaciones ya que esa es la forma natural de ubica contenidos de modo exacto en cualquier navegador.

Con el botón suscribir hay algo similar. Se define un margen negativo, se establece un width del 100% en la caja lo que hace que ese ancho dependa de la fuente del texto que se verá distinta según sea el navegador, etc. Deberías establecer de modo específico el ancho del botón y de la caja de texto y no usar posiciones relativas para "mover" algo.

Por lo que se ve, .barraNoticiasTodas {} sólo requeriría la propiedad margin-left: 30px; y el resto hace que se no vea la parte izquierda en otro navegador.

En todos los casos, el tema básico es el mismo, hay demasiadas propiedades que se contraponen y eso termina por hacer que alguna de ellas falle.

Responder
Anónimo  

Hola Jmiur, pude solucionar una parte de los problemas gracias a tus consejos. Sin embargo, aún me quedan 2 pequeñas cosas y las últimas que restan, que no he logrado arreglar.

La ancho de la caja de búsqueda que es de 201px no lo respeta y se acorta a la mitad en Firefox y Google Chrome pero en Windows. Por que yo uso actualmente Linux.

.searchbox {
z-index:2;
position:relative;
}
#s {
background:#fff;border: 1px solid #CCC;box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1); -moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
position:absolute;
top:122px;
left:220px;
}

<div class='searchbox'>
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="001165099415190637130:cquhohhad-i" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input value="ISO-8859-1" name="ie" type="hidden"/>
<div class='search'><input id='s' name='q' type='text' style="color:#666;width:201px;height:21px;
font-size: 12px;font-family: "arial","helvetica",sans-serif;line-height: 18px;border:0;"/><input id='search-btn' style='style='border:0;' value='' type='submit'/></div>
</div>
</form>
<script src="http://www.google.es/coop/cse/brand?form=cse-search-box&lang=es" type="text/javascript"></script>
</div>

El ancho del formulario de comentarios se ve del mismo ancho de los elementos del post pero en Firefox y Chrome en Windows sobrepasa ese límite y no logró que se vea del mismo ancho en ambos.

.comment-form {
min-width: 627px !important;
max-width: 627px !important;
}

Y creo que es todo.

Aprendí muchas cosas gracias a tus consejos. Utilizar el atributo position:aboslute en vez de position:relative para posicionar elementos.


Gracias pero muchas gracias amigo, no sabes cuanto te aprecio. :)

JMiur  

Tal como está escrito esto, es erróneo:

<input id='s' name='q' type='text' style="color:#666;width:201px;height:21px;
font-size: 12px;font-family: "arial","helvetica",sans-serif;line-height: 18px;border:0;"/>

hay comillas internas en font-family que harán desastres; mira el código fuente resultante en el navegador y verás que dice cualquier cosa.

Para empezar, no hace falta poner comillas en familias de fuente que sean una sola palabra; en todo caso, se aconseja hacerlo en las que tienen dos 'Trebuchet MS' aunque tampoco es necesario.

Si usas CSS coloca el estilo junto con las demás reglas y quita el atributo style.

-moz-box-shadow; -webkit-box-shadow; -moz-border-radius; -webkit-border-radius; -o-border-radius; -ms-border-radius; -khtml-border-radius son innecesarios
las propiedades a usar son:
box-shadow y border-radius en cualquier navegador más o menos moderno


No veo que el formulario sobrepase el espacio. De todos modos, l IFRAME que contiene el formulario, es mas ancho que el TEXTAREA interior así que debes manejar eso como puedas ya que no es posible cambiar el contenido.

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