Podemos escolher entre 3 estilos de apresentação para o Widget de Arquivos do Blogger: hierarquia, lista simples e menu suspenso. Phydeaux3 desenvolveu mais uma opção uns dois anos atrás, que vocês já devem ter visto em alguns blogs - um widget em formato de calendário.
Esse widget ganha mais em beleza do que em funcionalidade. Em minha opinião, o único estilo realmente funcional do widget de arquivos infelizmente é o menos bonito - o de hierarquia.
A) Instalando o JavaScript
Se preferir colocar diretamente o código no template, abra o arquivo do link abaixo, copie o conteúdo e cole acima da tag
</head> :Se preferir hospedar o JS, baixe o arquivo do link:
Depois do script, coloque a chamada para a biblioteca JSON:
<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/>
B) Alterando o código do Widget do Blogger
Substitua todo o código do seu widget de arquivo, 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 + "_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> </div> </b:includable> </b:widget>
C) Configurar o widget para lista simples
O Widget só funciona se configurado como "lista simples". Altere em seu painel de layout:
D) CSS - Sugestões para os estilos
O Widget transformou-se em uma tabela. Abaixo deixo uma sugestão de estilos, mas na realidade não há muito o que alterar além das cores, já que as medidas principais estão em percentagem e se adaptarão à sua sidebar (ou footer, se preferir).
/* Calendar Archive Widget */
#sidebar .BlogArchive h2 {
display: none; }
#blogger_calendar {
margin: 5px 0 20px 8px;
padding: 3px;
background: #FFF;
width: 100%;}
#bcaption {
border: 1px outset #000;
background: #f2f2f2;
padding: 2px;
margin: 10px 0 0; }
#bcaption select {
background: #DE0505;
color: #fff;
font-weight: bold;
border: 0 solid #CCD9FF;
text-align: center; }
table#bcalendar thead {
background: #666666;
color: #ffffff; }
table#bcalendar thead tr th {
width: 25px;
text-align: center;
padding: 2px;
border: 1px inset #000;
font-family: Tahoma;
font-weight: normal; }
table#bcalendar {
border: 1px solid #000;
border-top: 0;
margin: 0px 0 0px;
width: 95%; }
table#bcalendar tbody tr td {
text-align: center;
padding: 2px;
border: 1px outset #000; }
table#bcalendar tbody tr td a {
font-weight: bold;
color: #FFFFFF; }
td.firstCell {
visibility: visible; }
td.filledCell {
background: #fff; }
td.emptyCell {
visibility: hidden; }
td.highlightCell {
background: #DE0505;
border: 1px outset #000!important; }
table#bcNavigation {
width: 95%;
background: #DE0505;
border: 1px inset #000;
border-top: 0;
color: #fff; }
table#bcNavigation a {
color: #FFFFFF;
text-decoration: none; }
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; }
ul#calendarUl li {
background:transparent url(http://lh3.ggpht.com/_j4fpzU2AasM/SjZo_NMYNXI/AAAAAAAAAsg/iCaabuOWvrU/page.png) no-repeat !important;
padding: 0 0 0 35px !important;
font-size: 110%;
margin: 3px 0 0 0; }
Comentários: 15
é bem legal tanto que adicionei ele ao meu a tempos atraz =D
+ uma vez otima dica :)
Legal, já to usando! O que eu queria fazer é destacar a data em que tem postagens com uma cor em especial, teria como você me dizer qual a parte do CSS correspondente?
Já adicionei no meu blog de teste estava procurando esse tipo de calendário, obrigado ;-D
Oi Rô
obrigado pelas dicas de sempre, essa é mais uma muito legal, mais todos esses widgets de arquivo realmente são muito pouco usuais esse ao menos da um vizual mais bonito ao blog.
Mais esse comentário em especial é pra dar os parabens pelo vizual do blog, cada vez mnelhor e mais bonito.
Abrção
Cleisson
Então sumida!
Voltou com tudo ein....
Parabéns pelo blog!
Gostaria de pedir um tutorial. Esses dia visitei o Quite Random(http://quiterandom.com/), e vi que ele tinha colocado os comentaios na sidebar.
Achei muito interessante, e acho que ficaria muito bom no meu blog. Inclusive no seu também!
Quando sobrar um tempinho =D
Abração e sucesso!!!!!!!!!!!!
Acho que fazia muito tempo que não aparecia aqui. Digo isso por causa do novo layout. Não o conhecia e ficou lindo. Quanto ao post, vou tentar colocar num blog de testes antes de incorporar ao meu blog. Já vou como está lá? Beijos, amiga e sempre obrigado pela força nos momentos de desespero (meus é claro).
Rô eu queria sugerir uma postagem para seu blog, muitas pessoas aqui querem ter um dominio propio porém não querem gastar dinheiro do bolso delas com isso, eu sou um desses =D para isso eu criei uma conta no paypal, mas isso é só pra receber o dinheiro que irei ganhar em sites de PTC que é real sacada disso, porém os sites de PTC geralmente são sites que não pagam ninguem sites que ate usam algumas taticas para roubarem senhas de contas bancarias e outras coisas, é por isso que fiz uma pesquisa a procura de um site que confiavel, demorou bastante, mas eu achei este site, o DvulgaPT, um site de portugal que recebi dos seus anunciantes uma quantia e repassa uma parte aos seus membros que clicam nos anuncios, e aidna podemos ganhar indicando o site a outras pessoas para entrar no site tem de ser referido por alguem, eu ganho quando alguem coloca em referido por: thiaguinhobessa existem outros programas de PTYC confiaveis mas esse ganha na facilidade e na confiabilidade procura fazer uma postagem sobre o assunto e se tu resolver te cadastrar coloca referido pro thiaguinhobessa ok?! e se voce se cadastrar coloca na sua matria pra colocarem o referido por você, mas caso não se cadastre pede pro pessoal colocar pra mim
acho que isso pode ajudar o pessoal a conseguir pelo menos uns 10 euros para comprar o dominio desejado
Abraços e parabéns novamente pelo blog ta muito bom...
outra coisa o meu link pra se cadastrem é esse se você permitir libera essa postagem com esse link
http://www.divulgapt.com/pages/index.php?refid=thiaguinhobessa
Muito bom seu post vou colocar em um dos meus blogs.
gostei muito do seu blog!
abraços
da uma visitada no meu!
Oi, como você pode aumentar a ler feeds em um mês porque são mais de 100 não lêem todos, só mais receintes graças
Marcos: Apesar de ser uma idéia já antiga do Phydeaux, muita gente não conhecia. Como acho um widget bonito, resolvi "ressuscitar".. hehe
Elker: td.highlightCell é onde está o estilo para o dia em que há postagens, no caso do exemplo, coloquei um background vermelho.
bypoesia: De nada! :)
Cleisson: Obrigada e você é sempre muito bem-vindo! Abração!
Vinny: Como tenho andado meio "fora do ar", só vejo os blogs pelos feeds (e olha lá! hehe). Vou ver como está o Quite Random, mas agora o Fernando está usando o Wordpress. De qualquer forma vou ver se acho um "jeitinho" prá fazer no Blogger. Obrigada e abração!
Bauru: Vou achar um tempo prá te visitar. Como eu disse ao Vinny, no máximo tenho acompanhado os feeds. Obrigada! :)
Thiago: Estou com uma fila de projetos pra dar andamento, mas assim que me organizar pesquiso sobre o assunto e faço uma postagem, sim. Mas fica aqui o seu link pra que os interessados se cadastrem:
http://www.divulgapt.com/pages/index.php?refid=thiaguinhobessa
estudiodicas: Obrigada! :)
Proteo: Sorry, I didn't understand your comment. Write in English or Spanish, as you prefer. Thanks.
tem algum modo de nao aparecer esse montao de link abaixo do calendario???
Rô, não teria como tirar dessa parte "ver posts em arquivos" em diante??? Pois queria colocar um background pra cada widget na sidebar, e ficaria muito grande para a imagem que tenho, e se eu fosse tentar redimensioná-la perderia a nitidez.
Espero respostas.
Mateus.
Olá Roseli, parabéns pelo seu trabalho aqui.
Muito bem produzido.
Venho com uma dúvida sobre a frequência de arquivamento do Blogger, e gostaria que me desse uma dica de onde poderia encontrar a solução. O Google não anda muito meu amigo, ultimamente, sabe? rsrrss
É o seguinte. Tenho um blog com minhas produções textuais, basicamente para organizá-las. O problema é que não me interessa arquivar por dia, semana ou mesmo por mês, que são apenas estas as opções do blogger. Eu gostaria mesmo é de arquivar meus textos anualmente!
Tenho trabalhos desde 1997 e, para mim, o arquivamento anual seria ideal.
Conhece e me indicaria alguma fonte com essa possibilidade?
Uma grande abraço,
e novamente parabéns!
Roberto Luiz
Parabéns por este tuto!!!!!
Estou usando em meu blog e funcionou perfeitamente!!!
Parabéns! Obrigado!
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!