Post on 11-Apr-2015
Creación de un sitio web personal (Weblog II)Universidad Permanente
Convertir el archivo del blog en un calendario
Seguir los siguientes pasos:
[1] Añadimos un nuevo elemento de página desde "Diseño Añadir un gadget Archivo del Blog" en nuestra barra lateral, que ha de tener este formato:
[2] Localizamos ahora en la parte de "Diseño Edición HTML", sin expandir artilugios, la línea de código correspondiente al gadget 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>
- Página 1 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
</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
- Página 2 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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
- Página 3 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
</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 = '◄';var bcArchiveNavNext = '►';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 Arrayvar 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');
- Página 4 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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 Yearsif (((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;};
- Página 5 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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 Yearsif (((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';
- Página 6 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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]){
- Página 7 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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];
- Página 8 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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&alt=json-in-script&callback=timezoneSet'/><!-- End Blogger Archive Calendar -->
- Página 9 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
[4]Guardamos los cambios y ya podremos ver la versión básica del calendario en nuestra barra lateral.
[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 vienen en nuestra plantilla y que están casi al comienzo de ésta, buscar el código “<Variable name=” en Diseño Edición de HTML y colocar el código siguiente encima:
/* 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"
- Página 10 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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">===========================================Fin de Archivo Calendario Variables */
[6] Para terminar, añadimos unas líneas de CSS en la plantilla (Diseño Edición de HTML), 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 */
- Página 11 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
#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 */
- Página 12 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
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.
- Página 13 -
Creación de un sitio web personal (Weblog II)Universidad Permanente
OpcionalOcultar 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 la reemplazamos por el siguiente código
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....";
- Página 14 -