Archivio del nostro bloger in calendario

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.

Share This

12 commenti:

  1. ciao, sono molto interessata a questa applicazione, ma da ignorante quale sono ho riscontrato dei dubbi...
    non ho capito dove devo incollare il secondo codice, non puoi essere più chiaro?....e nn vedo l'ora di vedere gli altri stili

    RispondiElimina
  2. si ma il problema è che io sono molto ignorantella in materia...nn ho capito dove sta qst tag ma ora ci riprovo...grazie

    RispondiElimina
  3. allora il tag se vedi il codice html del tuo blog lo trovi subito all' inizio, precisamente se conti le righe all'ottava trovi il tag di apertura head, racchiuso tra due tag cosi <> e al centro dei due tag c'è scritto head, lo vedi subito.
    fammi sapere ciauu

    RispondiElimina
  4. Che bello il tuo blog, mi faccio un giro, ho idea che troverò qualcosa di interessante....sto imparando a districarmi da molto lontano con l'html e ho ancora paura di fare casino...

    RispondiElimina
  5. bene bene capo, ci sono riuscita...solo un'ultima cosa: come mai l'effetto grafico è diverso dal tuo? cioè,non si vede la schermata tip calendario, ma sol l'elenco dei mesi...da un'occhiata come è venuto.

    PS: scusa l'insistenza...

    RispondiElimina
  6. capo ci sono riuscita...piccolo problema finale, perchè la grafica nn è cm la tua?...cioè, nn ha un effetto calendario....guarda!

    RispondiElimina
  7. llora se nn ti ha dato errori brava ci sei riuscita ora torna nella sezione html e appena trovi questo codice body {
    background:#ccc;
    margin:0;
    text-align:center;
    line-height: 1.5em;
    font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
    color:$mainTextColor;
    font-size/* */:/**/small;
    font-size: /**/small;
    }

    subito dopo o subito prima gli incolli il codice che trovi qui http://antp.altervista.org/stilecalendario
    fammi sapere ciauu

    RispondiElimina
  8. credo di aver trovato il problema...il template del mio blog non è del tutto personalizzabile, ha dei blocchi diciamo così, infatti ho notato che pur avendo salvato le modifiche apportate quando sn andata a rivedere l'html ho notato che era tutto come prima, cm se nn avessi apportato alcuna modifica...alcuni li ho già aggirati, per altri ci sto già lavorando...grazie cmq per la tua infinita pazienza..appena risolvo ti faccio sapere...grazie ancora

    RispondiElimina
  9. pensa che ho aggiunto una seconda barra laterale a molti blog...ma a qst proprio non ci riesco...esce tutto sballato...mi sta esaurendo..ma a qst grafica nn ci rinuncio

    RispondiElimina
  10. mi sembra molto srano prova a rifare il tutto, e salvando direttamente alla fine, e poi ricorda di andare a cambiare l'impostazione da moduli archivio mi sono spiegato? riprova e fai i tre passaggi salvando una sola volta, anzi per esse re piu sicura impostati l'elemento archivio come riportato in figura, e poi inserisci i tre pezzi di codice, ok? sempre a disposizione a presto

    RispondiElimina
  11. nn preoccuparti, con calma riprova che c'è la farai sicuro una volta che ci predni la mano è fatta. tienimi informato un saluto

    RispondiElimina
  12. Interessante, lo tengo buono per provare quando rifarò la veste grafica del blog.
    Se dici che sei d'accordo ti aggiungo tra i preferiti.

    P.S. Ma bloger non è con 2 g e posibile con 2 s?
    P.S.2. Anche io faccio spesso errori. Te lo dico perchè mi fa piacere se qualcuno me li fa notare.

    RispondiElimina

Seguici su

Google+ Followers

Lettori fissi

Designed By Blogger Templates