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,
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 1Obter 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 2Logo 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 3Clique 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 4Procure 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.
