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 < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (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 >></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:
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.
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?
Agora foi!!!!!!! Eu tentei editar algumas outras e foi
Abração Wilian..
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/)
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.
Aparece somente nos posts em que você utiliza o código.
Valeu.
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
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...
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.
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.
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.
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.
Eu tive que tirar uma linha de código para fazer funcionar bem, mas no geral seu tutorial é muito bom. Parabéns!
Valeuzão cara, me ajudou pakas.
Gostei da post!!!
Agora me diz uma coisa, como vai ficar no meu blog, vai aperecer o a frase "continue lendo"...
valew
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.
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
Muito obrigado, funcionou legal!
Parabéns!
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
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 =/
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.
correto amigo consegui ;) mais vou estudar mais o assunto, Obrigado mais uma vez Willian =)
eu não consegui o meu continue lendo fica la no filnal do post ai num adianta...rsrsrs...mais valeu pelo post :)
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)
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é....
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...
Da para trocar o leia mais por uma imagem
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.
cara eu fiz tudo ate chega no 5 não tem isso no meu blog oque eu fasso
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?
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?
Muito bom o post.
Simples. De fácil entendimento.
Parabéns!
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
E já te coloquei na salinha "Bombril para blog"! Adorei!
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.
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á
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!