Blog Hack - Sidebar Expansível

No Blogger temos 3 maneiras de mostrar os post arquivados: Hierarquia, que mostra os arquivos do ultimo mês (ou dias dependendo da sua configuração), expandido e o resto escondido, Lista simples, que mostra somente os anos e menu, que é uma combobox com os anos. Eu prefiro usar o modo hierarquia para que o visitante possa visualizar os arquivos postados recentemente. O Problema e as vezes a lista fica muito grande, criando uma certa poluição visual.

Procurei na internet e não achei nada que eu pudesse usar, então criei este hack, que pode ser usado em qualquer elemento de página da sidebar.

Escolha dos tipos

P.S. o código javascript eu peguei na internet e não sei quem escreveu, se autor aparecer por aqui eu coloco os créditos.
P.S.2 Pode conferir na minha sidebar eu utilizei o hack nos arquivos e nas tags.

Então, mão na massa, ou no código.

1 - Entre no seu blog, clique em "Modelo" e depois em "Editar html". Marque caixa Expandir modelo de widgets". Procure por:

]]></b:skin>

2 - Logo abaixo copie e cole o código:

<script language="javascript">
function showdiv(ativar,id1,id2)
{ var A=document.getElementById(id1);
var B=document.getElementById(id2);
if(ativar=='sim')
{
B.style.display = 'block';
A.style.display= 'none';
}
else
{
A.style.display = 'block';
B.style.display= 'none';
}
}</script>

3 - E logo acima copie e cole o código:

.mais {
background-image: url(http://i201.photobucket.com/albums/aa309/igorfonseca/control_add.png);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.menos {
background-image: url(http://i201.photobucket.com/albums/aa309/igorfonseca/control_remove.png);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}

Agora vamos a parte que dá um pouco mais de trabalho, porque temos que enteder um pouco da estrurura do blogger, no elemntos de página como os aquivos e as tags é próprio blogger que gera, então temos que buscar o bloco correspondente ao elemento.

4 - Para as tags vamos procurar o seguinte bloco:

<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/&gt;
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/&gt;
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span&gt;
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

Isole o código, de alguns enter antes e depois para que não aconteça nehum erro.

5 - Antes desse bloco, copie e cole o código abaixo:

<div id='ocultarcat'>
<p class='mais'>
<a href='#' onClick='showdiv("sim","ocultarcat","mostrarcat"); return false'><strong> Mostrar</strong></a>
</p>
</div>
<div id='mostrarcat' style='display:none'>
<div align='left'>
<p class='menos'>
<a href='#' onClick='showdiv("nao","ocultarcat","mostrarcat"); return false'><strong>Ocultar</strong>
</a>
</p>

6 - E depois dele copie e cole o código abaixo:

</div>
</div>

Pronto está feito mande salvar e confira.

7 - Para os arquivos vamos procurar o seguinte bloco:

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

8 - Depois repita os procedimentos 5 e 6.

9 - Para os elementos de página HTML/Javascript, basta fazer o procedimento 5 antes do conteúdo e 6 depois do conteúdo.

Bom é isso, espero ter ajudado