"Leia Mais" Resumo de Postagem Automático
Autor: Smart Comunicação e Design | Publicado: 2012-02-02T20:18:00-02:00



A maioria dos blog aparecem somente um resumo da postagem na página inicial, onde no final aparece escrito "Leia Mais", ou "Continue Lendo", e quando clicamos aparece a postagem completa.Eu uso aqui no meu blog,e particularmente acho que dá uma estética melhor á pagina inicial, evitando que a home fica extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Hoje vou ensinar como incluir este 'hack' no seu blog.
Com estes recurso suas postagens se resumirão automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem, juntamente com uma miniatura da imagem utilizada no post.

Antes de tudo faça um&nbsp;backup do seu Template&nbsp;para evitar transtornos, se algo sair errado. 


ATUALIZAÇÕES:1) Muitos leitores relataram dificuldades em hospedar o script para Hack "Leia Mais" em um servidor externo ao Blogger.Para evitar problemas na dependência com algum servidor externo, é preferível que instale o script diretamente no template, razão pela qual este artigo foi atualizado, com a disponibilização do script na integra para instalçao diretamente no HTML do template.2) Atualizei o código do 2º passo, tendo em vista a implementação de Páginas Estáticas no blogger. No código a seguir, o hack "Leia Mais" não se aplicará nas Páginas Estáticas, as postagens só aparecerão resumidas na página inicial,marcadores e arquivos. 





1º passo - incluir o script no template:
Entre no modo → 'editar html' do seu template(não precisa clicar em 'expandir modelo de widget') e procure pela tag  e cole esse código abaixo ANTES dessa tag: 

 <!-- JavaScript Resumo do Post --> 
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
 
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }
strx =  s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' &amp;&amp; strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '';
summ = summary_img;
} else {
imgtag = '

';
summ = summary_img;
}}var summary = imgtag + '

' + removeHtmlTag(div.innerHTML,summ) + '';
div.innerHTML = summary;}
//]]>
 <!-- JavaScript Resumo do Post - Fim--> 






Caso tenha dificuldades em copiar o código acima, copie o conteúdo&nbsp;deste arquivo.txt&nbsp;e cole-o ANTES da tag .


Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:
Em&nbsp;summary_noimg&nbsp;→ é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.
summary_img&nbsp;→ Indique o número de caracteres do resumo para o texto que contiver imagens.

É neste trecho que você vai definir o tamanho que você quer que as imagens do resume tenham:
img_thumb_height&nbsp;→ Indique a altura da imagem
img_thumb_width&nbsp;→ Indique a largura da imagem


Visualize e Salve!
Agora vamos a 2ª etapa.
2º passo - edição no html:
Volte á aba 'design' → 'Editar html', clique em 'expandir modelos de widgets' e procure por: 


   <!-- clear for photos floats --> 

Apague tudo e substitua por: 


   
createSummaryAndThumb(&quot;summary&quot;);
 Leia Mais ►       <!-- clear for photos floats --> 


A palavra "Leia Mais" se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e direcionado à página do post completo. É neste espaço que você coloca o texto que preferir (Ex.Continue Lendo,Ler Todo Artigo, Leia Mais, Ver Conteudo etc).