Efeito Peek-A-Boo a partir das Etiquetas dos posts

Mais um efeito espectacular.

Quando clica numa etiqueta do seu blogue, aquelas etiquetas/tags com que classifica os seus posts consoante o assunto dos mesmos, os resultados são apresentados numa página, aparecendo os posts completos. Se houver muitos com essa etiqueta, a primeira página apresentará uns quantos e, no fundo, o link para ver os mais antigos. As usual...

Com este hack poderá apresentar nessa página de resultados, não os posts completos, mas apenas o título de cada um, ordenados por data, e um símbolo ao lado de cada título [+/-], símbolo este que, quando clicado, lhe expandirá e mostrará o post completo. Quando quiser, clica novamente no símbolo e o post contrair-se-á novamente, podendo então clicar, da mesma forma, no símbolo de outro post e assim examiná-lo facilmente.

É um efeito espectacular e que, quando há muitos resultados de posts com a mesma etiqueta, nos ajuda muito a examinar o conteúdo de vários posts rapidamente, pois muitas vezes, apenas pelo título, não conseguimos saber se nos interessa, isto é o seu conteúdo.

Mas a conversa já vai longa e mais do que mil palavras as imagens que se seguem são completamente elucidativas.

Depois das imagens segue-se a explicação de como podem aplicar este efeito nos vosso blogues.

1. Ecrã com lista, contraída, de posts (títulos) para tag/label/etiqueta "Blogger Hacks"



2. Ecrã depois de expandido o primeiro post da lista (efeito peek-a-boo), após clicar no símbolo [+/-] que aparece ao lado esquerdo do título de cada post.



3. Ecrã depois de expandido o segundo post da lista (antes contraí/colapsei) o anterior.



Criação do Efeito:



Passo 1:

Abra, no seu blogue, Painel >> Esquema >> Editar HTML >> Expandir templates do widget
Logo a seguir ao início do cabeçalho do seu blog (tag <head>), coloque o seguinte código:

<script type='text/javascript'>
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
</script>

Passo 2:

Procure no código do seu blogue, a seguinte parte:

<b:includable id='main' var='top'>
<!-- posts -->
<div id='blog-posts'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Antes dele adicione o seguinte código

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>

Passo 3:

Procure:

<b:include data='post' name='post'/>

Antes dele insira

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='PeekABooPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>

Passo 4:

Procure (2ª instâmcia deste o início do html do blogue, uma vez que no passo anterior colocámos outra instância, como pode constatar):

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:loop>
</div>

Depois dele insira:

</b:if>

Não se esqueça que, antes de mexer no seu HTML, é conveniente gravar o seu template, podendo assim reverter todas as alterações no caso de algo correr mal.

Boa sorte!

Painéis de Etiquetas / Labels Colapsáveis / Expansíveis

Ao fim de algum tempo, quando o nosso blog começa a ganhar fôlego e as mensagens já são muitas, começamos a lutar com a falta de espaço. Refiro-me concretamente, por exemplo, a algumas das listas que aparecem na barra lateral como a lista das labels/etiquetas e dos arquivos do blog.
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:

… a lista das labels …

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.