Tutorial - Mostrando Posts Resumidos na Página Inicial

Muitas vezes, ao acessarmos a página inicial de alguns blogs ou web sites, vemos as postagens dispostas de maneira resumida ao longo da página com uma opção "Ler mais" no final de cada uma delas. Esse tipo de layout de página, além de atribuir um aspecto profissional ao site também facilita a navegação do visitante diminuindo a nessidade de rolar a página e promovendo uma maior interação do visitante aumentando, assim, o número de "page views".

Vou mostrar à você, agora, como é possível melhorar o aspécto da Página Inicial de um blog, criando um link "Ler mais" no final dos posts.

Antes de começar você deve criar um backup do seu template atual para que, no caso de ocorrer algum erro, possa ser possível voltar ao estado anterior do template. Para isso, basta ir na aba "Layout" e depois em "Editar HTML" e clique em "Baixar Modelo Completo" e então salve uma cópia de seu template atual.

Para começar, ainda na página "Editar HTML", marque a caixa "Expandir modelos de widgets" e em seguida abra a caixa de pesquisa dentro do código, digitando "Ctrl+F" e localize a tag </head> e então cole o código à seguir imediatamente antes dessa tag.:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 260, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});         

});
</script>


Note na segunda metade desse código que você atribuiu, onde está escrito "slicePoint: 260", esse é o valor da quantidade de caractéres HTML a serem exibidos nos posts(resumidos), podendo-se alterá-lo de acordo com a sua preferência.

Agora a segunda e última parte. Você deverá adaptar o seu código atual com o formato usado pelo Blogger, tornando possível assim, exibir a postagem de maneira resumida na página. Para isso, faça o seguinte:

digite novamente "Ctrl+F" e encontre o seguinte trecho do código


<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

 e então, com atenção, subistitua por esse

                                       
<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<p><a expr:href='data:post.url'>Continue lendo...</a></p>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Para finalizar, clique em "Salvar", e teste o resultado.

Comentários ou dúvidas, postem