| 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. | 
0 comentarios :
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.