Il fantastico widget dell'archivio con il calendario per i blog su Blogger.

Widget del Calendario con Archivio

Questo widget è frutto della capacità di Phideaux3 che è anche l'autore del gadget della label-cloud che vedete in questo blog.


Prima di passare all'illustrazione di come inserirlo vi prego di andare nel blog Pagine Navigazione in cui l'ho inserito.


Si tratta di un blog di test con pochi post quindi cercate di immaginare come potrebbe essere nel vostro che sarà certamente più denso



                   

    

  



Il widget di Phideaux3 era ovviamente in inglese ma, come vedete, sono riuscito a tradurlo in italiano. Il titolo  "Archivio del Blog" può essere modificato e reso grande quanto si vuole perché avrà lo stesso aspetto dei titoli degli altri widget che avete nelle sidebar.

1. Nel menù a tendina può essere selezionato un mese dell'archivio.
2. Accanto a ogni mese sarà presente il numero dei post pubblicati.
3. I giorni in cui sono stati pubblicati gli articoli saranno evidenziati.
4. Se si punta con il mouse un qualunque giorno del mese si visualizzeranno i titoli dei post che si sono pubblicati in quella data.
5. Esistono cinque layout del widget con colori chiari e con colori scuri per tutte le esigenze
6. Se si clicca su un giorno del mese veniamo indirizzati in una pagina con tutti gli articoli pubblicati quel giorno
7. Andando sulle frecce direzionali in Scorri Archivio si può passare al mese precedente o quello successivo
8. Sotto al widget saranno elencati tutti gli articoli pubblicati nel mese visualizzato
9. Quando si passa da un mese a un altro si vedrà una immagine animata con la scritta "Sto caricando" 
10. Questo widget è la versione per Blogger di un plugin di Wordpress

Per procedere con l'installazione andate su Layout > Modifica HTML, salvate il modello completo e non espandete i modelli widget. Cercate la seguente linea di codice

<b:widget id='BlogArchive1' locked='false' title='Archivio Blog' type='BlogArchive'/>

Può essere che al posto di BlogArchive1 ci sia un altro numero in ogni caso la linea è facile da visualizzare. Cancellatela e sostituitela con quest'altro codice

<b:widget id='BlogArchive1' locked='false' title='Archivio Blog' 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>

dove il titolo del widget "Archivio blog" può essere sostituito con un altro. Adesso cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!-- Inizio Calendario Archivio Blog -->
/* Incollare il CSS prescelto */
<script src='http://sites.google.com/site/ideepercomputeredinternet/calendario/blogger_archive.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>
<!-- Fine Calendario Archivio Blog -->

Per quanto riguarda la riga evidenziata di rosso serve per incollare il CSS (foglio di stile) che preferite tra quelli che vi metterò a disposizione e che darà l'aspetto definitivo all'archivio con calendario. Salvate il modello.
Adesso andate in Layout > Elementi pagina

e cliccate su Modifica nell'elemento "Archivio del Blog". Dovete mettere il segno di spunta a Elenco compresso in Stile e a Mensile in Frequenza archiviazione, se volete potete modificare il Titolo del gadget. Cliccate su Salva per terminare.
Phideax3 ha configurato quattro diversi modelli per il widget dell'archivio con calendario. Date uno sguardo alla pagina e scegliete quello che vi piace di più appuntandovi il nome. Di seguito riporto i codici per ciascun modello
Blue Black

<link href='http://sites.google.com/site/ideepercomputeredinternet/calendario/blue_black.css' rel='stylesheet' type='text/css'/>

Dark Theme

<link href='http://sites.google.com/site/ideepercomputeredinternet/calendario/dark_theme.css' rel='stylesheet' type='text/css'/>

Dusty Blue

<link href='http://sites.google.com/site/ideepercomputeredinternet/calendario/dusty_blue.css' rel='stylesheet' type='text/css'/>

Plain White

<link href='http://sites.google.com/site/ideepercomputeredinternet/calendario/plain_white.css' rel='stylesheet' type='text/css'/>

Andate nuovamente su Layout > Modifca HTML. Copiate il codice del foglio di stile che preferite e sostituitelo alla riga

/* Incollare il CSS prescelto */

presente nel blocco di codice inserito sopra al tag </head>, come mostrato in questo screenshot

Nel blog di cui il link all'inizio dell'articolo ho inserito quello Blue Black. Abbiamo finito e non resta che salvare il modello per l'ultima volta. Credo invece che sia la prima volta che questo widget per Blogger sia stato presentato da un blog italiano, tradotto nella nostra lingua. E' indubbiamente un modo molto originale di presentare l'archivio ai visitatori del blog.
Aggiornamento: Ho aggiunto un file CSS con i colori di questo blog che ho chiamato blue-red. Se volete scegliere quell'aspetto ecco il codice da inserire con le modalità appena descritte
Blue Red

<link href='http://sites.google.com/site/ideepercomputeredinternet/calendario/blue_red.css' rel='stylesheet' type='text/css'/>