Cambiar el widget de Archivos por un Calendario

En una de las últimas entradas de BloggerSPhera nos muestran la forma de modificar la forma en que vemos el elemento Archivos de Blogger, reemplazando las listas por un calendario.

Aunque no lo he implementado acá, en este blog de pruebas se lo puede ver funcionando y quedará algo así:

Lo que veremos será un control para seleccionar el mes, un calendario donde estarán resaltados los días donde existan entradas en ese mes, una barra de navegación para avanzar y retroceder mes a mes y debajo, una lista con los enlaces a las entradas correspondientes. Tanto con el selector como con los enlaces de navegación, podremos desplazarnos a lo largo de las listas de archivos, sin cambiar de página.

Para aplicarlo, lo primero es descargar el script correspondiente que está en este archivo ZIP , ya traducido al español. Aunque no es necesario modificarlo para que funcione, podría editarse y cambiarse algunos detalles como los textos que se muestran por defecto.

Podemos agregarlo de dos maneras, lo alojamos en un servidor o bien copiamos y pegamos el contenido dentro de estas etiquetas, justo antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  // aquí pegamos el contenido del archivo
//]]>
</script>

Inmediatamente después, agregamos la llamada a la función con esto:

<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

Ahora, con los artilugios expandidos, vamos a buscar el widget de Archivos:

<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'>
  .......
</b:widget>

Eliminaremos todo lo que está entre la apertura y el cierre de la etiqueta y lo reemplazaremos. Terminará quedando esto:

<b:widget id='BlogArchive1' locked='false' title='NOMBRE' type='BlogArchive'> 
<b:includable id='toggle' var='interval'> <!-- Toggle not needed for Calendar --> </b:includable>
<b:includable id='interval' var='intervalData'> </b:includable>
<b:includable id='flat' var='data'>
 <div id='bloggerCalendarList'>
  <ul>
    <b:loop values='data:data' var='i'>
      <li class='archivedate'>
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
    </b:loop>
  </ul>
 </div>
  <div id='blogger_calendar' style='display:none'>
    <table id='bcalendar'><caption id='bcaption'></caption>
      <thead id='bcHead'/>
      <tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr></tbody>
    </table>
    <table id='bcNavigation'><tr><td id='bcFootPrev'/><td id='bcFootAll'/><td id='bcFootNext'/></tr></table>    
      <div id='calLoadingStatus' style='display:none; text-align:center;'>
        <script type='text/javascript'>bcLoadStatus();</script>
      </div>
      <div id='calendarDisplay'/>
    </div>
    <script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='menu' var='data'>  </b:includable>
<b:includable id='posts' var='posts'> <!-- posts not needed for Calendar --> </b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>  
  </div>
</b:includable>
</b:widget>

Guardamos y para que esto funcione, deberemos verificar que la configuración del widget sea correcta y esté seleccionada Lista:

Estilo Jerarquía Lista Menú desplegable

Sólo nos faltaría establecer las propiedades CSS para el calendario, eso lo hacemos agregando el estilo antes de </b:skin>:

#blogger_calendar { /* es el bloque donde lo mostraremos */
  margin:0 auto; /* centrado */
  width: 190px; /* el ancho */
}

#bcaption { /* el rectángulo superior con los meses */
  height:20px;
  text-align:right;
}
#bcaption select { /* este es el selector de los meses */
  background-color: #345;
  border: 1px solid #567;
  color: #DDD;
  font-family:Tahoma;
  font-size:11px;
  padding: 0 0 0 10px;
  width:100px
}

table#bcalendar thead tr th { /* cada una de las celdas con los nombres de los dias de la semana */
  background: #345;
  border: 1px solid #567;
  color: #EEE;
  font-family: Tahoma; 
  font-size: 11px; 
  font-weight: bold;
  padding: 2px; 
  text-align: center;
  width: 20px;
}

table#bcalendar tbody tr td { /* cada celda con el número del dia */
  background: #567;
  border: 1px solid #789;
  color: #ABC;
  text-align: center;
  padding: 2px;
  -moz-border-radius: 2px;
}

td.highlightCell { /* las celdas donde hay entradas */
  background-color: #9AB !important;
}
table#bcalendar tbody tr td a { /* el enlace de esas celdas */
  color: #000;
  font-weight: bold; 
}

td.firstCell { /* las celdas vacias del inicio */
  visibility: hidden; /* podemos hacerlas visibles usando visible */
}
td.emptyCell { /* las celdas vacias del final */
  visibility: hidden;  /* podemos hacerlas visibles usando visible */
}
td.filledCell {background: #FFF;} /* el color de esas celdas vacias si es que están visibles */

table#bcNavigation  { /* es la barra de navegación inferior */
  color: #DDD;
  background-color: #123;
  border: 1px solid #234;
  font-family:Tahoma;
  font-size:10px;
  margin: 5px 0 0 0;
  padding: 0 ;
  text-align:center;
  width:190px;
}
table#bcNavigation a {color: #ABC;} /* el color del texto */
td#bcFootPrev {float: left; width: 10px;}  /* el enlace hacia atrás */
td#bcFootNext {float: right; width: 10px;}  /* el enlace hacia adelante */
#calendarDisplay{ /* debajo se muestra la lista de entradas */
}

/* esta es la lista inferior donde se muestran las entradas del mes */
ul#calendarUl { }
ul#calendarUl li { }
ul#calendarUl li a { /* cada item de la lista es un enlace */
  color: #9AB;
display: block;
  font-size:11px;
  padding-left:30px;
}

REFERENCIAS:BloggerSPhera