Como colocar arquivo do Blog em forma de calendário




                Tornar o blog  mais atrativo visualmente é um aspecto imprescindível para que sua página chame atenção dos leitores, além do próprio conteúdo que claro é o mais importante, tornando-a mais fácil para manuseio e cômoda para a interação dos internautas.
                Ao modificar o arquivo do blog para um calendário, o acesso dos usuários aos posts antigos torna-se cada vez mais fácil, além de ser mais agradável visualmente, colaborando para o sucesso de sua página. Vamos ensinar a fazer essa mudança na plataforma Blogger.

1. Acesse o blog

                Entre com seu login e senha no Blogger.

2. Selecione o blog em sua lista de páginas

                Ao acessar sua conta, serão exibidos todos os blogs que você têm na sua conta, opte pelo blog no qual deve ser modificado o arquivo de postagens pelo calendário, clicando em cima de seu título para acessar maiores configurações.

3. Acesse o layout do blog

                Será possível visualizar um menu de opções localizado na lateral esquerda de sua página, com diversas opções de configurações e preferências que podem ser alteradas pelo administrador da página.
                A modificação do arquivo do blog, transformando-o em calendário, deverá ocorrer na opção “Layout”, acessando-a.

4. Adicione o gadget

                Há gadgets já prontos que permitem facilitar a alteração ou inserção de configurações pelo usuário, assim como o calendário para o acesso aos posts.
                A opção “Adicionar um gadget” poderá ser visualizada no canto direito da tela, logo acima dos possíveis gadgets que o blog já possui como preferências básicas ou até mesmo aqueles que o administrador já tenha adicionado.

5. Procure por “Arquivo do blog”

                Dentre os vários gadgets disponíveis para adicionar em seu blog, é possível visualizar a opção “Arquivo do blog”, lembrando que este adicional é somente o arquivo de todas as suas postagens, não estando, ainda, em forma de calendário, devendo modificá-lo nos passos posteriores.

6. Modifique as configurações

                Ao adicionar o gadget será possível visualizar uma tela para alterar as preferências deste adicional, devendo selecionar, como estilo, a opção lista simples; como frequência de arquivamento a opção mensal; e como formato da data a opção mês de janeiro (nome inteiro), clicando em salvar no final da página.
Veja como o arquivo deve ser configurado.


7. Acesse “Modelo” no menu

                Voltando ao menu de opções localizado no canto esquerdo de sua tela, deve ser selecionada a opção “Modelo” para modificar as configurações de HTML para transformar o arquivo em calendário, encontrando a linha, por meio do atalho Ctrl + F, procure por essa linha


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


Substitua  pelo código abaixo, veja na imagem o que você deve substituir.



8. Cole todo este código no lugar do código acima

            
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' 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 o seu calendário  
</b:includable> 
<b:includable id='interval' var='intervalData'> 
  Configure o seu calendário 
</b:includable> 
</b:widget>

9. Encontre a tag </head>



Ainda alterando o HTML de seu blog, é necessário encontrar a tag </head> para que, acima dela, seja inserido o Script (disponibilizado pelo site www.MyBloggerTricks.com) .


Copie todo o código abaixo e cole acima de </head> 




<!--Script Arquivo modelo calendário-->
<!-- Blogger Archive Calendar by  www.MyBloggerTricks.com -->
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "http://2.bp.blogspot.com/-yUGWz7Vrm0c/UKtPDwJpdSI/AAAAAAAAICU/9ZAvxQUZJLg/s400/loading-trans.gif.png";

var bcLoadingMessage = " Carregando...."; 
var bcArchiveNavText = "Veja Todos os Posts do Mês"; 
var bcArchiveNavPrev = '◄'; 
var bcArchiveNavNext = '►'; 
var headDays = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"]; 
var headInitial = ["Dom","Seg","Ter","Qua","Qui","Sex","Sab"]; 
// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();
//Initialize Fill 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){
// Check for Leap Years
  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 = 'Previous Archive';
      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 = 'Next Archive';
      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('li');
      li.style.listType = 'none';
      li.innerHTML = '<a href="'+link+'">'+title+'</a>';
      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>
<!-- End Blogger Archive Calendar by www.MyBloggerTricks.com  -->
<!--Fim Arquivo Calendário-->

10. Salve as alterações

                Ao realizar todos os passos acima, para não perder as alterações realizadas, deve-se salvá-las ao final da página do modelo do blog.

11. Escolha o modelo do calendário


              Escolha o seu modelo preferido, copie todo o código dele e cole acima de  ]]></b:skin> para finalizar a transformação do arquivo de seu blog.



Modelo 01 

O fundo é branco, está diferente na imagem.

Código do modelo 01


Caso queira mudar a cor de qualquer um dos modelos, é só editar color:#0080ff , troque o código da cor, veja o post Código HTML de Cores

/* Início Personalizar arquivo calendário by MBT (LIGHT Theme) ------ */
#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
/* The Heading Section */
table#bcalendar thead {}
/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}
/* The calendar Table */
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}
/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
/* First Row Empty Cells */
td.firstCell {visibility:visible;}
/* Cells that have a day in them */
td.filledCell {  background:#fff;}
td.filledCell:hover {  background:#dddddd;}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
/* Table Footer Navigation */
table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#0080ff}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
/* Início Personalizar arquivo calendárior by MBT (LIGHT Theme) ------ */








Modelo 02

Fundo branco


Código do modelo 02



/* Início Personalizar arquivo calendário-- */
/*---Archive Calendar CSS 3---*/
#calendarDisplay { display: none }
/* div that holds calendar */
#blogger_calendar {
    margin: 5px 0 0 0;
    width: 100%;
}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {
    border: 1px solid #F2BBD6;
    padding: 2px;
    margin: 10px 0 0;
    background: #F2BBD6;
    /*font: normal normal 13px Calibri*/;
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 12px;
    font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
    background: #F2BBD6;
    border: 0 solid #F2BBD6;
    color: #725c67;
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
/* The Heading Section */
table#bcalendar thead { }
/* Head Entries */
table#bcalendar thead tr th {
    width: 20px;
    text-align: center;
    padding: 2px;
    border: 1px solid #F2BBD6;
    /*font: normal normal 13px Calibri;*/
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 13px;
    font-weight: normal;
    background: #DB428C;
    color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
    border: 1px solid #F2BBD6;
    border-top: 0;
    margin: 0px 0 0px;
    width: 100%;
    background: #ffffff;
}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {
    text-align: center;
    padding: 2px;
    border: 1px solid #F2BBD6;
    color: #725c67;
    font-family: 'Century Gothic', Arial, Georgia;
    font-size: 12px;
    font-weight: normal;
    /*font: normal normal 13px Calibri;*/;
}
/* Links in Calendar */
table#bcalendar tbody tr td a:link,
table#bcalendar tbody tr td a:visited,
table#bcalendar tbody tr td a:active {
    font-weight: bold;
    color: #725c67;
}
table#bcalendar tbody tr td a:hover {
    color: #DB428C;
    background: #eaeaea;
    display: block;
}
/* First Row Empty Cells */
td.firstCell { visibility: visible }
/* Cells that have a day in them */
td.filledCell { }
/* Cells that are empty, after the first row */
td.emptyCell { visibility: hidden }
/* Cells with a Link Entry in them */
td.highlightCell {
    background: #FFCF6A;
    border: 1px solid #F2BBD6;
}
/* Table Footer Navigation */
table#bcNavigation {
    width: 100%;
    background: #F2BBD6;
    border: 1px solid #F2BBD6;
    border-top: 0;
    color: #725c67;
    font: normal normal 13px Calibri;
}
table#bcNavigation a:link {
    text-decoration: none;
    color: #725c67;
}
td#bcFootPrev { width: 10px }
td#bcFootAll { text-align: center }
td#bcFootNext { width: 10px }
ul#calendarUl {
    margin: 5px auto 0!important;
    border-bottom: 1px dotted #F2BBD6;
}
ul#calendarUl li a:link { border-bottom: 1px dotted #F2BBD6 }
/* Início Personalizar arquivo calendário-- */


Modelo 03

Código do Modelo 03


/* Início modelo arquivo calendário-- */

#blogger_calendar {

margin:5px 0 0 0;

width:100%;}

#bcaption {

border:1px solid #000;

padding:2px;

margin:10px 0 0;

background:#1F1FFF;}

#bcaption select {

border:0px;

background:#1F1FFF;

color:#fff;

font-weight:bold;}

table#bcalendar thead {

background:#000;  /* Cor de fundo Cabeçalho:Mês */

}

table#bcalendar thead tr th {  /* Entradas */

width:20px;text-align:center;

padding:2px; border:1px solid #000;

font-family:Tahoma;

font-weight:bold;color:#fff;}

table#bcalendar {

border:1px solid #000;

border-top:0; margin:0px 0 0px;

width:95%;

background:#fff;}

table#bcalendar tbody tr td { /* Células do calendario */

text-align:center;

padding:2px;

border:1px solid #000;

color:#1F1FFF;}

table#bcalendar tbody tr td a {  /* links do calendario */

font-weight:bold;

color:#000;}

td.firstCell {visibility: visible;}

td.filledCell {background: #fff;}
td.emptyCell {visibility: hidden;}
td.highlightCell {  /* células ativas */

background:#ddd;

border:1px outset #000}

/* Table Footer Navigation */

table#bcNavigation  {

width:95%;

background:#1F1FFF;

border:1px solid #000;

border-top:0;

}

table#bcNavigation a {

ext-decoration:none;

color:#fff;

}

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

/* Fim modelo arquivo calendário-- */

4 comentários