Recurso “Leia Mais” do próprio Blogger

Umas das recentes novidades disponibilizadas pelo Blogger, é o resumo de postagens automático como recurso do próprio Blogger. O que antes era necessário inserir um hack para resumir postagens automaticamente, através de códigos javascript no html do template, agora não há mais necessidade.
Com esta novidade, ativar resumo de postagens no blogger ficou mais fácil, mais leve e totalmente customizável, já que agora você decide o que quer que fique oculto nas suas postagens ou não.
Para aqueles que possuem templates novos, este recurso já vem ativado, basta apenas configurá-lo para que ele funcione, mas também é possível ativar o recurso em templates antigos, e é o que vou explicar hoje aqui neste tutorial, como ativar o recurso nos dois casos.
Seguindo os passos corretamente, você ativa o seu “Leia Mais” do blogger, sem complicações!

1º passo – ativar o Jump Break na postagem do Blogger:

Crie sua postagem normalmente, escreva seu texto.
1. Clique no modo “escrever” no editor de postagem para ativar a “toolbar” completa.
2. Clique no ícone “insert jump break” e ative o ‘jump Break’ na postagem, separando a parte que você quer ocultar na home.

(Veja imagem demonstrativa)

2º passo – personalizar a frase no link

Por padrão, a frase do link do resumo é “Mais informações”, mas você pode altera-la para “Leia Mais”, ou “Continue Lendo”. Personalize a frase como preferir.
Acesse o painel do blogger, clique no menu “layout”, em “postagens do blog”, clique no link “editar” e altere a frase na parte indicada na imagem abaixo:

3º passo – Personalizar o link do “Leia Mais”

Personalizar o link do “Leia Mais” que vai aparecer nas postagens, aplicando seus estilos.
Entre no menu “modelo”, clique em “editar html” e procure pela tag ]]></b:skin> 
Cole o seguinte código CSS acima desta tag:

.jump-link {
text-align: right; /*Alinhamento do link "Leia mais"*/
font-size: 20px; /*Tamanho da fonte*/
font-weigth: bold;
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited { /*Estilo do link ativo e visitado*/
color: #fff; /*Edite cor do link*/
text-decoration: none;
}
.jump-link a:hover { /*Estilo do link qdo passa mouse em cima*/
color: #8080cf; /*Edite cor do link*/
text-decoration: none;
}

Caso você utilizar o editor de textos do blogger no modo html e não no modo “escrever”, há uma maneira de ativar seu jump Break também,basta você incluir a tag:
<!– more –>

Antes da parte que você quer que fique oculta na sua postagem.

Atenção: o novo recurso do blogger só está habilitado para templates novos. Se você seguir todos os passos e ainda assim não funcionar, veja abaixo como ativar o recurso em templates antigos.

Ativando o recurso “Leia Mais” em templates antigos:

Vá no menu “modelo, acesse o botão para edição de html do seu blog, marque a caixinha “expandir modelos de widgts” e Procure pela linha:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

E cole o código a seguir, logo ABAIXO dela:

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

Prontinho.Agora é só salvar!
Siga as mesmas orientações postadas no tutorial acima, referentes a aplicação de estilos etc.

Substituir o link “Leia Mais” por uma imagem:

Alguns leitores me perguntaram como substituir o link do “Leia Mais” por uma imagem, tal qual podemos fazer no hack que utiliza script.
É muito simples.
Entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure por:

<data:post.jumpText/>

SUBSTITUA esta tag por esta outra:

<img src='URL-DA-SUA-IMAGEM' />

Visualize, se estiver tudo certinho, salve!

[alerta] Lembrando que, o resumo só será aplicado nas postagens que você ativar o jump break. Caso você queira que o resumo apareça não somente nos posts da home, mas também nas páginas de arquivos e marcadores, você terá que editar todos os seus posts, um a um, manualmente. Será necessário que você ative o jump break em todos os seus artigos![/alerta]