Personalizar o novo Hack “Leia mais” do Blogger

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:

• Hack “Leia mais” nativo no Blogger – Jump Break
• Informativo: 10 anos de Blogger e Novidades
• Gadget Marcadores do Blogger – Novidades

 

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.

 

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”.

 

 

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:

• Personalizar Links de Navegação do Blogger
• Medidas de um Template do Blogger
• Colocar legenda em Imagens no Blogger

 

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