Arquivo em forma de calendário

http://tur-quesa.blogspot.com.br/2013/03/fazendo-um-site-no-dreamweaver.html

http://www.templatesparavoce.com/2013/07/arquivo-do-blogger-na-forma-de.html *****

Para personalizar mais o seu blog, irei postar agora um modo de personalizar o gadget Arquivo do Blog e deixa-lo em forma de calendário, veja um exemplo aqui. Isso é bem útil, pois o arquivo fica mais organizado bonito.

Inserindo os Códigos

Primeireiro você ja deve ter o gadget no seu blog.

1) Entre em layolt ► Adicionar um Gadget ► Arquivo do Blog. Deixe-o neste formato:

É importante fazer isso, configure o gadget de acordo com a imagem.

2)  Procure pelo seguinte Código ^{Deixe a opção "Expandir modelos de widgets" desativada}

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

Substitua o código acima por:

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

3) Agora vamos aplicar estilos. Procure por ]]></b:skin> e Acima dele cole o seguinte código CSS:

/* 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;
}
table#bcalendar thead tr th{
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{
text-align:center;
padding:2px;
border:1px solid #000;
color:#1F1FFF;
}
table#bcalendar tbody tr td a{
font-weight:bold;
color:#000;
}
td.firstCell {visibility: visible;
}
td.filledCell{
background: #fff;
}
td.emptyCell{
visibility: hidden;
}
td.highlightCell{
background:#ddd;
border:1px outset #000
}
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;
}

Agora visualize o modelo e clique em Salvar Modelo

4) Agora procure por </head> e cole o seguinte código acima dele.

<script src='http://static.tumblr.com/726xof9/M1tmhz78n/arquivo_calendario.js' type='text/javascript'/>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/>

Última Observação:

Se você retirar a 2ª linha do código CSS: #calendarDisplay { display: none }
→ Irá aparecer abaixo do calendário a lista de posts criados naquele mês em questão.
Se você escreve com uma frequência grande a lista ficará muito grande e pode ficar feio, mas se você escreve com pouca frequência pode ativar este recurso apagando esta linha e, dessa forma estará destacando os posts do mês.

Visualize o modelo, se está tudo certo, clique em Salvar Modelo.

Você pode alterar os estilos da forma que quiser.