17 de maio de 2016

Resumo automático das postagens com Leia Mais no Blogger


Artigos muitos extenso na página inicial do blog podem prejudicar a aparência do seu blog, ainda mais postagens com muitas imagens e vídeos. Sem contar que você passa a ter uma taxa de rejeição muito grande pois pode afetar o carregamento do seu blog.

O resumo automático é muito útil e funcional para resumir os posts da sua página inicial e categorias, além de dar um visual muito mais elegante assim aumentando seus visitantes.

Instalando o hack em seu blog

Atenção: Antes de fazer qualquer alteração, faça o backup do seu template.

1- Acesse o Painel do Blogger
2- Vá até Modelo em seu blog desejado e clique em Editar HTML.
3- Tecle CTRL+F e procure por </head> e acima dele cole o seguinte código:

<!-- Javascript Resumo Automático de Postagens-->
<script type='text/javascript'>
summary_noimg = 400;
summary_img = 450;
img_thumb_height = 135;
img_thumb_width = 135;
</script>
<script type='text/javascript'>
//<![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)!=' ' && 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) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Fim Javascript Resumo Automático de Postagens-->
Entenda os trechos destacados:
summary_noimg = 400; - Correspondente a quantidade de caracteres exibidos nas postagens que não possuem imagens.
summary_img = 450; - Corresponde a quantidade de caracteres exibidos nas postagens que possuem imagens.
img_thumb_height = 135; - Corresponde a altura em pixels da miniatura a ser exibida.
img_thumb_width = 135; - Corresponde a largura em pixels da miniatura a ser exibida.

Em vermelho está os valores que você pode alterar. Além dele não altere mais nenhuma parte do código.

4- Agora procure por <data:post.body/>, você encontrará 3 trechos iguais, altere o segundo trecho encontrado. Substitua tudo por:

<!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
(&quot;summary<data:post.id/>&quot;);</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais ››</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim Html Resumo Automático de Postagens-->
O Leia Mais destacado no código você pode alterar por outro texto se quiser, ou colocar uma imagem. Se quiser usar uma imagem ao invés do texto, altere o trecho destacado por:

<img title="Leia Mais" src="LINK-DA-IMAGEM"/> 
Em LINK-DA-IMAGEM, troque pela url da imagem que quer usar como leia mais.

Depois salve as alterações e veja o resultado em seu blog, em caso de erro, restaure o backup feito no começo do tutorial.

Dúvidas? deixe um comentário.

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

24 comentários

Ebrahim so nao percebi o passo 4. Altero tudo como assim?

Olá amigo,

Isso mesmo, você procura por <data:post.body/> no seu código, e no segundo trecho encontrado dele, você seleciona tudo e copia o código informado.

Perceba que o código que passamos no 4º passo já está com o <data:post.body/> inserido, então pode substitui-lo sem problemas.

Em caso de dúvidas estou a disposição.

Abraços

Ebrahim, não consigo encontrar o

Existe outra possibilidade?

Olá, O código que você enviou foi encorporado e sumiu. Para envia-lo, converta ele na nossa página Conversor Adsense e cole aqui pra eu ver o que você não está conseguindo encontrar.

Aguardo.

Não consigo encontrar o código do 4º passo.

Faço a mesma busca com o ctrl+F, mas ao digitar <data..., o blogger já com a cor vermelha e com sinal sonoro, que não pode encontrar este código.

Há outras possibilidades?

Amigo veja se você está procurando na caixa de código do Blogger e não no navegador, assim: http://prntscr.com/b9g9dh

Pois é impossível não ter esse código rs.

Abraços

Caraca!!!! Deu certo mesmo!!! Muito obrigado!!!

Olá Marcos,

Você seguiu passo a passo o tutorial?

Fico no aguardo para te ajudar.
Abs

Olá amigo, muito obrigado !

Você sabe como posso separar esse resumo em caixinhas? Mais ou menos como no seu blog mesmo

No caso do seu blog, eu andei analisando.. para fazer essas caixinhas, vá até o Editor de HTML do template, e acima de ]]></b:skin> cole:
.post-outer {
padding: 0px 20px;
border: 1px solid #eaeaea;
margin-bottom: 10px;
}

Valeu brother! Vou testar, grande abraço!!

Como faço para centralizar o texto do resumo da postagem?

Olá Bela,

Para centralizar tem que ter um certo conhecimento em CSS para utilizar text-align:center

Boa tarde, alterei o tamanho das imagens para 100%, pra não ficarem distorcidas, já que não uso tamanho padrão, gostaria de saber se tem como deixar o texto abaixo da miniatura e não ao lado. Grato, http://www.vaidadesbylaislima.com.br/

Opa, já consegui! de qualquer forma obrigado pelo código!

Como você fez, Jailson? Poderia me ensinar? Valeu!

Olá, boa tarde. Eu estou utilizando o recurso expansão de postagem no próprio editor do blogger. Deu tudo certo, da maneira como quero, não quero que seja fixo, estou fazendo manualmente msm rsrs... Gostaria de colocar somente o [...] ou ... no fim do resumo, mas não consigo, tem como? ps: ADOREI suas dicas.

Deu certo e de primeira ... Muito obrigada!

ola como faço para que abra em nova janela desde ja obrigado


Abrir lista de emoticonFechar lista de emoticon