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:
Via: Hackosphere | Imagem: Libertinus

Comentários

  1. Compulsivo,
    deu um certo trabalho porque algumas partes não correspondiam ao meu modelo de templates. Mas no fim deu tudo certo...

    Como o comentário não vai direto para divulgação, deixa eu te dizer (na boa!): o correto é "quiser" (na sua última linha). Por favor, não coloque essa última parte no comentário divulgado.

    Abraços!

    ResponderExcluir
  2. @Nani, como eu disse as configurações foram testadas no template Mínima White, em templates personalizado elas podem variar um pouco.

    Obrigado pelo toque na ortografia, já corrigi! Não tenho como publicar parcialmente seu comentário, mas errar é humano, não é mesmo?

    []'s
    Compulsivo

    ResponderExcluir
  3. Olá Compulsivo, nunca conversamos, mas admiro seu blog e tenho implementado as dicas que vc deu lá. Uma coisa apenas, retirei os créditos nos widgets e coloquei a referência única nos créditos do blog, tá? Se tiver problemas, é só falar que choro mais um pouco pra deixar como está lá. Beijinhos.

    ResponderExcluir
  4. @Debora, sem problemas... Se você quiser pode deixar ainda mais discreto, junto aos créditos do template, que a propósito é muito bonito, parabéns!

    []'s
    Compulsivo

    ResponderExcluir
  5. Eae compulsivo, imprecionate como uns dias sem passar aqui quantidade de coisas que perco, ainda bem que assei seu feeds via e-mail. Mas semana de prova é foda, essa dica é muito boa o acho que faz com que as páginas internas abram mais rápido, a facilidade de achar o que você procura, e o que você não procura (hehe).
    Aproveito para falar da entrevista no Dicas Blogger, muito boa.

    ResponderExcluir
  6. Olá Compulsivo,

    A dica de como configurar títulos expansíveis é ótima para quem quer ganhar espaço no blog, mantendo um layout agradável e bonito.

    Estou fazendo algumas modificações para adequar no meu template (que foi montado baseado nas suas dicas).

    Pela primeira vez comento no seu blog, que por sinal é pra lá de fantástico, estou muito satisfeito com as dicas apresentadas aqui.

    T+!

    ResponderExcluir
  7. Fala compulsivo beleza...gostei muito da dica
    e vou tentar adaptar no meu template ...
    eu ouvi sua entrevista, ficou show de bola
    a única coisa que eu não concordei foi com seu
    conselho para quem está querendo criar um blog..
    na verdade eu estou começando agora a postar
    num blog e isso já se tornou um vício pra mim...sei que não sou muito bom nisso mas fazer o que né...gostei da coisa
    e mesmo que eu não ganhe nada com adsense ou coisa assim eu não consigo parar de blogar...
    nem de ver as dicas do seu blog...rsrsrs valeu abraços

    ResponderExcluir
  8. Compulsivo,
    nem precisava ter colocado o primeiro comentário...
    agora, veja se é possível o que vou pedir. Será que daria para colocar um resumo para cada artigo que só apareceria nessa consulta dos marcadores e do arquivo - junto como +/-?
    algo como você fez na sua área de blogspot, mas utilizando tb essa dica que vc deu agora...
    Valeu!

    ResponderExcluir
  9. @Nani, depois do formulário de comentários embutidos, a sumarização nativa dos artigos é o recurso mais aguardado pelos usuários da plataforma... Infelizmente, que eu saiba, ainda não é possível fazer o que você pede :-(

    []'s
    Compulsivo

    ResponderExcluir
  10. Muito legal a dica! mas pq vc não usa ela no seu blog? abraço.

    ResponderExcluir
  11. @Alberto, já usei no passado, mas hoje em dia não uso mais. Acho que enjoei do recurso...

    Além disso, se eu aplicasse todos os tutoriais que publico, meu blog se tornaria um pinheirinho de natal!

    []'s
    Compulsivo

    ResponderExcluir
  12. Excelente recurso para quem está acostumado a publicar vários artigos diários.
    Valeu a dica.

    Ulisses

    ResponderExcluir
  13. Eu testei também, é legal...mas deixou minha pagina de categorias meio desordenada. O recurso é bacana, mas deve-se pensar em usalo na hora de construir a template para não ter o mesmo problema que eu...

    (ps: Seu blog é muito lokooo, ja usei varias dicas daqui)

    ResponderExcluir
  14. e aew compulsivo valeu pelas dicas

    ResponderExcluir
  15. Muito bom esse recurso, facilita a vida de quem acessa o blog, já até inclui ao meu.

    ResponderExcluir
  16. Compulsivo,
    Fui informada por uma visitante do meu blog que meus títulos expansíveis não estão funcionando.
    Acredito que isso aconteceu depois que coloquei um hack do templatesnovoblogger para resumir as postagens (está no artigo Hack Leia Mais Resumo de Postagem do dia 03/09).
    Sinceramente não quero tirar o hack da Ariane e nem a sua modificação. E acredito que outras pessoas tb estão utilizando essas duas dicas simultâneamente.
    O que vc acha q poderia ser feito?
    Agradeço a sua atenção!

    ResponderExcluir
  17. @Nani, infelizmente você vai ter que optar por um deles, pois são incompatíveis. Pois para exibir os posts retráteis é necessário carregá-los totalmente...

    []'s
    Compulsivo

    ResponderExcluir
  18. Puxa Compulsivo! Que pena...
    Espero que você não fique magoado, mas vou optar pelo hack Leia mais. Realmente concordo com o conceito de "capa" na página inicial que você colocou em outro artigo.
    Valeu!

    ResponderExcluir
  19. @Nani, sem problemas. Nem eu mesmo uso este recurso ;-)

    []'s
    Compulsivo

    ResponderExcluir
  20. cara, instalei essa dica no meu blog de programas e ficou muito lindo... Valeu mais uma vez, Compulsivo!

    ResponderExcluir
  21. tem como trocar esta seta por alguma outra figura com por exemplo um + e -?
    obrigado

    ResponderExcluir
  22. Muito bom o tutorial :)
    Mas, eu gostaria de saber se não dá pra fazer isso com o perfil que fica na capa do blog :~
    Beijo

    ResponderExcluir
  23. Compulsivo,

    Ficou por demais! =)

    Gratidão herética!

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio