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!