Este gadget o widget lo vi trabajando en una página web y me sentí muy atraído por la forma en que se presenta, me di a la tarea de buscarlo y lo encontré en uno de los blog que sigo (Vagabundia) pero no me gustaba completamente porque se mostraba todos los archivos del mes seleccionado entonces hice un pequeño cambio del código para que solo se muestre la lista de entradas si el usuario lo desea.
El archivo estilo calendario me parece importante para ver la actividad mensual del blog, saber que días se hacen las publicaciones y resumir la información.
Para aplicarlo añadimos el Gadget Archivo del Blog y lo dejamos configurado como se muestra a continuación.
En Diseño, Edición de Html expandimos artilugios, descargamos la plantilla completa para respaldar nuestro tema y justo antes del </head> pegamos lo siguiente
<style type='text/css'>
#blogger_calendar {
margin: 0 auto; /* es el bloque donde lo mostraremos */
width: 190px; /* centrado */ /* el ancho */ }
#bcaption {
height: 20px; /* el rectángulo
superior con los meses */
text-align: center; }
#bcaption select {
border: 1px solid #484848; /* este es el selector de los meses */
font-size: 11px;
padding: 0 0 0 10px;
width: 100%; }
table#bcalendar thead tr th {
background: /* cada
una de las celdas con los nombres de los dias de la semana */
#484848;
border: 1px solid #567;
color: #EEE;
font-size: 11px;
font-weight:
bold;
padding: 2px;
text-align: center;
width: 20px; }
table#bcalendar
tbody tr td {
background: #C8C8C8; /* cada celda con el número del dia */
border: 1px solid #789;
text-align: center;
padding: 2px;
-moz-border-radius:
2px; }
td.highlightCell {
background-color: /* las celdas donde hay entradas */
#EBEBEB !important; }
table#bcalendar tbody tr td a {
color: #000; /* el enlace de esas
celdas */
font-weight: bold; }
td.firstCell { visibility: hidden; /* las celdas
vacias del inicio */ /* podemos hacerlas visibles usando
visible */ }
td.emptyCell {
visibility: /* las celdas vacias del final */
hidden; /* podemos hacerlas visibles usando visible */ }
td.filledCell { background: #FFF; }
/* el color de esas celdas vacias si es que están visibles
*/
table#bcNavigation {
color: /* es la barra de navegación inferior */
#fff;
background-color: #484848;
border: 1px solid #234;
margin: 5px 0
0 0;
padding: 0 ;
text-align: center;
width: 190px; }
table#bcNavigation
a { color: #fff; }
/* 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 */
td#bcFootAll { vertical-align: middle; }
/*el enlace del mes*/
.listhidden { display: none; }
.listshown { display: inline; }
#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 {
color: #000; /* cada item de la lista
es un enlace */
display: block;
font-size: 11px;
padding-left: 15px; }
</style><script type='text/javascript'>
//<![CDATA[
var bcLoadingMessage = " Cargando....";
var bcArchiveNavText = "Navegación";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sábado"];
var headInitial = ["D", "L", "M", "M", "J", "V", "S"];
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array();
var bcList = new 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');
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth, yr, nav) {
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 = '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 = '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) {
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];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].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);
}
function togglecomments(postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className == "listshown") {
whichpost.className = "listhidden";
} else {
whichpost.className = "listshown";
}
}
//]]>
</script>
<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'
/>
Luego buscamos en la plantilla el gadget de Archivo del blog<b:widget id='BlogArchive1' locked='false' title='XXXXXXX' type='BlogArchive'> ....... </b:widget>Borramos todo lo que este entre el Abre y Cierra widget, lo que sería los puntos suspensivos y pegamos este código
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</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: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'/>
<!-- 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 id='bcFootAll'/>
<td id='bcFootNext'/>
</tr></table>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<a href='javascript:togglecomments("calendarDisplay")' title='Click para mostrar'>+/- Ver artículos de este mes</a>
<div class='listhidden' id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</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='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 + "_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>
Se guardan los cambios y probamos el resultado, el calendario se cambia de colores aplicando los estilos que queramos.
0 comentarios :
Publicar un comentario