5 de outubro de 2009

Expandir e minimizar posts no Blogger


Colocar posts resumidos na página inicial do blog é uma maneira de aguçar a curiosidade do seu leitor/visitante para que ele se interesse pelo restante do conteúdo da postagem. Também ajuda na navegação dentro do blog, pois além de agilizar no seu carragamento, permite ao internauta ver uma maior quantidade de posts sem precisar ler todos até o final. Por isso, hoje iremos aprender como expandir e minizar posts nos blogs do Blogger/Blogspot.

É sempre bom lembrar que antes de fazer qualquer alteração no seu blog, você deve salvar as configurações atuais do seu template para que não perca tudo que já tenha feito.

1º Passo: Vá em Layout -> Editar HTML -> Marque a opção "Expandir modelos de widgets".

2º Passo: Com a ajuda do Crtl+F, encontre a tag </head> e acima dela cole o seguinte código:
<script src='http://dl.getdropbox.com/u/647003/CiudadBlogger/Scripts/functiontoggleIt.js' type='text/javascript'></script>

3º Passo: Novamente com a ajuda do Crtl+F encontre o trecho abaixo:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Substitua tudo que está acima por este código aqui:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Leia mais...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Minimizar [-]</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

4º Passo: Clique em visualizar e, se não acusar nenhum erro, salve as alterações feitas.

Você poderá aplicar este recurso em qualquer post do seu blog, desde que acrescente os códigos <span id="fullpost"> e </span> no conteúdo das postagens. Veja um exemplo:
Trecho resumido que irá aparecer no início do post
<span id="fullpost">
Restante do post
</span>

É isso. Até a próxima pessoal.

Via: Cuidad Blogger

14 comentários:

  1. Olá, vim conhecer seu blog,e desejar boa semana
    bjs

    aguardo sua visita :)

    ResponderExcluir
  2. Boa noite. Sou iniciante em blogs e tenho lido suas dicas, que têm me ajudado muito. Tentei a dica acima, mas no 4ºpasso não deu certo. Inseri o código no local do texto que eu queria que aparecesse na pag. inicial do post, conituei com o texto e inseri o código no final do mesmo. Cliquei em salvar e publiquei o post, mas o texto está lá, inteiro. O que fiz de errado? obrigada Katia (artecariocaartesanato.blogspot.com)

    ResponderExcluir
  3. Boa noite, Katia.

    Primeiro agradeço por gostar das dicas que dou aqui no blog. Sempre muito bom saber que posso ajudar de alguma forma.

    Quanto a sua dúvida, eu acredito que tenha acontecido algum problema durante a instalalação do trecho <span id="fullpost"> e </span>, pois como vc pode perceber neste blog-teste, que tem as mesmas características que os eu blog, tudo está em ordem e conforme os passos que foram seguidos no post.

    Recomendo que você instale novamente, isso pode resolver. Se continuar o erro, você me fala e vamos achar outra solução.

    Grande abraço

    Idenaldo

    ResponderExcluir
  4. OI Idenaldo,
    Vou tentar, mas pode esclarecer duas coisas antes? Está aparecendo o texto tod, mas o LEIA MAIS no final (só não está "cortando" onde coloquei o primeiro código). Devo colocar o código sem espaço no final (o no icício do resto do texto que deve estar disponível quando o leitor clicar no LEIA MAIS)da palavra onde quero parar o texto da página inicial? Muito obrigada pela ajuda.
    att,
    Katia (artecarioca)

    ResponderExcluir
  5. Olá

    Idenaldo

    Não compreedi o 4º passo

    sempre leio seu blog

    um abraço


    http://megadigitalbahia.blogspot.com

    ResponderExcluir
  6. ola, Katia. Se você fizer tudo como está no post vai dar certo. Testei em vários modelos diferentes e o resultado foi o esperado. Veja se você não está esquecendo nenhum passo.

    Grande abraço.

    Alcione, o 4º passo é para você salvar as alterações sugeridas no post. O ideal é sempre clicar primeiro em "Visualizar", pois se algo estiver errado, o blogger vai dar um alerta e a página-teste não irá abrir. Se ela abrir normalmente, significa que tudo deu certo e você pode salvar as alterações. Apenas isso.

    Grande abraço.

    ResponderExcluir
  7. Caro irmão Idenaldo, como fazer resumo de algumas postagens para que o leitor ... continue lendo >> ou leia mais - de post escolhidos e não de todos domeu blog???

    no recurso jump break - mostra as palavras mais informações poderia até ficar assim mais gostaria de dar mais destaque nestas palavras, tem como?

    saudações e Paz!

    José Antonio
    www.jvalili.blogspot.com

    ResponderExcluir
  8. Olá, coloquei tudo direitinho como vc disse e deu certo, mas está meio que repetindo as postagens.. estou mandando o link do print pra você ver..

    http://i50.tinypic.com/2e5041h.png

    Se puder me responder pelo email
    juju_liana@msn.com

    Agradeço desde já!
    Parabéns pelo blog!

    ResponderExcluir
  9. Opa, não consegui achar o código do 3º passo...
    o q faço ?

    ResponderExcluir
  10. @José, sugiro que dê uma olhada nesse post do Usuário Compulsivo. Ele mostra uma outra forma de se colocar post resumidos na página inicial do blog sem usar o jump break.

    @Jugs, recomendo que refaça todos os passos descritos no post. Vi o print que me enviou e não sei te dizer, o que poderia ter acontecido. Fiz os procedimentos descritos no post em vários blogs testes e todos deram certo. Tente novamente, e se continuar dando o mesmo erro, vamos tentar outro procedimento.

    @Juan, é necessário verificar se nos códigos do seu template tem algo semelhtante ao código descrito no passo 3.

    ResponderExcluir
  11. O templete que tenho não tem os códigos do 3° Passo. Baixei novamente, para ver se fiz uma burrada, mas não continha. Tem um outro jeito?

    ResponderExcluir
  12. @Gustavo Se em seu template não é encontrado nenhum dos códigos mencionados neste post, eu recomendo você adicionar outro estilo de resumo de post. Este aqui do Compulsivo é muito bom.

    Abraço.

    ResponderExcluir
  13. ótimo blog, tá me ajudando muito... to seguindo ele... Obrigado pela postagem

    http://fantasticnerds.blogspot.com

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.