Este é um dos Hacks para Blogger – Blogspot mais pedidos de todos os tempos: Posts Resumidos na Home Page do Blog, com link de “Continue Lendo” ou “Leia Mais” no final do resumo.
Existem outros hacks que cumprem a mesma função, de diferentes formas; mas depois de vários testes, este é o melhor, na minha opinião. Ele permite que você resuma somente os posts que desejar, como você já deve ter visto por aqui.
Vamos ao Hack! Preste atenção, pois ele está dividido em 3 partes:
I – Configurando o script
II – Modificando o Template
III – Configurando o Editor do Blogger
Na Primeira Parte, você deve escolher entre duas opções: inserir o script diretamente no seu template, ou hospedar o script externamente. Siga somente as instruções para a opção que você escolheu!
A Segunda Parte e a Terceira Parte se aplicam na íntegra à todos os casos, sem importar qual opção você escolheu na Primeira parte.
I – Primeira Parte – Configurando o Script
Devido aos problemas recentes com os scripts dos hacks, vou explicar aqui duas formas de implementar o “Leia Mais”: inserindo o script diretamente no seu template, ou hospedando o script externamente.
1º Opção – Inserindo o script diretamente no seu template
1 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.
2 - Procure a tag </head>.
3 - Copie TODO o código mostrado nesta página e cole-o logo ANTES da tag </head>.
4 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.
Agora, você deve passar à II – Segunda Parte – Modificando o Template
2º Opção – Hospedando o script externamente
Por favor, só escolha esta opção se você tem alguma idéia de como fazer isto. Se este método lhe parecer muito complicado, é melhor optar pela 1º opção, e pronto.
1 - Faça o download do script: clique neste link com o botão direito do mouse, e salve o arquivo LeiaMais.txt no seu computador.
2 - Mude a extensão do arquivo de txt para js, no próprio Notepad. Simplesmente abra o arquivo, selecione “Guardar como” e substitua LeiaMais.txt por LeiaMais.js
3 - Faça o upload do arquivo em sua conta. Uma opção grátis para hospedar seus arquivos é o Google Pages.
4 - Coloque a URL do seu script no seguinte código:
<script src=’Insira aqui a URL do script’ type=’text/javascript’/>
Por exemplo: se eu estivesse hospedando o script na minha conta do Google pages, a URL seria:
<script src=’http://nospheratt.googlepages.com/LeiaMais.js’ type=’text/javascript’/>
5 - Entre na sua conta do Blogger. Como sempre, faça antes um backup do seu template! Na tab “Editar HTML”, clique em “Baixar modelo completo”, e salve uma cópia do template no seu computador.
6 - Procure a tag </head>.
7 - Copie o código do script, com sua URL, e cole-o logo ANTES da tag </head>.
8 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.
Agora, você deve passar à II – Segunda Parte – Modificando o Template
II – Segunda Parte – Modificando o Template
Tanto se você escolheu inserir o script no template, como se preferiu hospedá-lo externamente, deve seguir as seguintes instruções:
1 - Ainda em “Editar HTML”, clique na caixinha “Expandir Modelos de Widgets”
2 - Procure o seguinte trecho de código:
<div class='post-body'>
<p><data:post.body/></p>
3 – Substitua essas duas linhas pelo seguinte código:
<div class='post-body' expr:id='"post-" + data:post.id' >Leia Mais…
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'></a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
4 - O texto em vermelho – Leia Mais… – pode ser substituído pelo texto de sua preferência.
5 - Dê um preview, veja se está tudo certinho, e salve o template. A esta altura, você ainda não deveria ver nenhuma mudança no visual do blog.
III – Terceira Parte – Configurando o Editor do Blogger
1 - Ainda na sua conta do Blogger, vá até Configurações -> Formatação.
2 - Bem em baixo, Você verá a caixa vazia do Modelo de postagem. Copie e cole as seguintes linhas dentro dessa caixa:
Digite aqui o resumo do post
<span id="fullpost">
Digite aqui o resto do post
</span>
É melhor copiar e colar este código, para não correr o risco de inserir espaços ou caracteres que impediriam o hack de funcionar. Salve as configurações.
3 - Agora, quando você entrar em “Criar Postagem”, a caixa mostrará onde você deve digitar o resumo do post (a parte que você deseja que apareça na Home, antes do link “Leia Mais…”) e onde digitar o resto do post (a parte que aparecerá somente na página do post).
Atenção: as tags <span id="fullpost"> e </span> devem permanecer intactas para que o hack funcione! Antes de publicar seu post, certifique-se de que elas não foram alteradas.
E se eu não quiser resumir um post?
Simplesmente, quando for escrever o post, delete completamente o texto que aparece na caixa do texto da postagem. Não se preocupe; cada vez que você for criar um novo post, o texto que indica onde digitar o resumo e o resto do post reaparecerá.
Você escolhe se quer resumir o post ou não, e o link de Leia Mais só aparecerá nos posts que foram divididos com o <span id=”fullpost”>. Não é genial? 
Observação: o Ramani avisa no post original do hack que se você clicar no link “Postagens Mais Antigas”, é possível que o link “Leia Mais” apareça mesmo em posts antigos que não foram divididos seguindo o hack. Ele explica que este é um problema conhecido, para o qual ele ainda não encontrou solução.
Eu acho que este é um preço pequeno a pagar, para ter seus posts resumidos/com sumário e link “Leia Mais” no Blogspot. Eu mesma não vi esse problema aqui no Blogando, pelo menos ainda. Mas a decisão é sua, é claro.
Observação 2: Se você usar este hack, lembre-se de incluir um link ao Hackosphere (o blog do autor do hack) na sua sidebar ou num post. É o mínimo que podemos fazer para agradecer, não é mesmo?
Observação 3: Obrigada ao Felipe Xavier por descobrir qual era o problema com o código!
Compare Preços de:
Blog: Comunicação e Escrita Íntima na Internet
Blogs! Seja Um Editor na Era Digital
Alavancando Negócios na Internet
E mais: Acessórios para Internet, Ferramentas, DVD, Filmes, Celulares, Notebooks, Câmeras, Jogos, Wii, PS3 no JáCotei
Amigo,
Boa Tarde,
Não consigo colocar estes códigos no meu blog, não encontro esta tag exatamente igual no código html para substituí-las e preciso muito deste recurso porque publico textos muito grandes.
Pode me ajudar ?
Obrigado !
e parabéns pela matéria, eu não consegui mas está ótima !!
Um abraço !
olá,
Fiz exatamente como está na descrição. Só que agora meus posts não aparecem no site.
Como resolver o problema?
Ao tentar aplicar o hack aparece a segunte mensagem
Continuação: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “src”.
Olá..meu diz isso:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.
Eu troco o que vc pede…mas o meu é assim:
qual o problema?
Este tutorial esta as moscas, com todo respeito é melhor atualizar, eu sei fazer esta mesma coisa apenas usando XML do proprio BLOGGER e CSS não precisa de mais nada …
^^’
Olá Nospheratt!
Que a paz do Senhor esteja com você e com os seus.
Tentei colocar “leia mais” seguindo os passos conforme você disse e deu a seguinte mensagem:
Não foi possível visualizar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.
Peço por gentileza e na medida do seu possível, mandar o codigo para o email que esta no seu cadastro. Na verdade, acho que não consegui encontrar o código.
Atenciosamente.
Muito obrigado pela dica, já estou usando no meu blog.
Eu não sei se o Felipe Xavier informou isso, mas na segunda parte há um erro devido as aspas “” e apóstrofos ”; no original, eles estão diferentes do padrão do Blogger, por isso surge a mensagem:
“Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.”
Mas se corrigir esses elementos, como abaixo, o Blogger aceita.
#fullpost{display:inline;}
#fullpost{display:none;}
Leia Mais…
checkFull(“post-” + “”);
É preciso saber também que ao alterar o “Leia Mais…”, o Blogger transforma o código em número. Daí dá erro. Sugestão: melhor deixar o “Leia mais…”.
Se você não se importa, vou postar esse assunto no Aabaca com um link para cá, tudo bem?
Muito obrigado pelo tutorial.
Olá Nospheratt, tudo bem??
Estou tentando implementar esse código em meu blog, porém logo após eu copiar o código que é colado antes de quando vou visualizar o resultado para avançar ao próximo passo me dá esse erro: O modelo é inválido porque a tag ‘div’ aparece dentro da tag ‘head’.
Como posso resolver esse problema, me ajude por favor!!!
Não atino com a formatação do Ler Mais… para o Rounders 3. Dá para dar uma ajudinha????
Thks
Muitíssimo obrigado.
à todos recomendo para digitar toda sua postagem anteriormente no Dreamweaver, depois copia o código em “editar htmal”, lembrando de não apagar o span lá…
assim com certeza não vai dar bug na hora de aparecer o resumo.
visitem meu blog! não tem quase nada ainda, mas um comentáriozinho e uma palavra de incentivo são sempre bem-vidos!
muito obrigado Nospheratt… salvou a galera ae
bjos
Eu fiz e deu tudo certo, até o passo 3. Menos o passo 2 =P
O trecho que deve ser substituído não está um em baixo do outro. Está separado com mais coisas no meio:
Eu tentei substituir tudo, tentei substituir só as duas linhas que deviam ser substituídas, tentei colar o código duas vezes, enfim.
Só aparece isso:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.
Não sei se consegui explicar direito, mas eu sei que o problema é simples.
É só pq as duas linhas tem mais coisas no meio. Alguém pode me ajudar?
Obrigado =)
Olá, excelente tutorial, mas como todos acima apareceu um problema bem de leve!! hauhau
Eu optei pela primeira maneira de colocar o “Leia Mais” nas postagens…copiei e colei acima do /head..
porém eu gostaria de mudar o texto que atualmente aparece como “Leia mais?”….gostaria de deixar maior e em negrito, onde posso editar isso?
no código dado não tem nenhum lugar que esta escrito essas palavras para eu poder modificar, poderia me ajudar??
obrigado!!
Simplesmente PERFEITO!!!
Ou melhor, quase: os links de “Leia Mais” aparecem nas postagens sem a divisão, mas isso não influencia em absolutamente nada.
Como o meu layout é um pouco baseado em tabelas (é, infelizmente tive que usar este artifício para não ter que fazer vários hacks cross-browser para as colunas aparecerem nos locais certos – e como eu também uso muito o plugin code-snippet do WLW em outro blog meu, dá um chabu com outros divs…) não tive problemas em justificar meus textos, pois fiz isso na própria tag da célula que abriga o post
E as imagens também ficam centralizadas de boa (eu faço a centralização com div em 100% e text-align:center).
olá
eu não consegui encontrar o
você pode me ajudar , plz
opa não apareceu hehehe
— div class=’post-body’ —
Excelente tutorial. Mas estou com um problema. Eu consigo colocar o leia mais e tudo isso. Mas quando a pessoa vai ao leia mais aparece todos o texto, incluindo o que eu já tinha colocado na pagina principal. E segundo o que o relatório do Google diz, eles consideram isto uma repetição de texto, o que faz com que eu não seja muito bem visto por eles. Como posso evitar essa repetição?abraço
Exelente tutorial, gostei muito, eu tive alguns problemas, mas o motivo eram as aspas, então pessoal, tomem cuidado ao copiar e colar, pois quando vc copia e vai colar, vai ficar um acento ao invés de aspa simples… prestem atenção nisso que concerteza não terão mais erros.
Alguém ainda pode ajudar? Puxa vida, no meu template não tem o código:
Nem parecido o_o
Tem como eu colocá-lo lá?
Alguém poderia ajudar?
Beijos.
Vou começar a remodelar meu blog e achei lugar certo para me guiar, parabéns muito bom seu site.
Olá, eu consegui até a parte 3.
Aí, quando eu insiro a postagem, a divisão entre as duas “partes” não funciona.
Fica assim:
Digite aqui o resumo do post
tteste teste teste teste teste teste teste teste este teste teste teste teste teste teste teste teste teste teste teste
Digite aqui o resto do post
teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste teste
Leia Mais…
Muito bom, mas como não to manjando de CSS e Html(ainda), ficou um erro meio estranho…
parece que o template ja tinha o hack o.o, e agora ele fica com 2 leia mais… ^^
mas tudo bem, em breve vou montar meu próprio template
Apliquei seu tutorial a meu blog e o problema com as postagens antigas surgiu logo.
Porém, fiquei olhando o código e pesquisando o motivo… e descobri que o erro só surge por causa das aspas e dos apóstrofos que você usa no código que apresenta!
Suas aspas estão em “itálico” e, observe como as minhas estão “retinhas”… isso deve gerar alguma informação incorreta!
Foi substituir todas as “aspas” e ‘apóstrofos’ que o código funcionou maravilhosamente!
Dediquei “só” a tarde inteira de meu 1º de maio de 2009 a essa solução, mas valeu a pena e acho que o mínimo que poderia fazer era vir até aqui e te avisar.
Olá Nospheratt
Obrg por este post, mto útil, vou testar!
Mas queria perguntar, antes disso, se esta função “Leia mais” não vai desformatar o feed que vai para o email do subscritor?
Obrg e continuação de bom trabalho!
Solange
tentei fazer no meu blog, e não deu certo nem com reza brava…
Fiz todos os passos direitinhos com esta no tutorial e não deu certo.
Tentei colocar de toda forma no meu template mas nao funciona de jeito nenhum, ja testei um monte de forma diferente e ate agora nada, estou precisando muito de conseguir que dê certo, meus post geralmente é longo e fica chato o post inteiro na home.
Olá Nospheratt, apesar de meio atrasado, aqui vai meu muito obrigado.
Muito bom essa hack!
Para a galera que está sofrendo com os erros uma sugestão:
Copiem os códigos e colem no notepad, copiem as aspas simples e substituam por ‘.
Esse truquezinho resolveu meus problemas, tanto para o script lá da página original quanto aos demais escritos aqui.
Abraços
Fabio Lima
Olá,
Parabéns pelo maravilhoso trabalho!
Não deu certo… Vc poderia me ajudar?
Na segunda parte, quando fui visualizar deu isso: “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute “{1}” associated with an element type “cond”.”
O que posso fazer?
Grato!
Muito obrigado pela dica…
cara muitooooo show o seu post venho procurando um post decente que fuciona-se e graças a deus eu achei^^ cara continua assim mesmo pessoas como voçê que faz a diferença muito bom seu trabalho e valeu ….
[...] apenas ao fim de cada post quando este é lido em sua página específica, ou adicione um hack de “leia mais” nos seus [...]
Era tudo que eu procurava, valeu.
MUITO OBRIGADAAAAA!!
muito bom mesmo esta postagem!
excelente…. tava com um problema no meu blog bem especifico e que nenhum outro post sobre esse assunto tinha me ajudado… cheguei a trocar o template… mas não tava contente… agora foi… parabéns mesmo… e muitissimo obrigado.
Valeu mesmo pela dica…
Confesso que me bati um pouco, pois, estou começando meu blog agora. A dica realmente deu certo e ficou super legal…
Parabéns pelas dicas, elas realmente são muito úteis…
God bless
Olá!
Meus parabéns para vocês, tenho certeza que voces me ajudaram e ajudaram muito a outros!!
Continuem assim e um grande abraço para voces!!!
Brigado.
Olá Nospheratt,
Não dou conta nem de um, mas tenho dois blogs.
Inclui os códigos nos dois. Em um deu absolutamente certo. No principal também deu. No teste que realizei com algumas coisinhas estranhas aconteceram. Atribuo ao Template “esquisito” que escolhi, ou aos “piripaques” momentâneos que acontecem no Blogger(?). Mas, estou contente com o resultado e com o aprendizado que adquiri com o Blosque.com.
Até fiz um post pra agradecer.
Um abração.
Guara.
Consegui colocar, muito obrigada! Mas eu queria saber se tem algum jeito de deixar o “leia mais”, e quando a pessoa clica, o resto do post aparece embaixo, e não em outra página. Obrigada
Adorei o passo a passo!!
Como ainda nem tirei as fraldas nesse negocio de blog,achei teu blog de enorme importancia.
Confesso q a principio nao consigui postar com o continue lendo(ativado)…
Porem eu estava escrevendo errado,pois tem q ser na aba Editar HTML,entao ate q fim consegui…
Muito Obrigada pela instrução!!
Bjus e Muito Sucesso.
Utilizei e gostei bastante. Economiza espaço na nossa página principal.
Muito bom…e muito obrigado…funcionou perfeitamente….
Aê! Meu Template tava um pouquinho diferente, mas consigui e deu tudo certo!
Valeo
Só o Filé do Boi… Filé mesmo… Valeu irmão. Salvou a pátria…
Deu certo! Valeu!
Muito Obrigado pela suas dicas. Ela nos ajudaram muito.
Muito sucesso para vocês!