Calendario de archivos controlado en "fuentes y colores"

No hace mucho os explicaba la forma de colocar un calendario de archivos en el blog, hoy os muestro como colocar otro calendario parecido pero al que podremos controlar su "aspecto" desde Fuentes y colores de nuestro panel.

Lo he encontrado en phydeaux3, lo he traducido al castellano y he cambiado la imagen de carga por otra más pequeña, además he colocado un pequeño icono delante de las entradas que se muestran debajo del calendario.



[1] Añadimos un nuevo elemento "Archivos" en nuestra sidebar, que ha de tener este formato (pincha en la imagen para verla a mayor tamaño):







[2] Localizamos ahora en la parte de "Edición HTML", sin expandir artilugios, la línea correspondiente al widget de "Archivos":

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

Tendremos que cambiar esa línea por este código:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>

<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 + "_ArchiveList"'>

<b:if cond='data:style == "HIERARCHY"'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == "FLAT"'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == "MENU"'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='toggle' var='interval'>

<!-- Toggle not needed for Calendar -->

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

<!-- Table Header -->

<thead id='bcHead'></thead>

<!-- Table Footer -->



<!-- Table Body -->

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

<td id='bcFootAll'></td>

<td id='bcFootNext'></td>

</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='posts' var='posts'>

<!-- posts not needed for Calendar -->

</b:includable>

<b:includable id='menu' var='data'>

Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

</b:includable>

<b:includable id='interval' var='intervalData'>

Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format

</b:includable>

</b:widget>

[3] Colocamos ahora el script para el calendario justo antes del </head> de nuestra plantilla:

<!-- Blogger Archive Calendar -->

<script type='text/javascript'>

//<![CDATA[



var bcLoadingImage = "http://img182.imageshack.us/img182/7880/rotatingarrowuq0.gif";

var bcLoadingMessage = " Cargando....";

var bcArchiveNavText = "Ver archivo";

var bcArchiveNavPrev = '&#9668;';

var bcArchiveNavNext = '&#9658;';

var headDays = ["Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado"];

var headInitial = ["Do","Lu","Ma","Mi","Ju","Vi","Sa"];



// Nothing to configure past this point ----------------------------------

var timeOffset;

var bcBlogID;

var calMonth;

var calDay = 1;

var calYear;

var startIndex;

var callmth;

var bcNav = new Array ();

var bcList = new Array ();



//Initialize Fill Array

var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];

function openStatus(){

document.getElementById('calLoadingStatus').style.display = 'block';

document.getElementById('calendarDisplay').innerHTML = '';

}

function closeStatus(){

document.getElementById('calLoadingStatus').style.display = 'none';

}

function bcLoadStatus(){

cls = document.getElementById('calLoadingStatus');

img = document.createElement('img');

img.src = bcLoadingImage;

img.style.verticalAlign = 'middle';

cls.appendChild(img);

txt = document.createTextNode(bcLoadingMessage);

cls.appendChild(txt);

}

function callArchive(mth,yr,nav){

// Check for Leap Years

if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {

fill[2] = '29';

}

else {

fill[2] = '28';

}

calMonth = mth;

calYear = yr;

if(mth.charAt(0) == 0){

calMonth = mth.substring(1);

}

callmth = mth;

bcNavAll = document.getElementById('bcFootAll');

bcNavPrev = document.getElementById('bcFootPrev');

bcNavNext = document.getElementById('bcFootNext');

bcSelect = document.getElementById('bcSelection');

a = document.createElement('a');

at = document.createTextNode(bcArchiveNavText);

a.href = bcNav[nav];

a.appendChild(at);

bcNavAll.innerHTML = '';

bcNavAll.appendChild(a);

bcNavPrev.innerHTML = '';

bcNavNext.innerHTML = '';

if(nav < bcNav.length -1){

a = document.createElement('a');

a.innerHTML = bcArchiveNavPrev;

bcp = parseInt(nav,10) + 1;

a.href = bcNav[bcp];

a.title = 'Archivo anterior';

prevSplit = bcList[bcp].split(',');

a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};

bcNavPrev.appendChild(a);

}

if(nav > 0){

a = document.createElement('a');

a.innerHTML = bcArchiveNavNext;

bcn = parseInt(nav,10) - 1;

a.href = bcNav[bcn];

a.title = 'Archivo siguiente';

nextSplit = bcList[bcn].split(',');

a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};

bcNavNext.appendChild(a);

}

script = document.createElement('script');

script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';

document.getElementsByTagName('head')[0].appendChild(script);

}

function cReadArchive(root){

// Check for Leap Years

if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {

fill[2] = '29';

}

else {

fill[2] = '28';

}

closeStatus();

document.getElementById('lastRow').style.display = 'none';

calDis = document.getElementById('calendarDisplay');

var feed = root.feed;

var total = feed.openSearch$totalResults.$t;

var entries = feed.entry || [];

var fillDate = new Array();

var fillTitles = new Array();

fillTitles.length = 32;

var ul = document.createElement('ul');

ul.id = 'calendarUl';

for (var i = 0; i < feed.entry.length; ++i) {

var entry = feed.entry[i];

var link = entry.link[0].href;

var title = entry.title.$t;

var author = entry.author[0].name.$t;

var date = entry.published.$t;

var summary = entry.summary.$t;

isPublished = date.split('T')[0].split('-')[2];

if(isPublished.charAt(0) == '0'){

isPublished = isPublished.substring(1);

}

fillDate.push(isPublished);

if (fillTitles[isPublished]){

fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;

}

else {

fillTitles[isPublished] = title;

}

li = document.createElement('li');

li.style.listType = 'none';

li.innerHTML = '<a href="'+link+'">'+title+'</a>';

ul.appendChild(li);

}

calDis.appendChild(ul);

var val1 = parseInt(calDay, 10)

var valxx = parseInt(calMonth, 10);

var val2 = valxx - 1;

var val3 = parseInt(calYear, 10);

var firstCalDay = new Date(val3,val2,1);

var val0 = firstCalDay.getDay();

startIndex = val0 + 1;

var dayCount = 1;

for (x =1; x < 38; x++){

var cell = document.getElementById('cell'+x);

if( x < startIndex){

cell.innerHTML = ' ';

cell.className = 'firstCell';

}

if( x >= startIndex){

cell.innerHTML = dayCount;

cell.className = 'filledCell';

for(p = 0; p < fillDate.length; p++){

if(dayCount == fillDate[p]){

if(fillDate[p].length == 1){

fillURL = '0'+fillDate[p];

}

else {

fillURL = fillDate[p];

}

cell.className = 'highlightCell';

cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';

}

}

if( dayCount > fill[valxx]){

cell.innerHTML = ' ';

cell.className = 'emptyCell';

}

dayCount++;

}

}

visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;

if(visTotal >35){

document.getElementById('lastRow').style.display = '';

}

}



function initCal(){

document.getElementById('blogger_calendar').style.display = 'block';

var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');

var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');

document.getElementById('bloggerCalendarList').style.display = 'none';

calHead = document.getElementById('bcHead');

tr = document.createElement('tr');

for(t = 0; t < 7; t++){

th = document.createElement('th');

th.abbr = headDays[t];

scope = 'col';

th.title = headDays[t];

th.innerHTML = headInitial[t];

tr.appendChild(th);

}

calHead.appendChild(tr);

for (x = 0; x <bcInit.length;x++){

var stripYear= bcInit[x].href.split('_')[0].split('/')[3];

var stripMonth = bcInit[x].href.split('_')[1];

bcList.push(stripMonth + ','+ stripYear + ',' + x);

bcNav.push(bcInit[x].href);

}

var sel = document.createElement('select');

sel.id = 'bcSelection';

sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};

q = 0;

for (r = 0; r <bcList.length; r++){

var selText = bcInit[r].innerHTML;

var selCount = bcCount[r].innerHTML.split('> (')[1];

var selValue = bcList[r];

sel.options[q] = new Option(selText + ' ('+selCount,selValue);

q++

}

document.getElementById('bcaption').appendChild(sel);

var m = bcList[0].split(',')[0];

var y = bcList[0].split(',')[1];

callArchive(m,y,'0');

}

function timezoneSet(root){

var feed = root.feed;

var updated = feed.updated.$t;

var id = feed.id.$t;

bcBlogId = id.split('blog-')[1];

upLength = updated.length;

if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}

else {timeOffset = updated.substring(upLength-6,upLength);}

timeOffset = encodeURIComponent(timeOffset);

}

//]]>

</script>

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

<!-- End Blogger Archive Calendar -->

[4]Guardamos los cambios y ya podremos ver la versión básica del calendario en nuestra sidebar.





[5] Para poder controlar el aspecto del calendario en "Fuentes y colores" hemos de añadir en la plantilla unas cuantas variables exclusivas del calendario.

(El sitio ideal para colocarlas es justo debajo o encima de las que ya bienen en nuestra plantilla y que están casi al comienzo de esta):

/* Calendario de Archivos Variables

=========================================

<Variable name="bcCalenderFonts" description="Calendar Font Sizes"

type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" / value="normal normal 100% Tahoma, Arial, Sans-serif">

<Variable name="bcTableBackgroundColor" description="Calendar Background Color"

type="color" default="#ffffff" value="#ffffff">

<Variable name="bcTableBorderColor" description="Calendar Border Color"

type="color" default="#000000" value="#000000">

<Variable name="bcTableTextColor" description="Calendar Text Color"

type="color" default="#000000" value="#000000">

<Variable name="bcMenuBackgroundColor" description="Calendar Menu Select Background Color"

type="color" default="#ffffff" value="#ffffff">

<Variable name="bcMenuTextColor" description="Calendar Menu Select Text Color"

type="color" default="#000000" value="#000000">

<Variable name="bcTableHeaderBackgroundColor" description="Calendar Header Background Color"

type="color" default="#ffffff" value="#ffffff">

<Variable name="bcTableHeaderTextColor" description="Calendar Header Text Color"

type="color" default="#000000" value="#000000">

<Variable name="bcTableHighLightColor" description="Calendar Highlight Color"

type="color" default="#cccccc" value="#cccccc">

<Variable name="bcCalenderLinksColor" description="Calendar Links Color"

type="color" default="#0000ff" value="#0000ff">

<Variable name="bcCalenderLinksHoverColor" description="Calendar Links Hover Color"

type="color" default="#0000ff" value="#0000ff">

<Variable name="bcTableFooterBackground" description="Calendar Footer Background Color"

type="color" default="#ffffff" value="#ffffff">

<Variable name="bcFooterLinksColor" description="Calendar Footer LinksColor"

type="color" default="#0000ff" value="#0000ff">

[6] Para terminar, añadimos unas líneas de CSS en la plantilla, por ejemplo, justo antes de ]]></b:skin>

/* Archive Calendar CSS

----------------------------------------------- */



/* div that holds calendar */

#blogger_calendar { margin:5px 0 0 0;width:98%;}



/* Table Caption - Holds the Archive Select Menu */

#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}



/* The Archive Select Menu */

#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}





/* The Heading Section */

table#bcalendar thead {}



/* Head Entries */

table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}



/* The calendar Table */

table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}



/* The Cells in the Calendar */

table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}



/* Links in Calendar */

table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}

table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}



/* First Row Empty Cells */

td.firstCell {visibility:visible;}



/* Cells that have a day in them */

td.filledCell {}



/* Cells that are empty, after the first row */

td.emptyCell {visibility:hidden;}



/* Cells with a Link Entry in them */

td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}



/* Table Footer Navigation */

table#bcNavigation {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}

table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}

td#bcFootPrev {width:10px;}

td#bcFootAll{text-align:center;}

td#bcFootNext {width:10px;}

ul#calendarUl {margin:5px auto 0!important;}

ul#calendarUl li a:link {}

ul#calendarUl li {

background:transparent url(http://img504.imageshack.us/img504/3452/stocknextpagesr5.png) no-repeat !important;

padding: 0 0 0 35px !important;

}

Guardamos los cambios y vemos como ha quedado el calendario:





[7] Si vamos ahora a "Fuentes y colores" en nuestro panel, veremos allí las nuevas opciones para cambiar el aspecto al calendario.

Tendremos en cuenta que en la vista desde "Fuentes y colores" no se verá el calendario completo, así que tendremos que ir guardando y comprobando algunos cambios desde la vista normal del blog.



Este es uno de los aspectos del calendario que conseguí en una de mis pruebas:





Ocultar las entradas que se despliegan debajo del calendario



En el código CSS que añadimos en el paso [6], localizamos esta línea:

ul#calendarUl {margin:5px auto 0!important;} y añadimos en ella un display:none;:

ul#calendarUl { display:none;margin:5px auto 0!important;}

Como es lógico, una vez ocultas las entradas ya no necesitaremos mostrar la imagen de carga ni el "Cargando...", así que en el paso [3] localizamos (casi al principio) estas líneas y las eliminamos:

var bcLoadingImage = "http://img182.imageshack.us/img182/7880/rotatingarrowuq0.gif";

var bcLoadingMessage = " Cargando....";

Nota:

Los que no quieran usar el calendario desde "Fuentes y colores" y prefieran usar uno de los modelos diseñados por phydeaux3, solo han de omitir el paso [5], es decir, ignorar la colocación de variables y en el paso [6] colocar uno de los códigos CSS proporcionados por phydeaux3.