Títulos expansíveis nos arquivos e categorias

Outro dia me perguntaram como exibir apenas os títulos dos posts nas páginas de arquivo ou categorias (marcadores) no Blogspot. Mas ao invés de explicar só isso, preferi apresentar a vocês como configurar títulos expansíveis nessas páginas. Funciona assim: Quando o usuário clica em algum marcador ou seleciona um mês no arquivo do blog, é conduzido a uma lista que exibe apenas a data e o título clicável dos artigos precedidos pelos símbolos [+/-]. Que funcionam como o sinal de adição no navegador de arquivos do Windows (Explorer). Ao ser clicado o conteúdo do artigo é exibido, se acionado novamente o artigo é escondido. Para configurar no seu blog, primeiramente entre no modo de edição HTML e faça um backup do seu template, ou faça antes no seu blog de testes. Em seguida marque a opção Expandir modelos de widgets e cole o código a seguir imediatamente acima da tag </head>:

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

Em seguida, procure pelo trecho de código exibido abaixo em seu template. A parte em vermelho é o que você deve adicionar:

<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> <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> <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/> <b:include data='post' name='post'/> </b:if> <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>

Para testar visualize, se não ocorrer nenhum erro, salve e está pronto. Se você quiser ainda pode alterar a quantidade de artigos exibidos nessas páginas, uma vez que os textos não serão mais mostrador por padrão. O resultado fica mais ou menos assim:

Os testes e configurações foram realizados no template padrão Minima White, que está disponível para download para quem quiser fuçar o código:

Mínima Compulsivo Artigos Retráteis ©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)

Via: Hackosphere | Imagem: Libertinus