Twitter Delicious Facebook Digg Stumbleupon Favorites More

Tutorial para inserir Hack "Continue Lendo"

Alguns leitores pediram dicas a respeito de como inserir no blog o link "Continue lendo..." tendo o resumo do post ou os primeiros parágrafos na home e o link para acessar o post completo.

Então, resolvi postar aqui no Dicas Plugins um tutorial a respeito que pode ser encontrado, também, em diversos outros blogs de dicas e widgets.

Essa é uma dica fácil, para usuários intermediários que já conhecem o ambiente do Blogger e sabem, mais ou menos, a estrutura do código do template e a localizar tags no código HTML.

 

Siga os passos abaixo e, vamos lá! Antes de mais nada, faça o backup do seu template.

1 - Vá até o código HTML do seu template (Layout e marque a opção: "Expandir modelos de widgets").

2 - Procure (utilize Ctrl + F) pela tag </head>

3 - Cole o seguinte código antes da tag </head>:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

4 - Encontre a linha (Ctrl + f): <div class='post-body'> e substitua toda essa linha por (substitua apenas a linha encontrada):

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>

5 - Procure (Ctrl + f):  <p><data:post.body/></p>  e substitua por:

<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'>Leia mais &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

6 - Salve o template e pronto o código está incluso.

 

Dica Importante

Nas postagens em que você for utilizar esse recurso, você deve usar a tag: <span class="fullpost">  no início da parte em que você deseja que não seja mostrada na homepage e no final:  </span>.

Entretanto, se você usa diretamene o Blogger para postar seus artigos, você pode automatizar o processo para não ter que ficar decorando essas tags. Para isso, vá em "Configurações", depois em "Formatação" e, em seguida, "Modelo de postagem" e cole o seguinte trecho:

Digite aqui o resumo do post

<span id="fullpost">

Digite aqui o resto do post

</span>

Salve a alteração e pronto! Toda vez que quiser escrever uma nova postagem, o código vai estar aparecendo lá.

Caso você utilize, por exemplo, o Windows Livre Writer, como eu faço para escrever os posts, mesmo inserindo essa função automática, não aparece no programa. Então, terá que inseir manualmente as tags

<span id="fullpost"> e </span> nos locais desejados (clique no menu Exibir, depois em Código HTML para visualizar o HTML do seu post e insira as tags onde quiser.

 

Por hora é só. Espero que a dica tenha sido bastante útil.

Duvidas? Pergunte nos comentários.

37 comentários:

Jornal da Parnaíba disse...

Fiz tudo como recomenda, mas não encontrei essas duas ultimas tags, portanto não pude completar a alteração no meu blog.
No blogspot deve ser diferente por algum motivo. se puder me ajudar, ficarei muito grato.

André Bazaglia disse...

Valeu Wilian, excelente post! Eu até sabia disso, ms no template Zinmag(este que vc usa) nao tem a parte do:

div class='post-body'

O que devo fazer?

André Bazaglia disse...

Agora foi!!!!!!! Eu tentei editar algumas outras e foi

Abração Wilian..

Willian Coutinho disse...

André, procure por: class='cover'

Abaixo dele vc vai encontrar:
(div class='entry' expr:id='"post-" + data:post.id')

Cole abaixo dele o código que vc colaria em post.body:
(b:if cond='data:blog.pageType == "item"')
(style) #fullpost{display:inline;} (/style)

(data:post.body/)

Anônimo disse...

Willian, me tire uma dúvida por favor. Com esse Hack irá aparecer o "Continue Lendo" Em todos os posts ou apenas nos que for adicionados o código span id="fullpost" ?

Pergunto isso, pois uso um em meu site que aparece o "Continue Lendo" em todos os posts automaticamente, mesmo nos que eu não utilizo o código.

Willian Coutinho disse...

Aparece somente nos posts em que você utiliza o código.
Valeu.

JakRed disse...

pow willian fala ae oque eu faço...

em vez de aparecer em portugues aparece em ingles la

aparece read more...

ve ai no meu blog de teste: www.blogtestejb.blogspot.com

se puder ajudar agradeço

Willian Coutinho disse...

clique em expandir modelo em widget e depois com o ctrl+F procure por todos os read more e substitua pela frase em português que vc quiser: continue lenod, leia mais, veja mais, etc...

Jeffmanji disse...

Cara...
Eu não consegui efetuar os passos a partir de

(div class='post-body')

Simplesmente não existe isso no meu template. Tem como ajudar?

Grato e vamo que vamo.

Willian Coutinho disse...

copie todo o data:post.body no tutorial e cole no código do seu template abaixo de: div class='post-header-line-1'.

Você estará criando o post.body. Se der certo ou não, me avise.

Rafael disse...

Gostei muito do seu blog Willian.
Eu queria saber se existe um código desses em que eu posso escrever uma frase individual para cada postagem.
Exemplo: Uma postagem com várias fotos, então no resumo aparece, "Clique aqui para ver mais fotos". E numa postagem com um texto grande, no resumo aparece, "Continue lendo".

Pode parecer meio inútil, mas deixa o blog mais profissional.

Willian Coutinho disse...

Rafael, interessante a sua pedida, mas eu não sei se existe. Provavelmente não, pois é mais complexo criar um código personalizado assim. Se eu encontrar navegando por aí, eu posto aqui no Dicas Plugins.

Helen Fernanda disse...

Eu tive que tirar uma linha de código para fazer funcionar bem, mas no geral seu tutorial é muito bom. Parabéns!

Otavio Alves disse...

Valeuzão cara, me ajudou pakas.

Unknown disse...

Gostei da post!!!

Agora me diz uma coisa, como vai ficar no meu blog, vai aperecer o a frase "continue lendo"...

valew

Unknown disse...

Valeu peladica, parabéns pelo blog

Pessoal, quem nao encontra esta tag (div class='post-body')
no CTRL+F digita só post-body (sem os apostrofos) que daí ele encontra uma única, e é nesta que vocês substituirão.

Adriano Ferraz disse...

Olá Rafael,

Estava com o mesmo problema do André em não encontrar a (div class='post-body') e fiz o procedimento do "class='cover'" que vc recomendou a ele e deu certo...o unico problema é que o conteúdo do post seja texto ou não ficou bem rente a margem esquerda da página (fora da área do post).

To testando o template antes em outro blog até ficar pronto, caso queira ver o que está acontecendo entre em http://adrianohf.blogspot.com

vc tem idéia do que pode estar acontecendo?

Valeu parcero,

Adriano Ferraz

Antonio Cipriano disse...

Muito obrigado, funcionou legal!
Parabéns!

3ª IP Ouro Preto do Oeste disse...

cara eu ja tenho um blof com o continue lendo ou leia mais, como fazço para tirar e colocar esse seu??

http://comedia-s.blogspot.com

marconyjahel@uol.com.br

ExiliaEths • Sr.Releaseee disse...

Olá Willian, olha eu chatão de novo rs

fiz tudo certinho editei e talz só estou perdido na hora de ostar caro willian
aparece assim pra mim na caixa de texto.

Digite aqui o resumo do post



Digite aqui o resto do post


devo postar antes ou depois de alguma dessas palavras ? eu tentei até mesmo substitui-las mais ele abre no blog como o posto completo e no final aparece o ( leia mais....) porém o post já esta aparecendo completo =/

Willian Coutinho disse...

Elementar meu caro.
Clique em visualizar HTML (opção disponível no post) que você verá a estrutura e onde tem que postar.

O normal é substituir pelo seu texto mas não delete os parágrafos. Clique no HTML do post antes de postar que você vai ver o que vc não pode apagar.

ExiliaEths • Sr.Releaseee disse...

correto amigo consegui ;) mais vou estudar mais o assunto, Obrigado mais uma vez Willian =)

Unknown disse...

eu não consegui o meu continue lendo fica la no filnal do post ai num adianta...rsrsrs...mais valeu pelo post :)

Willian Coutinho disse...

Jonatas, isso acontece pq o (span id="fullpost") não está colocado adequadamente nas suas postagens.
Você tem que inserí-lo em todas as postagens, incluseive nas antigas que não têm.

Veja como deve ficar a estrutura do post:

Resumo do post
(span id="fullpost")
resto do post
(/span)

Bidu disse...

fala Willian, valeu pela dica...

o texto dos meus post são da cor branca, gostaria de destacar o "Leia mais", que tb esta em branco por outra cor.
como procedo?????

brigado.... até....

Willian Coutinho disse...

O link "Continue Lendo..." de fato é um link. O seu blog o considera como um link. Reparou que todos os links do seu blog são brancos? Por isso ele é branco tbm.

Tem jeito de mudar isso sim, o problema é que eu to meio sem tempo pra pesquisar...

Marcos disse...

Da para trocar o leia mais por uma imagem

Daniel disse...

Fiz tudo certinho mas o meu só não consegue achar uma coisa, a parte 5...

E dá esse erro também:

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: The element type "b:if" must be terminated by the matching end-tag "".

Sendo que já verifiquei tudo e estava certinho...

Dá uma ajuda aê William! Hehhee

Grato.

gustavo disse...

cara eu fiz tudo ate chega no 5 não tem isso no meu blog oque eu fasso

Unknown disse...

Difícil, deu certo e tudo, só que o continue lendo oculta o post, mas não reduz o tamanho.. aí fica um espação vazio... como eu conserto isso?

Pr. Alexandre Vieira disse...

olá willian, o meu blog tem esse hack automático. gostaria que ele ficasse resumindo normalmente.Mas gostaria de retirar apenas numa página estática que eu tenho. Tem jeito?

Girlene Medeiros disse...

Muito bom o post.
Simples. De fácil entendimento.
Parabéns!

Simone Aline disse...

Simplesmente MARAVILHOSO!!! Eu, que tenho um certo "problema" com resumos vou poder utilizar bem essa sua dica!!! Adorei! Já inclui no meu blog e testei, deu tudo certo. Só não coloquei "automaticamente" em todas as postagens porque nem todas eu vou querer que fiquem com o "Leia mais"!!! Mas adorei mesmo! Obrigada! Bjks

Simone Aline disse...

E já te coloquei na salinha "Bombril para blog"! Adorei!

[ADM] BR disse...

está entrando em conflito com outras tags do meu texto (/span)

em meio a
(span id="fullpost") * (/span)

existem outras (/span) da formatação do texto.

Igor Oliveira disse...

Cara, no meu template não existe as duas tags :

< div class='post-body' >

e

< p >< / p >

Simplismente não sei o que faço, e eu preciso muito desse código funcionando.. Obrigado desde já

Kayo disse...

deu certa mais esta aparecendo em todas as postagem, inclusive nas que não precisa. como faço pra não aparecer em todas?

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates