Resumo de postagem automático com imagem sem JavaScript para Blogger

Blogger, Dicas, Postagens
68
Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Acredito que você já observou que a maioria dos blogs mostram somente um resumo da postagem na página inicial, e no final aparece escrito “Leia Mais”, ou “Continue Lendo”, e quando clicamos em “Leia mais” ou “Continue lendo” aparece a postagem completa. Vamos mostrar como você pode colocar isso em todos os artigos do seu Blog de forma automática.

✅ Canal no Youtube | Inscreva-se AGORA ✅

Veja o exemplo abaixo de como fica, usando uma imagem junto ao texto e o título do artigo:

Hack Leia Mais

Eu particularmente acho que dá uma estética melhor á pagina inicial, evitando que a pagina inicial fique extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Características do Hack “Leia Mais”

– Sem javascript
– Carregamento rápido
– Amigável para motor de busca
– Bom para SEO
– Funciona em todos browser, incluindo Internet Explorer 6

Com estes recurso suas postagens serão resumidas automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem.

Passo 1. Aplicar estilos CSS:

Entre no modo → ‘editar html’ do seu template (não precisa clicar em ‘expandir modelo de widget’) e procure pela tag:

]]>

Passo 2. Cole esse código que segue imediatamente ANTES dessa tag:

.post-thumbnail{float:left;margin-right:20px} // Para imagem a esquerda
ou
.post-thumbnail{float:right;margin-left:20px} // Para imagem a direita

Passo 3. Clique em ‘expandir modelos de widgets’ e procure por:

<data:post.body/>

Passo 4. Substitua o código acima pelo código abaixo:

Escolha uma das opções de modelo que melhor funcione no seu Blog.

1. Resumo de Postagem Automático com imagens na Página Inicial

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Resumo de Postagem Automático com imagens na Página Inicial para posts sem imagem

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Salve o modelo e veja o resultado em seu blog abrindo a página principal. Isso deve aplicar a mudança em todo o seu Blog. Pode ser que alguns templates não aceitem essa mudança, por isso é importante fazer testes antes de aplicar em seu Blog principal.

.

68 Comentários

    • Olha, não entendi muito bem o que você quer fazer.
      Mas, se for alterar o texto “Leia mais” ou exclui-lo ou colocar pontinhos no lugar do texto; é simples:

      Entre na opção “Layout” em seguida clique na opção “Postagens no blog” na janela aberta observe o seguinte texto: “Texto do link da página de postagem” Faça a alteração que desejar.

      Responder

    • Eu entendi! Pegue a parte do texto que é “data:post.jumpText” e altere por “img src=’URL DA IMAGEM’/” … Pronto, com isso subistituirá o texto pela imagem. (observação, no lugar das aspas dos codigos acima coloque os <>).

      Responder

  4. Olá, obrigado pelo tuto; funcionou bem aqui. Só gostaria de saber como alterar o tamanho do texto exibido na home. Queria mostrar um bloco maior de texto (um parágrafo) e não ´so uma frase.

    Agradeço se puderem ajudar 🙂

    Responder

  6. Show de bola! Esse foi o primeiro (de muitos que testei) que deu certo no meu site. Mas tô com o mesmo problema do companheiro aí de cima. O resumo é um super resumo. Existe a possibilidade de aumentar isso?

    Obrigado pela dica!

    Responder

  12. Muito bom esse post Kemuel!!

    Só me surgiu uma dúvida. A imagem que vai para a index está totalmente sem resolução.

    Tem como eu inserir uma imagem para ir para o resumo, sem que ela apareça no post? Ou, se não, que a imagem não perca a resolução?

    Obrigado e novamente parabéns!

    Responder

  14. Assim como alguns amigos acima, gostaria de saber como aumentar o numero de caracteres, pois o código funcionou perfeitamente. Ou será que não tem como, já que não houve nenhuma resposta até agora!!!

    Responder

  16. Ótima postagem parabéns Kemuel, estou com uma dúvida, como posso colocar o leia mais para direita e não debaixo da descrição, assim como está na imagem que ilustra o post, e se tem como ter um numero X de letras para o snippet.
    Obrigado.

    Responder

    • Para colocar o Leia mais na direita acrescente o codigo abaixo antes de:

      ]]>

      .jump-link {text-align:right;float:right;margin-top:0px;margin-right: 0px;}

      Não tem como aumentar o tamanho do resumo ainda. Valeu!

      Responder

  39. Que meleca!

    Este tutorial funcionou em três de meus blogs.

    Fiz o mesmo em um quarto e não funciona de jeito nenhum! Revisei, revisei e revisei. Nada!

    Que meleca eu devo ter feito para “parar de funcionar”?

    Alguém se habilita a me ajudar?

    Responder

  43. Fiz em meu blog, deu certo, ok! Ótimo! Porém, na página inicial aparecem somente 3 postagens, ou as postagens que fiz no dia, isso muda conforme novas postagens ou tem que mudar alguma configuração para que apareça mais postagens na página inicial?

    Responder

  44. Não sei se alguém teve o mesmo problema, mas pelo sim, pelo não. Na verdade duas coisas atrapalharam

    1ª Caracteres errados:
    ok, essa é meio comum, mas deixei passar. Copiei daqui direto para o blog e os caracteres foram errados. Então copiei daqui para o bloco de notas e só depois para o blog, ai foi ok.

    2ª Mais de uma tag :
    Testei em vários modelos (inclusive padrão do blogger) e nada de funcionar. Ai percebi que eles tinham mais de uma tag e copiei o mesmo código em todas elas. Ai funcionou. Será que sobrecarreguei o blog? Uma só é suficiente?

    De qualquer forma, agora foi!

    Obrigada pelo tuto, o melhor que encontrei!!

    Responder

  46. Olá Marcos, tudo bem? Eu tenho uma dúvida: eu gostaria de deixar a página inicial com os posts completos e colocar os resumos nas outras páginas do blog, as páginas de resultado de busca. Isso é possível? Aguardo sua resposta. Obrigada.

    Responder

  47. Muito obirgado por esse tutorial. Você é o melhor. Procurei no limbo um tutorial que funcionasse para o meu blog, esse foi o único !!! Abraços 🙂

    Responder

  49. Olá Marcos, gostaria de saber, como faz para colocar uma imagem no resumo do post, Por exemplo: Quando alguém compartilha um artigo vai aparecer uma foto no artigo. Eu queria trocar esta foto no Blogger.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.