Fecha tipo calendario en Blogger y Wordpress

Bueno en lo que arreglo las cosas en el blog, les sigo trayendo pequeños posts :3 ... pequeños pero útiles xD, y en esta ocasión les traigo un código para que le den estilo a sus fechas con una linda forma de calendario, como la que tengo yo justo después del titulo del post :3 ^^ ... es sencillo, fácil y rápido XD que solo basta con agregar y editar sus fechas :3 ... bueno comencemos! primero con Blogger ya que era mi sistema de blogs y ahi la cosa es más fácil XP

Este tuto te dará un resultado parecido a esto ->
Antes de comenzar debes descargarte este pack de fondos de calendario, igualmente puedes crear los tuyos (las medidas son 60x60 px)... sube la imagen que más te guste a un host (imageshack, dropbox, tinypic, etc.) y copia la url y la pegas en el pedazo de código que dice "background: transparent url(URL de la imagen) no-repeat;" y listo :3 .

BLOGGER

1.- Poner la fecha del blog en formato dia-mes-año sin espacio o caracteres, esto se hace entrando a tu blog, en el menú izquierdo entrar a "Diseño" -> "Entradas del blog" -> editar.



2.- Después ir a "Plantilla" y seleccionar "HTML", ahi buscar [html]<h2 class='date-header'><span><data:post.dateHeader/></span></h2>[/html], la primera, borrarla y en su lugar colocar:
[html]<div id='Fecha'>
<script>cambiarFecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Fecha'>
<script>cambiarFecha(&#39;&#39;);</script>
</div>[/html]

3.- antes de [html]</head>[/html] colocar:

[html]<script type='text/javascript'>
//<![CDATA[
var FechaCalendario;
function cambiarFecha(d){
if (d == "") {
d = FechaCalendario;
}
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(mes+dia+anio);
FechaCalendario = d;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>

/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 5px 2px 0 -70px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#282828; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Color del año */
}
</style>
</b:if>[/html]

4.- Obviamente guarda los cambios.

Eso es todo para que ya tengan su fecha modificada :3 ... ahora vamos a ver como hacerle para wordpress.

WORDPRESS

Este tuto solo sirve para wordpress alojados en servidores "propios", si usas wordpress desde la misma plataforma online de wp entonces no sirve, ya que tienes que tener total control sobre todo el wp; dicho esto comencemos :3

1.- En tu archivo "single.php" / "post.php" / "page.php" / "index.php" o donde quieras, debes borrar tu configuración de como mostrar fecha por la siguiente:
[php]<div id='Fecha'><strong class='fecha_mes'><?php the_time('M') ?></strong><strong class='fecha_dia'><?php the_time('d') ?></strong><strong class='fecha_anio'><?php the_time('Y') ?></strong></div>[/php], guarda y sube el/los archivos al host.

2.- Ahora en tu hoja de estilos principal del blog (generalmente "style.css") debes colocar el css que hará la magia -w- ...
[css]/* Fecha tipo calendario
----------------------------------------------- */
#Fecha {
background: transparent url(URL de la imagen) no-repeat;
display: block;
width:60px;
height:60px;
float: right;
margin: 0;
padding: 0;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-3px;
text-align:center;
color:#fff; /* Color del mes */
}

.fecha_dia {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-3px;
text-align:center;
color:#666; /* Color del día */
}

.fecha_anio {
display: block;
font-size: 10px;
margin-top:-6px;
text-align:center;
color:#666; /* Color del año */
}[/css], guarda el archivo y subelo al host.

Y listo!! creo que es más sencillo en WP xD... pero en fin :3 ^^! ya tenemos nuestra fecha con un bonito estilo, si en dado de los casos la fecha te aparece chueca o muy junta o algo, trata de jugar (prueba y error) con "margen-top" del estilo a ver como se ve mejor y si quieren cambiar el color solo cambienlo donde indica "Color del mes,dia,año" y ya, cualquier duda escribanla en los comentarios :3 ^^ y trataré de solucionarla, yo misma he probado ambos códigos en blogger y wordpress y funcionan, no deberian darles problemas :3 nos vemos!!

6 comentarios:

  1. Wauuu debe verse muy lindo con fecha así, para el diseño del próximo año de mi blog le agregare eso uwu
    Muchos saludos y besos y gracias x el tutorial

    ResponderBorrar
  2. *-* gracias por el tuto.. veré si se lo implemento a la plantilla del fansub :3
    Un abrazo y suerte arreglando el blog ^^

    ResponderBorrar
  3. ^^ que bueno que te guste :D jejejeje y de nada n_n!! seguiré sacando más tutos para el blogger :3 n_n

    ResponderBorrar
  4. Muchisimas, muchisimas gracias! llevo como unas 20 paginas vistas para cambiar la fecha y no habia manera! Te estoy muy agradecida. Un besote.

    ResponderBorrar
  5. Hola.
    Por fin lo he conseguido...!!!

    Muchas gracias, porque no lo encontraba por ningún lado que funcionase.

    Solo me queda una pregunta, ¿es posible hacer que no se muestre en la portada del blog? es decir, que la fecha solo aparezca cuando se entre a la publicación concreta.

    Gracias de nuevo y saludos.

    P.D. La dirección que te he puesto es la plantilla que estoy modificando con cosas nuevas que todavía no están implementadas, puesto que las estoy probando en un blog de pruebas que estoy preparando.

    ResponderBorrar
  6. Muchas gracias por tu post tan bien explicado y concreto, ¡enhorabuena!
    Pero quiero que en algunos post no se vea la fecha, ¿es posible?
    gracias por tu ayuda

    ResponderBorrar