| Nota: Este procedimiento no funciona muy bien con las siguientes plantillas: Rounders, Herbert, Snapshop, TicTac, Tekka y Sand dollar. -----------------------------Siguiendo los siguientes pasos podremos hacer que las fechas de las entradas de nuestro blog se muestren dentro de una imagen tipo calendario: 1.- Cambiamos el formato con que se muestran las fechas de las entradas. Para ello vamos a:
Página principal ► Diseño ► Configuración ► Idioma y formato ► Formato de cabecera de fecha |
...seleccionamos la penúltima opción y guardamos configuración. 2.- Vamos a Edición de Html:
Página principal ► Diseño ► Plantilla ► Edición de HTML ► Expandir plantillas de artilugios |
...y antes de de la etiqueta </head>, pegamos el siguiente código: <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> |
3.- Localizamos esta línea de código: <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
|
- Si la encontramos dos veces, utilizamos la segunda.
4.- La eliminamos y en su lugar ponemos este código: <div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div> |
5.- Regresamos hacia arriba en la plantilla para localizar la etiqueta: ...encima de la cual pegamos estas líneas de CSS para controlar el estilo de la fecha: /* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL7ol-4F0ZObV_jL1YdAWyxhwVljmKnkaMKMR7UChAUGnNj2fTy1G-ItBcZQZ31Y5XFxkg4FYF5ajMApirDQf_u-mniGYMj4kNXbQD91DUCAMQwzQ4SVFORaJfc_5eiecBxBPSZTYKQNNj/s1600/Fecha3.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 {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
} |
6.- Guardamos los cambios La línea resaltada en rojo corresponde a la url de la imagen tipo calendario, la podemos cambiar. Así se verá la fecha en una entrada:  A continuación dejamos algunas imágenes. Si queremos poner alguna de ellas hacemos click sobre la misma y la tendremos en otra ventana, copiamos la URL que aparece en la barra de direcciones y la pegamos en el sitio indicado en el código. | 
12 comentarios :
Hola, es un excelente aporte he seguido todos lo pasos, pero en vez de salirme de esta menera:
10
MAY
2010
me sale como si le hubiera hecho un enter luego del dia y del mes, así:
10
MAY
2010
Puedes ayudarme...
xlexpert: Ese problema se debe al tipo de plantilla. Este procedimiento no funciona muy bien con estas plantillas: Rounders, Herbert, TicTac, Tekka y Sand dollar. La de tu blog es Rounders.
Si de todas maneras quieres personalizar la fecha de las entradas, debes cambiar de plantilla (Te sugiero Denim, Minima o Son of mota). En este caso, una vez cambiada la plantilla, deberás hacer los cambios indicados en el tutorial, omitiendo los pasos 3 y 4.
Si no quieres cambiar de plantilla:
a) Dejas las fechas así, lo que no te aconsejo ya que no es muy buena presentación, o
b) Reversas los cambios que hiciste para volver a la fecha original.
Discúlpame por no haber hecho esta aclaración en el tutorial.
Si tienes alguna duda no vaciles en formularla.
Saludos.
Hola Castorlux. Lo he intentado en mi plantilla y no funciona.
Lo que gustaría es implementar un efecto como lo tiene en CONTENIDO, en el cual se da clic a la flechita y se expande otras opciones. Me gustaría saber si eso queda automático, que si cada vez que pongo las Etiquetas en las publicaciones ya se actualiza?
Muchas gracias.
Jcgonzalez3165: Un modelo de código para menú desplegable lo puede encontrar aquí:
http://bloguermast.blogspot.com/2010/09/menu-desplegable-para-blogger.html
Saludos.
hola lo intente con mi platilla y busque ""Localizamos esta línea de códigola del paso 3 y no la encontre =("" que hise mal
Tito: La línea de código puede no ser exactamente igual. Busque esta:
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
No se le olvide expandir las plantillas de artilugios.
Saludos.
Muy bien explicado y me ha servido de ayuda para mejorar el diseño de mi blog.
Muchas gracias y felicidades por este fantástico blog.
Kasimiro: Muchas gracias por su visita y su comentario.
Saludos.
buenas noches...
No se si sigues con este tema, pero sigo tus pasos y no consigo que me salga como dices... Hay que incluir algo mas en el Css del diseño de la plantilla??? o solo en los sitios que me dices. Haciendolo como me dices solo me sale
10
abr
2012
sin el marco y sin que por un casual salga la entrada a la derecha de la fecha, ya que asi queda muy feo... Me puedes ayudar???
Gracias.
Chisco: Si no aparece el marco es porque no pusiste, en el código del punto 5, la dirección de la imagen o la pusiste mal. Y si el calendario no aparece a la izquierda de las entradas es que, como se anotó al comienzo del tutorial, éste no funciona bien para algunas plantillas. Posiblemente la tuya sea una de ésas.
Saludos.
Buenas noches, pues si que tengo puesto el punto 5 en lo que me comentas, y me estoy volviendo loco, jaja, me puedes decir en que plantillas funcionaria un sistema asi??? pq la verdad soy bastante novato y aunque no sea algo importante me parece que queda muy estetico si lo pongo segun tu tutorial. Gracias por contestar.
Chisco: Este sistema funciona muy bien en la plantilla Denim, que fue la que se utilizó en el ejemplo.
Saludos.
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.