Calendário para mostra as postagens

Oláá , minhas Xuxus , cozidas com ketchup e mostarda Nojo. Joinháá ? 

Bom , hoje venho com um tuto , muito bacana , eu aprendi ele no blog Loumetec , fiz o tutorial teste , e quem quiser fazer, aqui esta um modelo. Querem fazer ? Para isso faça um copia do seu modelo, antes de começar editar. Agora adicione um widget "Arquivo do Blog", não faça alterações e salve, como mostra a imagem abaixo: "Continue a ler, para ver"

As feeds do seu blog também precisam estar ativadas para o calendário funcionar. Então vá até  Blogger > Painel > Configurações > Site Feed >  Deixe como na imagem abaixo:

Salve as configurações. Agora, vá em Design > Editar HTML. Aperte Ctlf+F e procure pelo código a seguir:

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

Selecione e substitua ele pelo código abaixo: 

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

Visualize e no lugar dos arquivos do blog aparecerá uma mensagem como esta:

Não, salve, pois ainda utilizaremos o Html do blogger. Aperte Ctrl+F , e procure pelo código </head>  acima dele cole este:

<!-- Início do código do calendário - por Atitude Zeroo -->

  <script type='text/javascript'>

  //<![CDATA[

  var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXsWraqk0A7pzcKq6w_sfuWaIHryjdjpMUP0y9UFQ42FVJyX5Wqa2GC5cuW0sEU0i_GKY0lQCX5L7QYn9WE1RTuUfcRFzImXfGjEJYm8BiJQlR1pJD1v0OYCmp12kXkAOZvleSrB-PPYwI/";

  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 - por Atitude Zeroo -->

Visualize, e veja se ocorreu alguma modificação, agora veja que no lugar do Arquivo do blog, continuo a aparecer a mensagem: 

Não se preocupe isto, é uma configuração onde mostra que o tutorial esta realmente dando certo. Agora Salve. Volte para a pagina "elementos da página" Abra o elemento "Arquivos do Blog". Marque as opções deixando como mostra a imagem:

Salve, pronto , agora você já tem o gadster em forma de calendario. Agora se ocorrer erro, delete o html do seu blog e cole o que você tinha salvo no inicio do post, ok ?? 

Bom, gente, fico muito grata com o ultimo post, pois recebir muitos comentarios, bom. Queria avisar que o tutorial, será feito aqui no blog. Então muitos beijinhos e bay , bay !   ;3