Há uma maneira muito elegante de resolver esse problema. Trata-se de construir um painel colapsável/expandível, que é carregado apenas com um título e um link (ocupando muito pouco espaço, portanto), o qual quando clicado pelo visitante faz expande-se/desdobra-se e a lista torna-se visível, podendo depois ser colapsada de novo e voltar à primeira forma.
Podem ver esta funcionalidade no meu blog, na barra lateral, exactamente no que se refere às etiquetas e ao arquivo de mensagens.
É, pois, essa funcionalidade que vamos descrever neste post, de modo a que possam implementá-la nos vossos blogs, caso o desejem.
Este post foi traduzido e adaptado daqui. Obrigado Annie!
Vamos tratar o caso das etiquetas/labels, mas facilmente se pode depois adaptar também ao arquivo de posts do blog:
1. Mais uma vez, no layout do template/modelo, vão a “Editar HTML
Descubram a seguinte parte do código, na stylesheet:
...
.comment-footer a:link {
color: $mainTextColor;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
...
e a seguir à chaveta, antes do /*Profile, insiram as seguintes linhas de código na stylesheet:
.commenthidden {display:none}
.commentshown {display:inline}
2. No cabeçalho, entre o e o , logo no seu início, insiram:
3. Vão ao vosso blog, façam clique da direita do rato, e cliquem em “Ver código fonte da página”.
Nesse código fonte encontrem:
Será qualquer coisa do tipo (é o que eu tenho à data de hoje, como minha lista de etiquetas:
Adsense
(1)
alexa
(1)
apresentação
(1)
artigos recentes
(1)
aumento de visitas
(4)
badges
(1)
blog directories
(1)
blog ranks
(2)
blogger
(1)
classificar mensagens
(1)
classificar posts
(1)
code snippet
(1)
comentários com links
(1)
comunidades
(1)
código
(3)
follow me
(1)
google
(1)
inserir código nos posts
(1)
lastfm
(1)
lista de artigos
(1)
mensagens recentes
(1)
mensagens relacionadas
(1)
monetizar blog
(1)
movimentos
(1)
notícia
(1)
posts recentes
(1)
posts relacionados
(1)
radio
(1)
radio lastfm
(1)
retagrr
(1)
sigam-me
(1)
sites sociais
(1)
table of contents
(1)
technorati
(1)
tradução do blog
(1)
tradução do blog com bandeiras
(1)
twitter
(1)
votar em posts
(1)
votações
(1)
widget radio
(1)
widgets
(11)
4. Vão novamente ao layout, abram o template/modelo nos “elementos de página”, adicionem um elemento de página (não liguem onde vai ficar) do tipo html/javascript.
Adicionem como seu conteúdo:
Titulo
Escolhendo um nome único para UniqueName nos dois locais. Escolham um nome “esquisito” para terem a garantia que não haverá mais nenhum identificador com o mesmo nome em todo o blog.
No “título” ponham o título que quiserem para esse painel, por exemplo “+/- Etiquetas”.
5. Copiem o código que encontraram no passo 3. (a lista de todas as vossas etiquetas) para a posição que indicamos a seguir:
Código encontrado no passo 3
6. Gravem
7. Finalmente, podem apagar o elemento de página que criámos no passo 2.
É tudo. Divirtam-se!
Questões e dúvidas, nos comentários, s.f.f.
Responda a este post
Enviar um comentário