Resumo de post e link Leia mais, no BlogSpot

Vou mostrar como colocar resumo de postagem no BlogSpot, e o link Leia mais, sem precisar usar javascript, essa é uma das novidades do blogger, e é muito boa pois deixa mais rápida a página inicial e as outras que acumulam mais de um post, como páginas de marcadores(label, categoria) e páginas de arquivo.

Infelizmente alguns blogs terão que adicionar um pequeno código no Html, para que o link apareça na Home(Página inicial) e outras, você pode ter uma noção de como fica em marcadores o resumo de post ou Blog.Foitestado.com, aqui

Atualização importante 2013, essa postagem está desatualizada após remoção da antiga interface do blogger:
Para saber como adicionar o link "Leia mais" no post, clique aqui
Para saber como trocar o nome do link "Leia Mais", clique aqui

Vantagens

A grande vantagem é que esse tipo de resumo(sinopse, súmula) de postagem leva em relação aos demais é que o restante do post não fica naquela página onde estão os resumos.
A maioria dos outros tipos de sinopse, por mais que você não veja, levam toda a postagem para a página inicial, e escondem parte com um script, deixando ela pesada. Você pode constatar isso exibindo o código-fonte da página inicial de um blogspot que usa outro tipo de post resumido na Home, o texto e as imagens estão lá, apenas estão escondidas e pesam na hora de acessá-la. Seria como pegar um livro e encapar um pedaço e mostrar o título e uma introdução, o peso dele continua, pois o resto dele está ali.
Essa nova sinopse do blogger é diferente, ele coloca apenas o título e um pedaço dos posts na Home e no código-fonte também, o restante fica apenas no próprio post, isso deixa mais leve e acelera o carregamento da Home e outras páginas com resumo do post.

A. Adicionar a quebra no post e local do link

Depois de ter colocado parte do texto(introdução) Você pode adicionar um código ou usar o novo editor que faz isso, isso vai dividir o post e criar um link após a introdução.

Quem usa o novo editor de post do blogger, basta clicar no botão inserir jump break. Veja na imagem.
Clique para aumentar


Ou também pode optar por adicionar esse pequeno código <!-- more --> na parte Editar Html da postagem, após ter feito a introdução do post, tente descrever a postagem em algumas linhas, de forma a tornar o inicio do post atrativo.

B. Personalizar ou mudar nome do link

Será criado um link em cada post na Home e outras páginas com mais de um post, esse link ficará abaixo da introdução(onde você adicionou o código) e tem um nome próprio que é: Mais informações, e esse nome pode ser mudado da seguinte forma:
1. Faça logon no blogger.com
2. Procure e clique em Layout Design (Design substituiu a palavra Layout. Atualização:2010)
3. Você será direcionado para a Elementos da página, se não clique sobre.
4. Em Postagens no blog clique no link Editar
5. Na página que abrir, encontre Texto do link da página de postagem, e você verá um campo com a frase Mais informações ou read more,

   Você pode substituir essa frase por Leia mais... Continue lendo... ou o que achar mais adequado.

6. Após fazer alterações clique em SALVAR
7. Na janela que ficou aberta clique em SALVAR para garantir que as mudanças entrem em vigor.
Clique para aumentar

C. Adicionar o código no Html do blogger

Atenção: Nem todos os blogs precisam disso, por isso é bom fazer um post e ver se o link leia mais apareceu na Home, mas, se você fez um post com essa função, ativou ela como mostrado acima, e não funcionou, precisa verificar e, se não houver, adicionar um código:

• Acesse o blogger.com
• Clique em Layout Design (Design substituiu a palavra Layout. Atualização:2010)
• Clique em Editar HTML
• Faça um backup do html do blogger(baixar modelo completo)
• Marque a opção Expandir modelos de widgets
• Apenas localize esse código:

  <data:post.body/>

  Para localizar, tente pressionar juntas as teclas de atalho Ctrl F

• E adicione após/abaixo dele esse código:
  <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
• Depois de adicionar o código clique em SALVAR MODELO
Para evitar o link duplicado, observe no seu HTML se o código acima não existe, se o link 'Leia mais' ou 'Continue lendo', ou o que você escolher aparecer duas vezes no mesmo post(da Home), isso significa que o código acima já existia no seu HTML e mesmo assim você adicionou ele, se ocorreu, deve seguir os mesmos passos acima para remover ele, e, com cuidado para não excluir outros caracteres ou deixar partes de código dele sobrando.

D. Mudar a aparência do link Leia mais... no blogger com Css

Você pode dar uma aparência diferente a esse link, adicionando o código no Css do Html de seu blogger:

.jump-link a{color:red; font-size:120%;}
.jump-link a:hover{color:green;}

O código Css acima pode ser adicionado antes/acima desse código:
]]></b:skin> Clique aqui e veja imagem

Você pode ou deve mudar o estilo, a primeira linha define cor de fonte vermelha do link, color:red; e tamanho da fonte 120% e a segunda linha é para quando a pessoa passar o mouse, vai mudar a cor da fonte para verde, color:green;

Entre-chaves{} estão os estilos para o link Leia mais... Você pode escolher uma cor em inglês, ou estilos de fontes Css que quiser, isso para dar mais destaque a esse link.

Imagem no lugar do link "leia mais"

Você também pode usar uma imagem no lugar do link, basta substituir o código:
<data:post.jumpText/>

Por um código de imagem parecido com:
<img src='ENDEREÇO DA IMAGEM'/>

Porém você deve usar um endereço de imagem no lugar onde coloquei ENDEREÇO DA IMAGEM

Para conseguir o endereço de uma imagem da web basta clicar sobre ela com o botão direito do mouse e clicar em Propriedade ou Copiar endereço da imagem, se a imagem não estiver na web, pode postar ela em seu blog...

E. Problemas com inserir jump break do blogger

No novo editor do blogger tem um botão para inserir esse código no post, mas, dependendo do local onde o código é inserido ele pode fazer a lateral do BlogSpot ficar abaixo das postagens, isso não acontece na página individual do post, apenas nas outras como Home.

A melhor forma de saber se deu algum erro é: Após criar um post você pode visitar a página inicial de seu blog para ver se não ocorreu esse problema.

Ou pode ver no momento de postar, em Editar Html do post verifique se o código <!-- more --> não está dentro de uma DIV, você deve ter uma noção que as DIVs são inseridas no post do blogger quando coloca-se um tipo de formatação ou efeito para um trecho de texto.

No Html do post a DIV começa mais ou menos assim:
<div style="color:blue"> Você pode observar se o código <!-- more --> não está antes de terminar/fechar uma div, assim </div>
Então, esse trecho acima se estivesse no Html de seu post causaria o problema da lateral não ficar no lado do post.

Você pode evitar esse problema, não adicionado efeito ou formatação no inicio do post, principalmente antes da quebra do post, ou seja, antes/acima do código <!-- more -->

• Colocar e mudar estilo da data no post do BlogSpot
• Adicionar link na postagem do BlogSpot
• Colocar links na lateral do BlogSpot
• Adicionar lista de blogs favoritos no BlogSpot
• Backup das postagens do BlogSpot
• widget flash: resumo dos post do blog