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 {
(as imagens neste código foram escolhidas por mim mas podem ser alteradas)
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;
}
Abaixo do código ]]></b:skin> colamos o seguinte script:
<script language="javascript">
Depois vamos procurar o widget que queremos encolher procurando por:
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>
<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'>
Depois descemos algumas linhas até encontrar
<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>
<b:include name='quickedit'/>
Existe um </div> logo a seguir e depois desse </div> adicionamos mais dois.
Desta forma:
<b:include name='quickedit'/>
Nesta altura basta guardar as alterações e ir ao vosso blog verificar as alterações.
</div>
</div>
</div>
Listas expansiveis na barra lateral
16/11/08 |
Subscrever:
Enviar feedback (Atom)
10 comentários:
nice... assim que tenha tempo vou experimentar...
Olá Vício é só para deixar um beijo e
já que estou aqui deixo uma pergunta....como é que faço para colocar os meus links de blogs...com as letras mais pequeninas e na horizontal como vejo em alguns blogs?
Beijinhos e obrigada.
porra... apanhei o jeito, mas não me dá para as secções que queria... Feeds. Para os links também não dá porque fica marado por ter uma imagem a definir a secção...
mas... à maneira este código ;)
abraço
alexandre
se tiveres os feeds num elemento de página o código dá!
esqueci-me de um pormenor essencial para quem aplica este código em mais que uma secção.
é preciso alterar a parte que diz "ocultarcat" e "mostrarcat" para outro nome, por exemplo "ocultararq" e mostrararq" no caso de ser aplicado no arquivo.
tem que ser diferente em cada elemento de página em que seja aplicado.
Olha isso aplicado a outras coisas, era clicar e aquilo expandia...
AHHHHHHHH... oh vício... Já podias ter dito esse pequeno (GRANDE) detail. Por isso é que aquilo aparecia mas não abria :)]
logo à noite já experimento.
gracias
"Funcemina" na perfeição :z :a
Gracias... vai partilhando ;)
não querendo abusar... se souberes como é que podemos deixar algum aberto por definição (não todos... um em particular)...
será necessário criar outra classe?
alexandre
para cada elemento de página é necessário criar uma classe e como este código é aplicado, individualente, em cada elemento, basta que não o apliques no que quiseres deixar aberto.
massa :d
Enviar um comentário
Para esclarecimento de duvidas podem deixar um comentário ou enviar um email para o endereço que está no meu perfil.
Vou tentar responder a todos.
É aconselhável deixar endereço de correio