Widget de Arquivo em forma de Calendário
" 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. "
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:
1
| <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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <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).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
| /* 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; } |
fonte e créditos do presente post:
http://www.bloggersphera.com.br/2009/06/widget-de-arquivo-em-forma-de.html
Google Tradutor
Postagens
