Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508668343
Vida do cache: 1508711543
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Widget

Widget Arquivo em Forma de Calendário

Atendendo a uma sugestão de postagens recebida, neste artigo você vai ver uma outra forma de apresentar o Widget de Arquivos em forma de calendário.

O script para funcionamento do Widget foi desenvolvido por Phydeaux3.

Para este hack funcionar é necessário que você tenha ativado os Feeds do seu Blog.(Lembrando que blog “Privado” não tem Feeds).

Só para lembrar, sempre é bom que você faça um Backup do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.

1º Passo – Instalando o Javascript

Se quiser colocar o script diretamente no código do seu template,copie todo o conteúdo deste arquivo.txt e cole-o antes de </head/>

Se não quiser colocar o script diretamente no código do seu template, você pode hospedar o script no seu site favorito.
Confira opções de sites para hospedagem de arquivos
Baixe o arquivo no link abaixo:
Widget-Arquivo-Calendario.js
Hospede-o , copie e cole a url no local indicado em negrito:


<script src='URL-DO-SCRIPT' type='text/javascript'/>

E acrescente logo abaixo, este código:


<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

2º Passo – Substituir o código HTML do widget do Blogger:

Vá em Design >> Editar HTML >> Deixe DESMARCADA a caixinha “Expandir modelos de widgets” e procure pela linha que representa o widget Arquivo em seu blog, que pode ser igual ou similar a esta:


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

e SUBSTITUA a linha pelo código a seguir:


<b:widget id='BlogArchive1' locked='true' title='Arquivo' type='BlogArchive'>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='interval' var='intervalData'>
</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'/>
<!-- 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 id='bcFootAll'/>
<td id='bcFootNext'/>
</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='menu' var='data'>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<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 + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
</b:includable>
</b:widget>

3º Passo – Editar o gadget de Arquivo para “Lista Simples”:

Vá em “Elementos de Páginas” e clique em “Editar” no gadget “Arquivo” e no painel, altere o estilo para “Lista Simples”.

Se você quiser, poderá aplicar estilos, para modificar as cores de seu novo Widget de Arquivo em forma de Calendário.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>


/* Arquivo Calendario
----------------------------------------------- */

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

Lembre-se que este é apenas um exemplo de cores. Edite as cores de acordo com seu gosto.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

17 Comentários

  1. .:: Nessa ::. disse:

    @Ayalle
    Eu acredito que o problema possa estar no script..como não fui eu quem desenvolveu esse script,não sei te informar ao certo o que pode ser..e não tive tempo para testa-lo, e tentar descobrir.

  2. Ayalle Cristinne disse:

    Olá consegui instalar, mas eu queria que só aparecesse o calendário com as datas que têm publicação destacadas; os títulos dos posts estao aparecendo logo abaixo do calendário. Como faço para deixar somente o calendário?

    (também estou com o mesmo problema)

  3. Julia disse:

    adoreiiiiiiiiiiiii

    parabens

  4. .:: Clau ::. disse:

    Kevin
    Vc tem certeza que fez o 3º passo do tutorial? Tem que alterar o estilo do gadget arquivo para "Lista Simples", senão ele não irá funcionar corretamente.

  5. PadocaGames[ADM] disse:

    o Hack até funfou.. e eu agradeço.
    Mas não gostei do estilo, e ainda tive dificuldades para modificá-lo. pq a minha barra lateral é muito final, mesmo que eu coloque "width:100%;" ainda sim fica apertado. =s
    Mas muito obrigado!

  6. kevin simpson disse:

    Oi Clau *–* amei oblog, e amei esse tutorial, tá perfeito assim como todos os outros =) bom, eu fiz tudo certo, e tudo deu certo, porem meu problema é o mesmo de todos que comentaram ai em cima, abaixo do meu calendário, os títulos das postagens ficam aparecendo, e isso é muito ícomodo, deve aver alguma parte do código que se for apagada retire os títulos das postagens, por favo ajuda a gente? Faço qualquer coisa pra você dizer como retira o titulo das postagens de baixo do calendário, visita meu blog pra você ver: capotino.blogspot.com bj

  7. .:: Clau ::. disse:

    Dâmaris
    Tais recursos podem variar de template para template. Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  8. Dâmaris - Village Beauté disse:

    Olá consegui instalar, mas eu queria que só aparecesse o calendário com as datas que têm publicação destacadas; os títulos dos posts estao aparecendo logo abaixo do calendário. Como faço para deixar somente o calendário?

    obrigada

  9. Trashy Girl disse:

    Bem fácil e simples, faz alguns tutoriais de wordpress flor, custa nada né? :* beijos!

  10. .:: Clau ::. disse:

    Eglon Henrique
    Vc seguiu o 3º passo? Olha não tem como eu saber o q pode ter ocorrido no seu blog. Verifique se seguiu tudo corretamente.

  11. Eglon Henrique disse:

    clau estalei e funciono corretamente exceto uma coisa o titulo das postagens ainda estão aparecendo como faço para retirar ?

  12. .:: Clau ::. disse:

    Raí Carvalho
    Vc tem certeza q seguiu todos os passos? Instalou o script no seu template? Vc deve ter feito algo errado. Tente refazer.

  13. Raí Carvalho disse:

    Clau eu segui todos os passos e não deu certo,

    apareceu o arquivo em 3 formas diferentes: em menu suspenso , lista simples e hierarquia , mimha sorte foi o backup!

    o widget é bom, mais tem como arrumar ai?

    vlw

  14. ..:GC:..HackerAzul disse:

    ótimo widget mais o titulo do blogestá aparecendo [object text} ao inves do nomal

  15. Paulo André. disse:

    Isso que eu tava precisando! Maravilhoso seu trabalho guria, no geral mermo! XD Beijos!

  16. ::Clau:: disse:

    @Mary:
    O Blogger anda faminto…está engolindo vários comentários ultimamente!Ainda não corrigiram o erro…=/

  17. Mary disse:

    Oi Clau! Vim retribuir o beijo e o comentário :)
    e tbm te dizer q o blog estava com fome e comeu o comentario =/
    Adorei esse widget
    bjinhos flor

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.