Hack "Leia Mais" com jQuery

Exibir apenas uma pequena parte do post deixando o restante oculto na página inicial do blog é um recurso muito útil para quem deseja ter um layout estilo magazine. Pode ser uma ótima idéia para blogueiros que postam muito e cujos posts sejam grandes.

Existem alguns bons exemplos de como obter este efeito em blogs hospedados no Blogger, por exemplo, este hack no Templates Novo Blogger e este outro no Usuário Compulsivo.

O hack que apresento agora é uma alternativa para os adeptos do jQuery, um framework (biblioteca) que vem sendo largamente utilizado. Sua maior característica é facilitar a implementação de códigos javascript. Se você não usa ou nem sabe do que eu estou falando pode ser a hora certa para rever seus conceitos e passar a usufruir dos imensos recursos dessa biblioteca javascript.

Já faz algum tempo que uso jQuery em meus projetos, mas faz pouco que comecei a implementar seus recursos no blog. Espero sinceramente que possa ser útil a outros usuários como está sendo para mim.

Este é o meu primeiro tutorial. Conto com a compreensão dos leitores para eventuais falhas.

Vale lembrar que é sempre bom aplicar alterações no código em um blog de testes antes de passá-lo para o blog oficial. Caso não tenha um blog de testes convêm salvar uma cópia do seu blog antes de qualquer alteração. Recado dado vamos ao tuto.


Passo 1


Obter a biblioteca jQuery. O arquivo pode ser baixado no site oficial. Após deverá ser hospedado em um servidor de arquivos que suporte extensões .js como por exemplo o SkyDrive que você acessa diretamente do seu Hotmail. Arquivo hospedado é o momento de linkar no blog. Para isso copie e cole abaixo da tag </b:skin> o seguinte código:

<script src='http://ENDEREÇO-DO-ARQUIVO-NO-SERVIDOR/NOME-DO-ARQUIVO.js' type='text/javascript'/>

Onde ENDEREÇO-DO-ARQUIVO-NO-SERVIDOR é o endereço do arquivo no servidor (dãããã);
e NOME-DO-ARQUIVO.js é ...

Se não quiser baixar o arquivo, existe ainda a opção de linkar diretamente do site oficial para o seu blog. Para isso copie e cole abaixo da tag </b:skin> o seguinte código:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

Passo 2


Logo após o código acima cole o código a seguir e salve o template.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
$(document).ready(function() {
$('.fullpost').show();
});
</script>
</b:if>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
$(document).ready(function() {
$('.showlink').hide();
$('.fullpost').siblings('.showlink').show();
});
</script>
</b:if>

Passo 3


Clique em Expandir modelos de widgets e procure o trecho de código a seguir:

<div class='post-body'>

- Observe que este código poderá variar de acordo com o template do seu blog e caso já tenha sido modificado anteriormente poderá estar bem diferente.
- O importante é saber que a alteração deste passo ocorre na parte do blog que exibe as postagens.

Substitua o texto encontrado por este:

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<data:post.body/>
<span id='showlink'>
<a expr:href='data:post.url'>Leia mais...</a>
</span>
</b:if>
</div>

Passo 4


Procure pelo código </b:skin>. Copie e cole antes dele a regra CSS abaixo:

.fullpost {
display:none;
}

Salve o template.

Finalizando, clique na aba Configurações, clique em formatação e vá para o final da página. Em modelo de postagem cole o código abaixo:

Pequeno trecho da postagem aqui (visualizado na página inicial)
<span class='fullpost'>
Restante da postagem aqui (visualizado na página individual)
</span>

Nas postagens que você não resumirá basta apagar o código acima quando estiver escrevendo seu post. Neste caso o link "Leia mais" também não será visualizado.