Aprenda como colocar o ‘Leia mais’ automaticamente nas postagens do blogger

Like
Like Love Haha Wow Sad Angry
11

leia mais

No artigo de hoje, vou lhes apresentar uma forma de colocar um resumo nos seus posts, onde o visitante lê um ‘pedaço’ do texto e se quiser ler o resto da matéria ou noticia, tem de clicar em ‘Continue Lendo…’

continue lendo

Para colocar o resumo automático em suas postagens e noticias de seu site ou blog, você deverá adicionar uns códigos HTML em seu tema, por isso, recomendo que você faça um Backup de seu modelo no painel do blogger.

Para fazer o backup, faça o loguin no Blogger, clique em ‘Design’ depois em ‘Editar HTML’ e por fim clique em ‘Baixar modelo completo’. Isso é preciso porque se acontecer algo errado, você restaurar seu tema do jeito que era antes.

Você poderá adicionar o ‘Leia mais’ de forma manual do blogger facilmente. Quando você digitar sua matéria no campo de publicação, coloque o cursor do texto onde você que colocar o ‘Leia mais’ e clique no ícone de uma folha tipo rasgada. Depois clique em ‘Visualizar’ para vê como ficou.

Ainda acho melhor desse jeito que vou ensinar aqui, pois o resumo já aparece automaticamente.

O tamanho do resumo que ficará visível na HOME de seu site e o tamanho das imagens dos artigos é totalmente configurável, vou lhe ensinar como ajeitar essa parte também!

Agora vamos ao passo a passo de como colocar o resumo de seus posts de forma automática e com imagem do lado.

Vai ficar igual o exemplo da imagem acima.

1-      Faça seu loguin no blogger, clique em ‘Design’ e depois clique em ‘Editar HTML’.
2-      Faça o backup de seu tema clicando em ‘Baixar modelo completo’.
3-      Clique em ‘Expandir modelos de widget’, use o atalho CTRL + F e procure por: </head>
4-      Logo acima dele, cole esse código HTML:

<!-- Resumo automático -->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 100;
img_thumb_width = 100;
</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 resumo automático -->

Não precisa mudar nada, caso você queira aumentar ou diminuir o tamanho do resumo do post que vai aparecer na HOME ou o tamanho da imagem, preste atenção abaixo:

Mudando o tamanho do resumo e das imagens que vai ser exibido no HOME:

Summary_noimg – É o número de caracteres do resumo se não tiver nenhuma imagem na postagem. No código acima, está definido por 330 caracteres.

Summary_img – É o número de caracteres do resumo caso a postagem possua alguma imagem. No código acima está definido por 300 caracteres.

Img_thumb_height – É a altura da imagem em pixels. No código acima está definida para ter 100px de altura.

Img_thumb_widthh – É a largura da imagem em pixels. No código acima está definida para ter 100px de largura.

Continuando a configurar os resumos automáticos:

5-      Agora procure por: <data:post.body/>
6-      Substitua o código acima colocando o código abaixo:

<!-- Resumo automático -->
<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='rmlink' style='float:right'><a expr:href='data:post.url'>Continue Lendo...</a>
</span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim resumo automático -->

Onde tem ‘Continue Lendo… ’ no código acima, você pode substituir por qualquer texto como, Leia Mais, Leia a matéria completa… Vai da criatividade de cada um.

Por fim, clique em ‘Visualizar’, se as postagens estiverem sido resumidas, clique em ‘Salvar modelo’.

Caso você ainda não tenha publicado nenhuma postagem em seu site/blog, clique em ‘Salvar modelo’ e crie uma postagem grande para vê se funcionou. Caso tenha dado algo errado, faça o upload do arquivo XML que você baixou no inicio desse artigo e nos conte aqui por comentário para vê onde foi o erro.

Espero que esse Guest Post seja útil para todos vocês!

Este é um guest post escrito por Dieggo Bezerra que administra o Conexão CL.

Like
Like Love Haha Wow Sad Angry
11

Sobre Diego Bezerra

Tenho 18 anos | Fascinado pelo mundo da blogosfera, pretendo um dia me tornar WebDesigner profissional.

Adicionar a favoritos link permanente.

18 Comments

  1. Ótimo recurso! Bem melhor do que ficar usando o separador.

    Ps: Pra quem usa o Blogger e estiver precisando, estou vendendo um template, que tem o botão ”Leia mais” (personalizado), páginas numeradas (ao invés de postagens mas antigas e recentes), e vários outros recursos.

  2. Essa dica é boa, mas prefiro colocar o “Leia Mais” manualmente, assim quando trocar de template e esquecer de colocar esse código as postagens vão ficar sem o “Leia Mais” e deixar o blog muito lento.

    Abraços!!!

  3. Não apareceu no meu cara deu esse erro aki:
    O modelo é inválido porque a tag ‘div’ aparece dentro da tag ‘head’.

    Error 500

    Coloquei os dois codigos um por um pra ver mas tambem nao foi se é pra botar os dois codigos juntos ou outra coisa q nao fiz fala ai e pf resolvi meu problema

  4. como posso fazer isto dentro de um post ou pasta, tipo eu tenho um post que lista todos download com link que leve direto para a pagina que fala sobre o conteúdo.
    Eu queria colocar o resumo nesta postagem ai sempre que tiver um novo download eu só coloco o link na lista

  5. Omg!! Eu tava procurando isso a séculos cara. Obrigadoooooo!! Adoro criar sites ^^

  6. Eu devia ter lembrado antes desse post. Usei tutorial de outro blog e ficou muito ruim, esse aqui ficou perfeito.

    Valeu Dieggo e Celso.

  7. Nossa cara, como procurei por algum post semelhante a este , ja havia tentado de outras formas mas não obtive sucesso, então encontrei este seu post muito bom até que enfim consegui fazer um bom resumo de postagens obrigado! valew.

  8. Posso colocar no webnode também?

    • Olá Brunella,
      No Webnode não tem jeito de fazer isso.

      Abraço!

      • Tudo bem Celso!

        Estava querendo saber a respeito do webnode tbm, não há nehuma possibilidade de colocar imagens no resumo? E se eu criar textos resumidos com imagem na página principal e colocar link para os posts? Vou ter alguma perda nos buscadores?

        At,
        LC Fernandes

        • Olá Luís,
          Não tem como colocar imagens no resumo automaticamente. A solução seria mesmo fazer como você está falando. Desde que o texto não seja muito extenso, não terá problema com os buscadores.

          Abraço!

  9. Parabéns !! Depois de testar trocentas vezes sua dica foi a única q deu certo. Abs e sucesso !!!

  10. Gilvan de Souza

    Gostaria de saber se esse processo funciona em site, principalmente a parte do resumos automáticos já que preciso localizar a parte e acredito que no site não tenha essa extensão.

  11. Você me ajudou bastante, muito obrigada

  12. Oie, eu fiz todo esse procedimento e não consegui, você poderia me ajudar?

  13. Funcionou muito bem esse link. Obrigada! Só gostaria, por favor, de saber como faço para deixar que a foto da postagem fique centralizada na chamada do post. É possível modificar isso no script? Grata!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *