Archivo Del Blog Personalizado

• ()

						Creación de un sitio web personal (Weblog II) Universidad Permanente id='cell7'>

<script type='text/javascript'> initCal(); Configure your calendar archive widget - Edit archive widget - Flat List Newest first - Choose any Month/Year Format 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



[3] Colocamos ahora el script para el calendario justo antes del de nuestra plantilla: <script type='text/javascript'> //
- Página 4 -

Creación de un sitio web personal (Weblog II) Universidad Permanente

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); - Página 5 -

Creación de un sitio web personal (Weblog II) Universidad Permanente

} 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?publishedmax='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeO ffset+'&published-min='+calYear+'-'+callmth+'-01T00% 3A00%3A00'+timeOffset+'&maxresults=100&orderby=published&alt=json-inscript&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'; - 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 = ''+title+''; 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 = ''+dayCount+''; } } 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 (')[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 src='/feeds/posts/summary?max-results=0&alt=json-inscript&callback=timezoneSet'/> - 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 “
- Página 10 -

Creación de un sitio web personal (Weblog II) Universidad Permanente

type="color" default="#ffffff" value="#ffffff"> =========================================== 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 ]]> /* 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;fontweight: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;colo r:$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 {fontweight: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;bordertop:0;color:$bcTableTextColor;font:$bcCalenderFonts;} table#bcNavigation a:link {textdecoration: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) norepeat !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

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