Resumo dos posts na página Inicio do Blogger

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='https://sites.google.com/site/shopilyx/Destaques/jquery-1.2.3.pack.js' type='text/javascript'/>

<script language='javascript' src='https://sites.google.com/site/shopilyx/Destaques/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 verde 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:

Vocês terão que utilizar 2 scripts!

Cada um de vocês que utiliza este recurso, terá que hospedar seus próprios arquivos JavaScript e alterar as linhas relativas a eles no código do template.

Para começar baixe este arquivo compactado, ele contém os 2 scripts que devem ser hospedados num host de sua preferência e que permita acesso direto a eles.

Você pode usar o Google Sites, hospedando cada um dos arquivos como um anexo (attachment) de página e utilizar o endereço do link para download do arquivo, sem o sufixo ?attredirects=0&d=1, ex:

Este é um exemplo de link para download de anexos no Google Sites:

https://sites.google.com/site/shopilyx/Destaques/jquery-1.2.3.pack.js?attredirects=0&d=1

Você deve utilizar apenas a parte destacada em vermelho, ignorando o restante da URL.

Depois de hospedar os dois arquivos, anote a URL de acesso direto de cada um deles e substitua no código do seu template, conforme indicado abaixo:

Substitua o link em vermelho pelo seu link.

<script language='javascript' src='https://sites.google.com/site/shopilyx/Destaques/jquery-1.2.3.pack.js' type='text/javascript'/>

<script language='javascript' src='https://sites.google.com/site/shopilyx/Destaques/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>

Fonte: http://www.compulsivo.com.br