Mostrando entradas con la etiqueta fechas de las entradas. Mostrar todas las entradas
Mostrando entradas con la etiqueta fechas de las entradas. Mostrar todas las entradas

24.1.13

Cambiar el orden de las entradas de Blogger


Como sabemos, Blogger pone por defecto, de primera, la entrada más recientemente publicada y, en orden cronológiamente descendente, las demás entradas. Pero al mismo tiempo nos da la posibilidad de cambiar esa fecha.

Así, si queremos, por ejemplo, que una entrada publicada en una fecha anterior a la fecha de la entrada más reciente, aparezca en el primer lugar de la página principal, pues sencillamente le cambiamos la fecha en que la publicamos por una fecha posterior a la fecha de la entrada más recientemente publicada, así:

Vamos a:

Página principal ► Diseño ► Ver publicaciones

Ver publicaciones Blogger

Localizamos la entrada a la que le vamos a cambiar la fecha, y vamos a Editar entrada:

Editar entrada Blogger

En el menú Configuración de la entada encontramos la fecha y la hora en que fue publicada la entrada. Hacemos clik sobre esa opción:

Cambiar fecha entrada Blogger

Se desplegará el calendario en donde, activando la opción Establecer fecha y hora, cambiamos la fecha en la que fue publicada la entrada:

Cambiar fecha entrada Blogger

...y click en Listo.

Esta opción puede ser útil, por ejemplo, en el caso en que queramos que una entrada en particular sea la portada del blog. Le cambiamos la fecha por una muy posterior (ejemplo 1 de enero de 2020), y después eliminamos esa fecha (ver: Quitar la fecha de una entrada).

1.6.10

Personalizar fechas de las entradas (posts) de Blogger


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

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:

]]></b:skin>

...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.

Índice Edición HTML
Poner imagen de fondo a un blog Cambiar enlaces pie de página
Eliminar enlaces pie de página Eliminar 'Publicado por'
Eliminar fechas Eliminar la hora
Efecto subrayar links Eliminar barra superior
Evitar copias de blogs Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera Ícono para barra de direcciones
Centrar títulos posts Ensanchar blog
Cambiar color fondo posts Color fondo sidebar
Agregar una sidebar Color fondo de comentarios
Personalizar firma pie de posts Personalizar fechas de los posts
Diseñador de plantillas de Blogger Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas Cambiar de sitio la sidebar
Centrar imagen de la cebecera