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!
Responda a este post
Enviar um comentário