, , ,

Resumindo postagens na página inicial, de marcadores e arquivo do seu Blogger

por Sérgio Estrella 17/03/2009
Blogger Hacks 

Muitos blogs hospedados no Blogger/Blogspot acabam se tornando longos demais, o que dificulta a navegação e torna o carregamento da página lento. Para resolver este problema, nós temos algumas opções como alterar o número de postagens na página inicial ou exibir somente os títulos das postagens, mas isso nem sempre cai bem em todos os blogs. A outra alternativa, que será mostrada aqui, é exibir postagens resumidas na página inicial, e que, quando clicadas, mostram o conteúdo completo.

Para exibir postagens resumidas na página inicial, de marcadores e arquivo do seu blog, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.

Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):

</head>

Então cole o seguinte código ANTES:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

Agora vamos fazer 2 substituições no código. Na primeira, encontre o seguinte código:

<div class='post-body'>

E SUBSTITUA por: 

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>

Na última, encontre o seguinte código:

<p><data:post.body/></p>

E SUBSTITUA por: 

<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Leia mais</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Substitua a parte em laranja acima pela texto do link que levará à postagem completa. Em geral utiliza-se “Leia mais” ou “Continue lendo”.

Visualize o template para checar se não houve algum erro e clique em Salvar Modelo. Em cada postagem que você quiser que haja o resumo, deverá incluir uma pequena marcação no código, como será visto a seguir.

Para que todas as novas postagens já venham configuradas para o Hack, acesse o seu Painel do Blogger e selecione Configurações, então clique em Formatação e encontre o item Modelo de Postagem. Agora cole o seguinte código:

Digite aqui o resumo da postagem
<span id="fullpost">
Digite aqui o restante da postagem
</span>

Clique em Salvar Configurações. Agora todo novo post que você criar, iniciará com o código acima. O Hack consiste em esconder tudo o que estiver entre <span id="fullpost"> e </span> (considerando o HTML da postagem). Basta colocar cada parte no lugar certo, que o Hack funcionará sem maiores problemas. Quando não quiser uma postagem resumida, basta apagar todo o código e escrever a postagem normalmente. Para configurar o Hack em postagens já existentes, você deverá editar o HTML manualmente e incluir os dois trechos de código.

Pronto, o Hack já está completamente instalado. Agora é só usá-lo de acordo com a orientação acima.

Se o Hack não funcionar ou causar erros no seu template, utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo. Se quiser retirar o código que aparece em todas as postagens, acesse o seu Painel do Blogger e selecione Configurações, então clique em Formatação e encontre o item Modelo de Postagem. Então é só remover o código que aparece na caixa de texto e Salvar Configurações.

Referências:
UsuárioCompulsivo | Katatempla