Calendário para mostra as postagens

Tumblr_llbsvra8nk1qbgl0wo1_500_large
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

9 comentários:

  1. Queeeee blog lindo,estou super seguindo e te convido para uma visita em meu blog, se gostar segue? beijos
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  2. Seu blog é incrivelmente lindo e fofíssimo! Já sigo, beijos...
    http://wronggirl-ann.blogspot.com

    ResponderExcluir
  3. Amei Ameei Aqui é muuito lindo perfeeito
    as suas postageens sao lindas dmaais S2
    seguindo segue de volta ?
    http://portaldisturbiablogger.blogspot.com/

    ResponderExcluir
  4. Comessei a olhar este blog deste ontem
    e comessei a ver hoje como as postagens
    são perfeitras e elaboradas ! ADORREI
    Seu Blog e ja estou seguindo : http://yousit.blogspot.com/
    Espero que retribua :)

    ResponderExcluir
  5. Oiie lembra do tutorial que pediu la no Portal disturbia (como colocar o titulo do blog em movimento ) entao ja posteei e so visitar la espéro que seja util e comente bjs
    http://portaldisturbiablogger.blogspot.com/

    ResponderExcluir
  6. Acho que ficaria bem legal. Só que o meu é aquele "suspenso" , beijos e seu blog é bem legal (:


    http://garotasereticencias.blogspot.com

    ResponderExcluir
  7. Seu favicon e seu cursor ficaram prontos, veja em otfencomendas.blogspot.com!

    ResponderExcluir
  8. @Danielle (http://onthefame.blogspot.com)Obrigadinha Flor, ficou tudo muito lindo parabéns.

    ResponderExcluir