Para configurar o resumo automático dos artigos na página inicial no Blogger, adaptei uma técnica publicada recentemente no BloggerBuster, que utiliza o plugin jQuery Expander (GPL) da Biblioteca JavaScript jQuery.Optei por utilizar os posts resumidos com o link “Leia mais…” que leva a página individual dos artigos e não aquela que mostra um resumo expansível na própria página inicial, também disponível no original do BloggerBuster. Antes de começar, acesse a edição do layout do seu template no painel de controle do Blogger e dentro da aba Editar HTML, clique no link Baixar modelo completo para baixar uma cópia de segurança do seu template.Marque a opção Expandir modelos de widgets, localize (Ctrl + F) a tag </head> e imediatamente antes dela cole o seguinte trecho de código:

<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>

O valor destacado em vermelho representa a quantidade de caracteres em formato Html, que será exibida nos resumos dos artigos.Agora vamos substituir o trecho de código original que exibe o loop de postagens no Blogspot, por um código adaptado que vai permitir a exibição dos resumos dos posts na página inicial. Procure pelo seguinte código:

<div class=’post-body entry-content’>

<data:post.body/>

<div style=’clear: both;’/> <!– clear for photos floats –>

</div>

Substitua 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>

OBS: Se você usa o direcionamento por seção nos anúncios do AdSense e veicula publicidade do sistema de afiliados HotWords, o código ficará um pouco diferente:

<b:if cond=’data:blog.pageType != “item”‘>

<div class=’excerpt post-body entry-content’>

<div id=’HOTWordsTxt’ name=’HOTWordsTxt’>

<!– google_ad_section_start –>

<data:post.body/>

<!– google_ad_section_end –>

</div>

<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’>

<div id=’HOTWordsTxt’ name=’HOTWordsTxt’>

<!– google_ad_section_start –>

<data:post.body/>

<!– google_ad_section_end –>

</div>

<div style=’clear: both;’/> <!– clear for photos floats –>

</div>

</b:if>

Depois de fazer as substituições apropriadas, conforme o seu caso, visualize para verificar se não houve nenhum erro. Em caso Positivo, salve e corra para o abraço!

Testado e Aprovado no Blogspot do InterCoisas

Fonte de Tutoriais excelentes: UsuarioCompulsivo.