Mostrando posts de cierta fecha

En Blogger Update muestran una forma un poco diferente para que podamos navegar el blog. Aunque hablan de reemplazar el elemento Archivos, en realidad, sólo es una alternativa extra.

Lo que se hace es sencillo; utilizar JavaScript para establecer una fecha determinada, crear una dirección URL y abrir esa página. Si hay posts en esa fecha, se mostrarán y si no los hay, claro, no se mostrará nada.

Creamos un Elemento HTML y allí ponemos el script:

<script type="text/javascript">
home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";
function submitdate(){
year = document.selectdate.year.options[document.selectdate.year.selectedIndex].value;month = document.selectdate.month.options[document.selectdate.month.selectedIndex].value;day = document.selectdate.day.options[document.selectdate.day.selectedIndex].value;tmax = year+"-"+month+"-"+day+"T23:59:59"+timezone;
tmin = year+"-"+month+"-"+day+"T00:00:00"+timezone;
tlink = home_page+"search?updated-max="+encodeURIComponent(tmax)+"&updated-min="+encodeURIComponent(tmin)+"&max-results=20";
if(year=="" || month=="" || day=="") {
alert("Please select a right date!"); return false;
} else {
self.location.href=tlink;
}
}
</script>

Sólo cambiamos dos datos, el nombre de la página de inicio y la zona horaria que podemos verificar en Configuraciòn | Formato:

home_page = "http://nuestroSitio.blogspot.com/";
timezone = "-03:00";

Luego, agregamos es el código HTML y cuyo esquema (es muy tedioso escribirlo todo) es el siguiente:

<form id="buscarXfecha" name="selectdate"><span>Seleccione una fecha</span>

<select name="day">
<option value="" selected="selected">DIA</option>
<option value="01">1</option> ....... <option value="31">31</option>
</select>

<select name="month">
<option value="" selected="selected">MES</option>
<option value="01">ENE</option> ....... <option value="11">NOV</option>
<option value="12">DIC</option>
</select>

<select name="year">
<option value="" selected="selected">AÑO</option>
<option value="2007">2007</option><option value="2008">2008</option>
</select>

<input type="button" onclick="submitdate()" value="BUSCAR"/>

</form>

Seleccione una fechaDIA12345678910111213141516171819202122232425262728293031 MESENEFEBMARABRMAYJUNJULAGOSEPOCTNOVDIC AÑO20072008

Para el resto, sólo hace falta un poco de CSS que agregamos antes de </b:skin> y el ejemplo tiene el siguiente:

#buscarXfecha { /* el bloque del formulario */
background-color: #243240;
border: 1px solid #4D5B68;
margin: 0 auto;
padding: 5px 0 10px;
text-align: center;
width: 250px;
}
#buscarXfecha span { /* el texto indicativo superior */
color: #FFFFFF;
display:block;
margin-bottom: 5px;
}
#buscarXfecha select { /* los elementos con las opciones */
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
font-size: 11px;
width: 50px;
}
#buscarXfecha input { /* el botón de envio */
background-color: #CCC;
border: 2px solid #8D9BA8;
color: #000;
cursor: pointer;
font-size: 10px;
font-weight: bold;
}