Veja como instalar o novo modelo.
1. Vá ao Painel do Blogger e escolha a aba “Layout” ~> “Editar HTML” e marque na janela do código-fonte a opção “Expandir modelos de widgets”.
2. Procure pela linha que conste “</head>” e, ANTES dela, cole o seguinte:
<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: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
<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: 280, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
O valor indicado em vermelho determina a quantidade de caracteres, incluindo códigos HTML, que irão aparecer como resumo das postagens. A parte resumida é determinada, então, pela quantidade de caracteres que aparecerão na página inicial do blog.
3. Agora, deve-se substituir o trecho padrão do código que mostra as postagens inteiras na primeira página, pelo código do link para o resumo. Para isso, encontre exatamente esta parte:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Isso já está em seu blog. Basta encontrar.
4. Encontrado o trecho acima no seu código-fonte, troque tudo por:
<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>
<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>
O nome Continue Lendo... pode ser trocado pelo texto que achar mais adequado ou mesmo por uma imagem.
5. Salve e veja o resultado. Automaticamente os seus artigos já aparecerão resumidos na primeira página e com o link para seus leitores clicarem e continuarem lendo.
Se quiser aumentar ou diminuir a quantidade de caracteres que aparecem no resumo, volte ao código-fonte e altere o número em vermelho mostrado acima. Faça testes para determinar o melhor tamanho para o seu caso.
Caso prefira ou, antes de implementar esse modelo, veja o padrão do Blogger para resumo de postagens:
Retirado de: [Ferramentas Blog]
Não consegui fazer funcionar, aparece o Continue Lendo, mas a postagem não reduz. vc tem como me ajudar??
ResponderExcluirParece que o código está com defeito, eu vou tentar achar outro.
ResponderExcluir