1

Formato de fecha mas adecuado

Etiquetas: , , ,

Buenas

Ayer leí un post interesante, sobre como mediante CSS añadir una nubecita con el numero de comentarios a la típica imagen de calendario de las fechas de los post de Wordpress. Esto me pareció genial, pero claro, para ello primero hay que hacer que Blogger pinte la fecha como Wordpress.

Al cabo de unas horas ya lo tenía solucionado, pero no acababa de cuajar con el theme, así que me volví a sumergir en el código de Blogger y casi me ahogo. Por lo que durante algún tiempo se queda este theme, eso si, con la fecha bonita y la nubecita indicando el numero de post, ala.

Para el que quiera hacerlo:

La explicación de como hacerlo en Wordpress la encontré en aNieto2K, quien a su vez enlaza a CSS-Tricks. Las imágenes usadas para el calendario son de Sotak. La de la nuvecita imagino que de CSS-Tricks.

DiciembreNoviembreOctubreSeptiembreAgostoJulioJunio
MayoAbrilMarzoFebreroEneroNuvecita


Primero, hay que conseguir que Blogger pinte la fecha al estilo de Wordpress, para ello seguí los pasos indicados en Blogger-Adictos.

El problema surge cuando el método dado en Blogger-Adictos nos pinta tanto año, mes y día, y el método explicado en CSS-Tricks tan solo el día, y nos pone de fondo una imagen según el mes. Por lo que hay que editar el script de Blogger-Adictos, y descartar los CSS, dejándolo así:

  1. <script>
  2. function date_replace(d){
  3. var da = d.split(' ');
  4. day = da[0];
  5. mon = da[1].slice(0,3);
  6. year = da[2];
  7. document.write(" <p class='date month"+mon+"'>"+day+" <span> "+mon+" "+year+" </span> </p>");
  8. }
  9. </script>

Y en el código del theme debemos buscar <data:post.dateHeader/> y ahí cambiar ese código, que pinta la fecha, por este otro:

  1. <div class='shield'>
  2. <script>date_replace('<data:post.dateHeader/>');</script>
  3. <div class='commentscloud'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></div>
  4. </div>

Con esto lo que le estaremos diciendo a Blogger es que cree un div de tipo shield, dentro de el coja la fecha y la envíe a la función, donde la convertiremos en un párrafo de clases date y month + las tres primeras letras del mes, ósea: monthene, monthfeb,... Dentro de este párrafo pintaremos el día, y un span con el mes y el año. A continuación de este párrafo un nuevo div de tipo Commentscloud donde pondremos el código propio de Blogger para los comentarios.

Dicho así parece un rollo, pero ahora vamos con los CSS's. Nuevamente en Blogger hay que añadir antes de ]]></b:skin> los CSS's que serán:

  1. p.date
  2. {
  3. width: 42px;
  4. height: 10px;
  5. padding: 18px 0 14px 0;
  6. text-align: center;
  7. }

Con este estilo ajustamos el tamaño del div para que el día quede centradito.

  1. p.date span
  2. {
  3. display: none;
  4. }

Con este estilo, ocultamos el span con el año y el mes, de forma que solo se vean al quitarle los estilos, ya que nosotros sabremos el mes por la imagen de fondo, que no se vera sin estilos.

  1. .monthene { background: url(http:///01.gif) no-repeat 0 0; }
  2. .monthfeb { background: url(http:///02.gif) no-repeat 0 0; }
  3. ....

Un estilo de tipo mont + las tres letras del mes, para cada mes, poniéndonos de fondo la imagen del calendario.
  1. .shield {
  2. position: relative;
  3. }
  4. .commentscloud
  5. {
  6. position: absolute;
  7. text-align: center;
  8. top: -4px;
  9. left: 22px;
  10. width: 30px;
  11. height: 24px;
  12. padding: 3px 0;
  13. background: url(http:///bubble2.png) no-repeat 0 0;
  14. }

Y por ultimo con estos dos estilos ponemos la imagen de la nubecita flotando sobre el calendario.