Calendário de postagens para blogger

	Tweet
segunda-feira, 24 de janeiro de 2011		Link:

Publicidade Google

Já fazia um bom tempo que eu estava querendo um calendário para por no meu blog. Apesar de existirem vários por aí nenhum me agradava. Isso porque o que eu queria não era somente  um calendário para mostrar a data e sim para mostrar a data em que foram feitas postagens. Ao ajudar outro amigo blogueiro, saí da inércia e acabei achando um código na internet. Fiz algumas alterações para ficar do jeito que eu queria e agora eu mostro para você como colocar no seu blog também.

Blogueiro

Para começar faça logon na sua conta no blogger. Como vamos mexer na parte de edição de HTML faça também um backup do seu template baixando o modelo completo. Isso é para que se algo dê errado você tenha como reverter a situação.

Agora, se você ainda não adicionou um gadget de "Arquivo do Blog", adicione porque esse código do calendário na verdade é uma modificação desse gadget e por isso ele é necessário.

Agora volte a parte de edição de HTML e sem marcar a caixa de expandir modelos de widgets, pressione as teclas "CTRL+F", digite "BlogArchive" na caixa de pesquisa e procure por um trecho como o mostrado na imagem abaixo.

Você deverá substituir a linha de código:

<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>

Pelo seguinte código:

<b:widget id='BlogArchive1' locked='false' title='Arquivo do 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'>
</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 align='center' id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<thead id='bcHead'></thead>
<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>
<div style='float:right;padding:0px 5px 0px 5px;'><a href='http://lomeutec.blogspot.com/2011/01/calendario-de-postagens-para-blogger.html' title='Obter Gadget!' target='_blank'><small>(?)</small></a></div>
<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'>
</b:includable>
<b:includable id='menu' var='data'>
Após inserir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.
</b:includable>
<b:includable id='interval' var='intervalData'>
Após inserir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.
</b:includable>
</b:widget>

Eu sei que parece estranho substituir uma linha de código por tantas outras, mas é assim mesmo. Foi por isso que eu disse que não podia expandir modelos de widgets, pois na verdade o gadget original também possui várias linhas, mas quando não expandimos os modelos de widgets todas as linhas do código do gadget ficam representadas por somente uma linha de código. Muito mais fácil de fazer a substituição.

Visualize a página para ver se não vai ocorrer nenhum erro. Se ocorrer erro é porque você pode ter se enganado na substituição do código. Aí é só tentar de novo.

No lugar do gadget deverá aparecer a seguinte mensagem:

Após inseir a segunda parte do código configure seu gadget de arquivo do blog como lista simples.

Isso significa que você fez tudo certo, vamos então inserir a segunda parte do código.

Mais uma vez pressione "CRTL+F" para abrir a caixa de pesquisa do seu navegador caso precise e nela digite:

</head>

Depois de encontrá-la coloque acima dela o seguinte código:

<!-- Início do código do calendário - Modificado por Lomeutec -->

  <script type='text/javascript'>

  //<![CDATA[

  var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-6k1aWIZDw2ag2kgCeXXTaVBxXjWjm2lLgE-Xvaoq_VUbEOZoh-X3Og7yC7zkReHSZkG0Pkds70sllyg7BK2NLxShHENlVDj2d91i1h2KtH9O099DVuKyzsy2bj1I6MgKr8NfwXnYPDCn/";

  var bcLoadingMessage = " Atualizando....";

  var bcArchiveNavText = "Ver arquivo";

  var bcArchiveNavPrev = '&#9668;';

  var bcArchiveNavNext = '&#9658;';

  var headDays = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"];

  var headInitial = ["Do","Se","Te","Qu","Qt","Se","Sa"];

  // Nada para configurar a partir deste ponto ----------------------------------

  var timeOffset;

  var bcBlogID;

  var calMonth;

  var calDay = 1;

  var calYear;

  var startIndex;

  var callmth;

  var bcNav = new Array ();

  var bcList = new Array ();

//Preenchendo 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){

  // Checando por anos bissextos

  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 = 'seguinte';

  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];

  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('ul');

  li.style.listType = 'none';

  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>

  <!-- Fim do código do calendário - Modificado por Lomeutec -->

Ficando parecido com a imagem abaixo:

Agora tente visualizar o template para ver se não ocorre nenhum erro. Se aparecer alguma mensagem de erro tente outra vez.

Ainda continuará aparecendo uma mensagem no lugar do gadget. Isso é assim mesmo, nós vamos corrigir isso agora. Vá até "Elementos da página" e clique no botão "Editar" do gadget. Você deverá configurá-lo como "Lista simples".

Agora ele já deve estar funcionando.

Bom, como eu já disse esse código não é invenção minha. Eu apenas modifiquei um pequeno trecho dele para ficar do meu gosto. Se você quer o código original pode pegá-lo no link:

http://ricardouk.no.sapo.pt/widgets/calendario_arquivo.html

As mudanças visíveis que eu fiz estão somente na segunda parte do código.

ATUALIZAÇÃO 06/03/2011.

O código foi atualizado e agora o calendário ficará centralizado.

É isso aí, até a próxima!