Archivio del nostro bloger in calendario

Eccomi con un altro carinissimo tutorial per il nostro blog con piattaforma blogger. La cosa straordinaria di questo script è che mostra gli ultimi posts inseriti sotto il nostro calendario, e tramite un menu a tendina è posibile scegliere il mese e visualizzare i posts.



1 passo come sempre scaricare e salvare una copia del templete.
2 espandi widget.
3 trovate la parte di codice con itasti mela+f, qui sotto:






4 Copia il seguente codice, quindi evidenziare l'archivio gadget come illustrato e sostituirlo con un copia e incolla.
<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>

5 Ora prima del tag di chiusura /head copiate e incolate il seguente codice

<!-- Blogger Archive Calendar -->


<script type='text/javascript'>


//<![CDATA[





var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";


var bcLoadingMessage = " Loading....";


var bcArchiveNavText = "View Archive";


var bcArchiveNavPrev = '&#9668;';


var bcArchiveNavNext = '&#9658;';


var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];


var headInitial = ["Su","Mo","Tu","We","Th","Fr","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 = 'Previous Archive';


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 = 'Next Archive';


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


<!-- End Blogger Archive Calendar -->

Ora salvate il tutto e dovrebe funzionare.

6 Ora andate nel widget dell' archivio settate le opzioni come nell' immagine

Salvate e date un occhio
Se ci sono errori fatemi sapere.
BY phydeaux

Nel prossimo posts vi riporto gli stili se vi interessa è alla fine dell'articolo originale.