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.
- Lo Primero:
- Segundo:
<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:
/* 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
Tesoro tienes 2 Mimos en el blog...besitos!!!
ResponderEliminarHola Antony.
ResponderEliminarEste 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!.
Hola Graciela! Gracias! :) ;) =)
ResponderEliminarHola Birdelo! Es muy útil... Saludos!
no funciona esto ...:S
ResponderEliminarHOla a ver si me puedes ayudar! nO me funcionó el truquito :(
ResponderEliminarI got to read lots of articles on your blog. Its amazing how interesting it is for me to visit you very often.
ResponderEliminarsolo el código no va funcionar, ay que añadir con los datos correspondientes
ResponderEliminarNice post. I learn something new and challenging on blogs I stumbleupon every day.
ResponderEliminarIt'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