03 abril 2009

Fecha tipo calendario


Hace día me preguntaba 3705 sobre como poner en las entradas la fecha tipo calendario. Hoy le explicare como hacerlo y además este se vera en todas las entradas así las haya publicado el mismo día. Es muy sencillo, pero recuerda siempre probar en un blog de prueba.

¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC"

  • Lo Primero:
Seguiremos los siguientes paso ante de empezar, no vamos al Panel > Configuración > Formato > Formato de cabecera de fecha > Seleccionamos la penúltima fecha del menú desplegable que se nos presenta (03 abril 2009).

  • Segundo:
Después de hacer el paso anterior nos vamos a Diseño > Edición de HTML > Expandir plantilla en artilugios. Y ante del </head> colocamos el siguiente script:




<script type='text/javascript'>
//<![CDATA[
var ultimaFecha;
function remplaza_fecha(d){
if (d == "") {
d = ultimaFecha;
}
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
ultimaFecha = d;
}
//]]>
</script>

  • Tercero:

Ahora buscaremos el siguiente código en la plantilla (CTRL+F) (Si no lo encuentras búscalos por este también: <data:post.dateHeader/>):



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

Una vez localizado lo remplazaremos por el siguiente:


<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('');</script>
</div>



  • Cuarto:
Ahora vamos a darle el estilo CSS, que por supuesto lo encontraremos después del ]]></b:skin>:



/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

El código CSS hay ciertas cosas que puedes modificar como la posición (Float) del calendario, el código original esta a la Izquierda(Left) y lo puedes cambiar por Derecho(Right). Si quieres cambiar el tamaño del texto tienes que hacerlo en font-size. Puedes cambiar la imagen en background y si utiliza alguna imagen diferente a la que te ofrezco aquí, tendrás que cambiar algunos valores como el padding, margin y font-size .



Pack de iconos de calendario Descargar


Fuentes: El Escaparate de Rosa <> Vagabundia


8 comentarios:

  1. Tesoro tienes 2 Mimos en el blog...besitos!!!

    ResponderEliminar
  2. Hola Antony.

    Este mismo truquillo es el que uso yo para siempre poner mis fechas con este estilo. Vamos ahora a probar con estos íconos que nos brindas.

    Saludos cordiales!.

    ResponderEliminar
  3. Hola Graciela! Gracias! :) ;) =)

    Hola Birdelo! Es muy útil... Saludos!

    ResponderEliminar
  4. HOla a ver si me puedes ayudar! nO me funcionó el truquito :(

    ResponderEliminar
  5. I got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.

    ResponderEliminar
  6. solo el código no va funcionar, ay que añadir con los datos correspondientes

    ResponderEliminar
  7. Nice post. I learn something new and challenging on blogs I stumbleupon every day.
    It's always exciting to read through content from other authors and practice a little something from their sites.

    Take a look at my webpage - cccam cfg server files

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!