Widget de Arquivo em forma de Calendário

Podemos escolher entre 3 estilos de apresentação para o Widget de Arquivos do Blogger: hierarquia, lista simples e menu suspenso. Phydeaux3 desenvolveu mais uma opção uns dois anos atrás, que vocês já devem ter visto em alguns blogs - um widget em formato de calendário.

Esse widget ganha mais em beleza do que em funcionalidade. Em minha opinião, o único estilo realmente funcional do widget de arquivos infelizmente é o menos bonito - o de hierarquia.

A) Instalando o JavaScript

Se preferir colocar diretamente o código no template, abra o arquivo do link abaixo, copie o conteúdo e cole acima da tag </head> :


Se preferir hospedar o JS, baixe o arquivo do link:



Depois do script, coloque a chamada para a biblioteca JSON:

<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

B) Alterando o código do Widget do Blogger

Substitua todo o código do seu widget de arquivo, pelo código a seguir:

<b:widget id='BlogArchive1' locked='true' title='Arquivo' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='interval' var='intervalData'> 
</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>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='menu' var='data'>  
</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 + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>  
</div>
</b:includable>
</b:widget>

C) Configurar o widget para lista simples

O Widget só funciona se configurado como "lista simples". Altere em seu painel de layout:

D) CSS - Sugestões para os estilos

O Widget transformou-se em uma tabela. Abaixo deixo uma sugestão de estilos, mas na realidade não há muito o que alterar além das cores, já que as medidas principais estão em percentagem e se adaptarão à sua sidebar (ou footer, se preferir).

/* Calendar Archive Widget */
#sidebar .BlogArchive h2 { 
display: none; }

#blogger_calendar {
margin: 5px 0 20px 8px; 
padding: 3px;
background: #FFF; 
width: 100%;}

#bcaption {
border: 1px outset #000;
background: #f2f2f2;
padding: 2px;
margin: 10px 0 0; }

#bcaption select {
background: #DE0505;
color: #fff;
font-weight: bold;
border: 0 solid #CCD9FF;
text-align: center; }

table#bcalendar thead { 
background: #666666; 
color: #ffffff; }

table#bcalendar thead tr th {
width: 25px;
text-align: center;
padding: 2px; 
border: 1px inset #000; 
font-family: Tahoma; 
font-weight: normal; }

table#bcalendar {
border: 1px solid #000;
border-top: 0; 
margin: 0px 0 0px;
width: 95%; }

table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px outset #000; }

table#bcalendar tbody tr td a {
font-weight: bold; 
color: #FFFFFF; }

td.firstCell { 
visibility: visible; }

td.filledCell { 
background: #fff; }

td.emptyCell { 
visibility: hidden; }

td.highlightCell {
background: #DE0505;
border: 1px outset #000!important; }

table#bcNavigation  {
width: 95%;
background: #DE0505;
border: 1px inset #000;
border-top: 0;
color: #fff; }

table#bcNavigation a {
color: #FFFFFF; 
text-decoration: none; }

td#bcFootPrev { 
width: 10px; }

td#bcFootAll { 
text-align: center; }

td#bcFootNext { 
width: 10px; }

ul#calendarUl { 
margin: 5px auto 0!important; }

ul#calendarUl li a { 
color: #333333; }

ul#calendarUl li {
background:transparent url(http://lh3.ggpht.com/_j4fpzU2AasM/SjZo_NMYNXI/AAAAAAAAAsg/iCaabuOWvrU/page.png)  no-repeat !important;
padding: 0 0 0 35px !important;
font-size: 110%;
margin: 3px 0 0 0; }