Personalizar o novo Hack “Leia mais” do Blogger

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

As novidades que surgiram com os 10 anos do serviço Blogger, mesmo que poucas melhoraram e ajudaram muito quem é iniciante ou não conhece muito de códigos HTML. Especialmente em se tratando do Resumo de Postagens, a melhora é significativa, já que tudo pode ser feito com um único clique. Mas o Blogger tem seus padrões de links e cores e você pode querer mudar isso, personalizando o link do “Leia mais” em seus resumos de postagem. Vejamos como fazer isso, que é bem simples fácil. (Caso este novo Hack não esteja funcionando em seu blog, veja como resolver o problema)

 

Para quem ainda não está por dentro das novidades nos serviços do Blogger, especialmente sobre a nova forma de inserir resumos de postagem nos artigos de forma automática e nativa, leia:

 

Mas o padrão do novo link “leia mais” que é inserido, segue as cores e modelos do seu template, em forma de texto. Isso não significa que você não pode fazer mudanças e customizações que sejam mais interessantes para o seu blog e há duas maneira bem práticas para fazer essa personalização.

Se em seu blog o novo recurso não estiver funcionando, veja abaixo como instalar as linhas de código necessárias.

 

Alterando apenas o texto do Link.

O que chamou a atenção no novo hack é que é possível mudar o texto do link no painel do Blogger, junto das demais configurações de postagem. Para ver como fazer, abra o painel do Blogger em sua conta e clique no menu “Layout” ~> “Elementos da página” e onde está “Postagens no Blog”, clique no link “Editar”, conforme ilustra a imagem.

 

editar-postagens-blogger

Indicado pelo seta temos o link “Editar”.

 

Abrirá uma janela com todas as possibilidades de configurações para as postagens de seu blog. Aí há uma segunda opção que trata do texto que aparecerá no link do hack de resumo de postagens do seu blog, denominado “Texto do link da página de postagem”.

 

configurar-postagens-blogger

 

Então escreva nesse local o que quer como texto e salve para ver o resultado em seu blog. Isso altera o texto do link e somente isso, sem precisar mexer no código-fonte de seu blog, com menos risco de erros.

Mas se você quiser colocar uma imagem no lugar do texto ou mesmo compor imagem e texto ao mesmo tempo, como fazemos aqui no [ Ferramentas Blog ], então terá que se arriscar no código HTML – mas nada muito complicado.

 

Alterando o link pelo Código-fonte
E como adicionar o novo Hack em seu Template antigo.

O que o Blogger fez de novo foi adicionar uma nova funcionalidade no código-fonte dos templates que lê a tag “<!– more –>” inserida nos artigos. Mas é possível fazer adaptações nesse modelo padrão.

Lembrando que, sempre que for mexer no código fonte de seu blog, faça uma cópia de segurança, um backup de seu modelo de template.

 

Para ver o novo código, abra no painel do Blogger o menu “Layout” ~> “Editar HTML” e clique em “Expandir modelos de widgets” para ver todas as linhas do código-fonte de seu modelo de template. Agora procure pelas seguintes linhas:

 

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

 

Se não encontrar essas linhas é sinal de que seu blog não está preparado para usar o novo recurso, então procure por:

 

<data:post.body/>

 

Isso tem em todo template e cole as linhas indicadas do novo hack logo ABAIXO disso, que tudo irá funcionar.

 

Bom, mas para alterar o link e adicionar imagens ou compor imagens e texto ao mesmo tempo, bastará modificar um pequeno trecho desse novo código. Localize a parte destacada acima de vermelho e altere como desejar. Lembrando que se modificar aqui manualmente, não poderá fazer as mais uso do painel citado anteriormente.

 

Para adicionar uma imagem:

Substitua por completo o trecho “<data:post.jumpText/>” por um código de imagem:

 

<img src=’URL_da_IMAGEM‘/>

 

Substituindo o texto verde pelo endereço URL da imagem desejada.

(Não sabe como usar imagens no Blogger, leia: ImageSharing – URL de imagens Automaticamente ou Usando Imagens no Blog Blogger)

 

Para adicionar imagem e texto:

O mesmo trecho indicado de vermelho deverá ser substituído por completo por algo como:

 

<img src=’URL_da_IMAGEM‘ style=’vertical-align:middle;border:0’/> Leia mais…

 

Da mesmo forma, indicado de verde deve-se colocar a URL da imagem; e de rosa altere para o texto que quer colocar junto da imagem.

 

Vale lembrar a importância de se fazer tudo isso antes em um blog de testes para evitar erros no seu blog principal e para você ter certeza de que as mudanças vão ficar como você deseja.

 

Outros artigos interessantes:

 

Fonte: Creating ‘After the ju
mp’ summaries
url_icon (ajuda oficial)

.

14 Comentários

  1. Muito boa essa dica! O Blogger tem sido uma plataforma muito interessante de trabalho e os investimentos tem sido notórios. Parabéns pela forma didática de explicação.

    Abraço

    Responder

  2. Olá Marcos!

    Pois olha, até essa dica aí, de por manualmente, não está funcionando direito, pois continua jogando a segunda coluna para baixo da postagem.

    Ninguém mais viu isso? Incrivel! Já testei em outro blog e a mesma coisa. Usei inclusive template nativo do Blogger, o Minima Black.

    Responder

  3. @Barman,

    Outras pessoas relataram a mesma dificuldade que você em vários tipos de templates.
    Ainda não sabemos o que provoca o erro, mas assim que aparecer uma solução avisaremos.

    Responder

    • o problema ocorre por existem dois códigos HTML de hacks no template
      é só vc achar o original e exclui-lo que ficará somente o novo hack
      fiz assim com meu blog e deu certo

      Responder

  4. Ótimo artigo, só aqui que encontrei esta dica! Por isso que sempre que tenho uma dúvida, navego aqui, pois sempre encontro a resposta! Obrigado por criar o Ferramentas Blog, Marcos!

    Responder

  5. Muito obrigado, eu usava uma outra tecnica mais como mudei de layout não funcionava mais, e agora achei finalmente esse e consegui.

    Obrigado!

    Responder

  6. Cara muito FODA !!

    Vlw MESMO!

    Tava procurando a meses como fazer isto, mais sempre dava errado !

    Esse blog ja foi salvo aqui no meus favoritos. Muito Foda ! Vlw

    Responder

  7. Muito bom! Vi este tutorial em uns 6,7 blogs, mas só funcionou o tutorial daqui ;D

    Já sou fiel leitor do Ferramentas Blog!

    Responder

  8. Olá! Muito obrigada pelo esclarecimento sobre o posicionamento do código jump link. Estava apanhando aqui porque o estilo definido no CSS para o jump-link não estava funcionando. Descobri que era porque havia um entre o posicionamento do código do jump link e do . Foi só eu colocar acima dessa div, logo abaixo do que a custumização predefinida no css apareceu ^^

    Responder

Deixe um comentário

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