Poner una imagen de calendario en la fecha de mi blog






Hoy, visitando varios blogs, he observado que muchos bloggers colocan la fecha de cada entrada dentro de una imágen de tipo calendario. He estado buscando varias imágenes y al final he encontrado una que queda bastante bien.

Asique os voy ha explicar como podeis hacerlo:

Lo primero que debemos hacer es cambiar el formato con el que muestra las fechas nuestro blog. Para ello nos vamos a configuración, formato y en la opción Formato de cabecera de la fecha elegimos la penúltima que aparece. Ejemplo: 05 agosto 2008.

Lo siguiente que debemos hacer es ir a edición de html, expandimos artilugios y justo antes de la etiqueta </head> pegamos el siguiente script:


<script>
function remplaza_fecha(d){
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);
}
</script>



El siguiente paso será localizar la etiqueta <data:post.dateHeader/> y la sustituimos por el siguiente código:


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



por último buscamos la etiqueta ]]></b:skin>
y justo encima pegamos lo siguiente:

/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(VUESTRA IMAGEN) no-repeat;
border: 0;
width:65px;
height:50px;
}

.fecha_mes {
font-size: 13px;
margin: 4px 0 0 13px;
color:white;
display: block;
}

.fecha_dia {
margin: 7px 0 0 14px;
display: block;
font-size: 14px;
color:#448088;
}


Tendréis que cambiar VUESTRA IMAGEN por la url donde tengais alojada vuestra imágen. Si colocais una imágen distinta a la que tengo yo puesta, es probable que la fecha no aparezca demasiado colocada y tengais que modificar los valores del margin.

Aqui os dejo la url donde esta alojada la imágen que tengo yo colocada por si la quereis coger.

http://agudovk.googlepages.com/calendar.jpg

Cualquier duda consultarme

¿No te funcionan los cambios?
¿Deseas añadir algo nuevo y no sabes como?
Nosotros lo hacemos por ti

10 comentarios:

Anónimo dijo...
25 de septiembre de 2008, 9:14  

bueno!!

Pedro dijo...
14 de octubre de 2008, 3:25  

Lo primero que no entiendo es:

width:65px;
height:50px;

Siendo que el icono del calendario no es más ancho que alto.

Lo segundo es que este tutorial no funciona... no sale el calendario, a pesar de haber seguido todos los pasos. :(

Javi dijo...

Hola pedro,

width:65px y height:50px, solo es el tamaño (altura y ancho). Funcionar estoy seguro de que funciona, yo lo tengo implementeado y no me ha dado ningun problema. Revisalo bien y si aun asi no lo consigues comentame que te aparece o algún detalle mas para intentar ayudarte. Un saludo

Ing. Kamilo-sama dijo...
13 de noviembre de 2008, 5:35  

hola amigo me preguntaba como hacer si yo queria que la fecha me saliera completa en una barra, supongo que es acomodando el primer script pero ps queria que tomaras en consideracion esto...

Kamilo.

carlos dijo...
3 de diciembre de 2009, 0:37  

quiero recomendarles un sitio que tiene calendarios para el blog o página web.

Por otro lado felicitaciones por el sitio, muy bueno. Voy a volver a visitarte

saludosss

Anónimo dijo...
27 de diciembre de 2009, 16:06  

hola me ayudas en algunos post me sale la fecha y en otros no

Hugo Fuentes dijo...
3 de abril de 2010, 20:42  

Buenas tardes.

En mi Html no me parece la línea . Podrías echarme una mano!!! Que tengo que modificar. Mi plantilla es la son of moto de blogger.

Muchas Gracias

Augusto Hurtado Leguia dijo...
24 de abril de 2010, 15:28  

HOla
En mi blog no me aparece
lobusco y nada. ¿Puedes ayudarme?

Anónimo dijo...
4 de mayo de 2010, 6:04  

:)

Shiroku Takeshi dijo...
12 de mayo de 2010, 0:51  

Hola mi codigo esta asi!! de mi date-header que debo hacer????

h2.date-header {
margin:0;
visibility:hidden;
}

Cuéntanos que te ha parecido este artículo

Emoticonos en blogger
:) :'( :( :P :D :$ ;) :-I :-X :o :O |O :\

Traductor

Suscríbete vía email

Introduce tu dirección de correo:

Suscríbete

Seguidores