Blogger: Arquivo do blog em calendário | Follow your dreams
Blogosfera

Blogger: Arquivo do blog em calendário

Oi pessoal, como estão?

Quando eu usava o Blogger/Blogspot odiava o modelo daquele “arquivo do blog”, pois além de pouco útil, o achava muito sem graça. Até que encontrei esse modelinho e achei tão fofo, que acho até que pode se tornar útil, pois a navegação nele é bem mais fácil do que aquele modelo padrão. Personalizei e trouxe pra vocês o passo-a-passo Coracao.

Blogger-Arquivo-do-blog-em-calendario#1

  • 1 – Vá em LAYOUT e adicione um novo gadget de “Arquivo do blog”. Configure-o dessa forma:

Blogger-Arquivo-do-blog-em-calendario#2

 

  • 2 – Agora vá em MODELO e pesquise por ]]></b:skin>. ACIMA dessa linha, cole o código:

/* Arquivo do blog em calendário por Phydeaux3 – Modificado por Follow your dreams
———————————————–*/
#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 #f8f8f8;
padding: 2px;
margin: 10px 0 0;
background: #f8f8f8;
font-family: Arial;
font-size: 13px;
font-weight: normal;
}
/* The Archive Select Menu */
#bcaption select {
background: #f8f8f8;
border: 0 solid #f8f8f8;
color: #000000;
font-family: Arial, Georgia;
font-size: 14px;
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: 0px;
font: normal normal 13px Arial;
font-weight: normal;
background: #e59cb3;
color: #ffffff;
}
/* The calendar Table */
table#bcalendar {
border: 1px solid #f8f8f8;
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 #f8f8f8;
color: #7f7f7f;
font-family: Arial, Georgia;
font-size: 14px;
}
/* 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: #7992b8;
}
table#bcalendar tbody tr td a:hover {
color: #e59cb3;
}
/* 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: #f0f4f8;
border: 1px solid #ebebeb;
}
/* Table Footer Navigation */
table#bcNavigation {
width: 100%;
background: #ebebeb;
border: 1px solid #ebebeb;
border-top: 0;
color: #7f7f7f;
font: normal normal 13px;
}
table#bcNavigation a:link {
text-decoration: none;
color: #7f7f7f;
}
td#bcFootPrev { width: 10px }
td#bcFootAll { text-align: center }
td#bcFootNext { width: 10px }
ul#calendarUl {
margin: 5px auto 0!important;
border-bottom: 1px dotted #e59cb3;
}
ul#calendarUl li a:link {
border-bottom: 1px dotted #e59cb3;
}

Se desejar modificar as cores, as utilizadas foram:
Rosa #e59cb3
Azul claro #f0f4f8
Azul escuro #7992b8

 

  • 3 – Agora pesquise por </head> e ACIMA dessa linha cole o código:

<!–Script Archive Calendar–>
<script type=’text/javascript’>
//<![CDATA[
// <!— Blogger Archive Widget —>
var bcLoadingImage = “https://lh3.googleusercontent.com/-Amykc7HCl8w/Vc13q-H039I/AAAAAAAAD6o/wJkIy7-zO_M/s32-Ic42/loading.gif”;
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’/>
<!–end Archive Calendar–>

 

  • 4 – Agora pesquise por <b:widget id=’BlogArchive1′ e você verá algo parecido com isso:

Blogger-Arquivo-do-blog-em-calendario#3

Selecione TODO o código sublinhado na imagem acima (de <b:widget id=’BlogArchive1′ até </b:widget>) e substitua por:

<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’>
<!– 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 your calendar archive widget – Edit archive widget – Flat List – Newest first – Choose any Month/Year Format
</b:includable>
<b:includable id=’interval’ var=’intervalData’>
Configure your calendar archive widget – Edit archive widget – Flat List – Newest first – Choose any Month/Year Format
</b:includable>
</b:widget>

E fim! Emoji50

Não funcionou?

Verifique se o seu blog está público e com o feed ativo em “completa” (em CONFIGURAÇÕES).

 

Espero que tenham gostado.
Sugestões de novos tutoriais nos comentários! Coracao8

Esse script foi criado por Phydeaux3.

Tags : Blogger

63 Comentários

  1. Amei,amei,amei.Iddo deixou meu blog beeem mais kawaii.Muito obrigada!❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤

  2. Ficou lindo Karol, não vou nem modificar, porque essas cores que você colocou estão lindas.
    Queria fazer uma perguntinha… Será que você poderia explicar como colocar esse marcadorzinho de coração no lugar da bolinha que nem o seu, por favor/ Agradeço muito, beijinhos <3

  3. Oi, tentei fazer no meu blog mas não sei o que aconteceu. Quando salvei a html, o blog tinha ficado sem plano de fundo e sem as fontes que eu tinha configurado antes e eu to desesperada porque não faço ideia de como deixar como estava!!!
    se alguém souber como consertar por favor me ajuda!!

    1. Oi Gabriela, acho que pra instalar o arquivo você removeu algo mais, porque nenhum código dele altera esses outros itens que você disse que ficaram bagunçados..

  4. Obrigada pelo tutorial, estava mesmo à procura disto!

    Só tenho uma questão, como remover o número de publicações junto do mês… :/ tentei remover esta parte do código () mas apareceu “undefined” em vez dos números! :/ Obrigada pela atenção!

  5. Oi, tudo bom?
    Então.. Essa semana o meu arquivo parou de funcionar e eu não sei o motivo.
    Já tem muito tempo que não mexo no meu modelo e eu acho que pode ter algo
    a ver com a nova configuração do HTTPS. O calendário aparece, mas não dá pra
    ver as datas e, consequentemente, os dias que houve publicação.

    Você pode me ajudar?

    Não sei o que aconteceu porque em outros blogs com o mesmo calendário nada
    mudou.

    Aguardo retorno.

  6. Karol, ele aparece, mas não aparece os dias e nem nada… Não sei por qual motivo… Fiz tudo certinho. Esse e entre outros tutoriais não estão dando certo :(

  7. Olá, meu blog não seleciona essa opção “mostrar títulos das postagens”, clico mas não vai de jeito nenhum. O calendário só aparece o mês, os dias não. Dá uma olhada em meu blog caso não esteja entendendo o que estou querendo lhe dizer. Espero que possa me ajudar, existe alguma outra forma para essa opção ser de fato selecionada em meu blog?

  8. Olá, meu blog não seleciona essa opção “mostrar títulos das postagens”, clico mas não vai de jeito nenhum. O calendário só aparece o mês, os dias não. Dá uma olhada em meu blog caso não esteja entendendo o que estou querendo lhe dizer. Espero que possa me ajudar, existe alguma outra forma para essa opção ser de fato selecionada em meu blog?

    devaneiosdeinverno.blogspot.com.br

  9. Olá, como comentei aqui, dia 16 de setembro coloquei o Widget e deu certinho. Porém agora ele parou de funcionar e eu não havia mexido em nada. Refiz e não adiantou. Poderia me ajudar?

  10. Oi Karoline, não estou conseguindo pesquisar no html do blogger. clico em ctrl+f, e aparece a barra de pesquisa, quando copio e colo o código para pesquisar, clico no enter, mas não pesquisa. Fiquei muito triste, pois eu gostaria muito de colocar o calendário para meus leitores se organizarem melhor com os posts. Você poderia me ajudar? Por favor.
    Meu blog: http://filhadoreicomestilo.blogspot.com.br

    1. Sara, essa caixa de pesquisa que abre é a do navegador? Ela precisa abrir dentro da caixa de códigos, caso contrário você não vai encontrar resultado na pesquisa.

  11. Amei! Seráa que você saberia como colocar borda pontilhada na coluna das postagens principais do blog. Já achei vários tutoriais mais não funcionam pois o html não é o mesmo.

      1. Oi Karol, tudo bem? Para voltar a funcionar é só mudar de mensal para semanal!!! Isso muda no próprio gadget… é uma boa dica para não invalidar o tutorial!!

        Bjs

Deixe uma resposta