Listas expansiveis na barra lateral

Recentemente o Blogger disponibilizou uma nova forma de apresentar os links dos blogs que normalmente visitamos. Estou a falar da lista de links que temos na barra lateral do nosso blog que neste momento pode mostrar o titulo do ultimo artigo, há quanto tempo foi publicado e até uma miniatura da imagem publicada (se houver).
Para blogs que têm uma lista com muitos links, esta lista pode tornar o blog muito mais longo que o necessário para os artigos editados. Isto acontecia comigo e por isso procurei uma forma de reduzir o espaço ocupado por essa lista.
Encontrei uma forma de tornar essa lista expansivel (normalmente oculta mas que a clicar num link, ela mostra-se).

Para instalar estes códigos é necessário fazer as seguintes alterações:
Entrar no código fonte do blog, expandir widgets e procurar

]]></b:skin>

Imediatamente antes deste código inserimos os seguintes estilos:

.mais {
background-image: url(http://i482.photobucket.com/albums/rr190/vicioprofundo/mais.jpg);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.menos {
background-image: url(http://i482.photobucket.com/albums/rr190/vicioprofundo/menos.jpg);
padding-left: 20px;
background-repeat: no-repeat;
background-position: left center;
}

(as imagens neste código foram escolhidas por mim mas podem ser alteradas)
Abaixo do código ]]></b:skin> colamos o seguinte script:

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

Depois vamos procurar o widget que queremos encolher procurando por:

<div class='widget-content'>

Este código deve estar 5 ou 6 linhas abaixo duma linha que identifica o widget pelo nome.
Antes deste código inserimos:

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

Depois descemos algumas linhas até encontrar

<b:include name='quickedit'/>

Existe um </div> logo a seguir e depois desse </div> adicionamos mais dois.
Desta forma:

<b:include name='quickedit'/>
</div>
</div>
</div>

Nesta altura basta guardar as alterações e ir ao vosso blog verificar as alterações.

Ler mais...

Fechar...