![[ Ferramentas Blog ]](/wordpress/wp-content/themes/fb5/images/logo.png){kind=logo}
Esse é o famoso link “Leia mais…” que aparece nas primeiras páginas de alguns blogs e sites, onde se pode ler ou um resumo do artigo ou seu primeiro parágrafo e, caso o leitor queria saber mais e continuar lendo, basta clicar ali para abrir o restante do texto. Isso é extremamente importante para se ganhar espaço no blog, conforme usamos aqui também.
ERRATA: O Blogger já disponibiliza esse serviço de forma padrão. Veja o novo tutorial, bem mais simples:
Já tratamos aqui sobre esse assunto, mas resolvi reescrever o artigo. O antigo vai continuar publicado – Postagens expansíveis ou link “Leia mais” – para servir de referência. Foi um dos primeiros textos publicados aqui e sei que não ficou muito bom (eu mesmo estava aprendendo). Com um pouco mais de experiência, reescrevi o texto para ajudar melhor quem quer colocar essa facilidade em seu blog.
Um blog tem que ser de fácil leitura e isso significa que o seu visitante não quer perder tempo passando páginas longas sem encontrar o que quer. As pessoas cada vez lêem menos e cada segundo na internet é precioso. Páginas com artigos longos ou muitos deles inteiros, demoram para abrir e fazem sua página lenta. Com isso, seu visitante pode não ter paciência em esperar e não ficará tempo algum.
Veja como é fácil instalar Resumo de Postagens:
1. Abra o painel do Blogger e clique em “Layout” e “Editar HTML”. Procure pela caixa de verificação “Expandir modelos de widgets” e marque a caixa. Sem isso não será possível encontrar as linhas do código e os locais para inserir as funções.
2. Nas primeiras linhas do seu código, encontre “<head>” e logo abaixo copie e cole o seguinte trecho:
<style>
<b:if cond=’data:blog.pageType == "item"’>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Agora encontre a seguinte linha: “<data:post.body/>” e abaixo disso copie e cole o seguinte:
<b:if cond=’data:blog.pageType != “item”‘><br />
<a expr:href=’data:post.url’>Leia mais!</a>
</b:if>
O texto destacado em vermelho pode ser substituído como quiser, até mesmo por uma imagem ou com imagem e texto, como é aqui no [ Ferramentas Blog ].
4. Clique no botão alaranjado “SALVAR MODELO”.
Esta parte está terminada, mas agora falta ir em cada um dos seus artigos já publicados e determinar qual será a parte do resumo que aparecerá antes do link “Leia mais!”. Esse trabalho é nanual e terá que ser feito em todos os textos, nos já publicados e nos que você ainda for escrever.
Sempre que escrever um artigo, será preciso inserir os seguintes códigos:
Texto resumo da postagem.
<span class=”fullpost”>
Restante do texto que só aparece depois de clicar em “Leia mais!”.
</span>
Isso deve ser inserido após você digitar todo o artigo e já souber o que quer colocar escrito antes do link. Aqui no [ Ferramentas Blo ] usamos sempre o primeiro parágrafo dos textos como “resumo”. Para adicionar o código, na aba do editor do texto (“Criar”) escolha “Editar HTML”. Assim você verá o seu artigo em formato HTML; é aí que você colocará as linhas do código indicadas acima.
Faça testes com um artigo antes de aplicar o código em todos; de preferência crie um novo artigo só para fazer testes. Lembre-se de sempre fazer um Backup do seu modelo antes de fazer qualquer modificação no código-fonte.
Veja a ajuda original do Blogger sobre esse assunto clicando aqui!
Ótima Dica! Era quase isso o que eu estava procurando. O que eu preciso mesmo é saber como colocar esse “Leia Mais” para abrir o restante do conteúdo na mesma página, sem precisar atualizar. Apenas expandindo o conteúdo oculto. Achei uma no blog Katempla, mas não funcionou no meu. Esse que você usa em seu blog é legal, mas pessoalmente não acho muito interessante levar o leitor a uma página apenas com a publicação clicada, muito provavelmente o leitor não voltará a página para ver o restante do conteúdo do blog. Apenas minha opinião. Mas a dica é muito boa, parabéns!
Vlw pela dica, ficou show de bola
obrigado!
Muito Legal só que eu fiquei com uma dúvida. tem como colocar um video depois do leia mais, pq eu fiz um post assim só que o video fico na home.
Valeu e olha lá como fico meu blog quem sabe vc naum pode me ajudar
virtualz1,
basta observar onde você colocou a tag de fechamento. Ela deve ficar depois do código do vídeo.
mano que estranho, eu não consigo achar o “data:post.body/”””, não tem no meu html, tenho certeza, eu fiz uma pagina com todo o meu código só pra usar o ctrl f e procurar, procurei por data, date o nome completo, mais não tem esse nome no meu html
Erick.
Ou seu template é completamente modificado ou é da versão anterior do Blogger.
Então recomendo que vá na página de ajuda do Blogger e veja como ativar essa ferramentas em seu modelo.
O nome para esse tipo de Modelo é “Modelo Clássico”.
Caro Marcos,
Não consegui.
Não entendi onde inserir os codigos: [span class=”fullpost”]
e [/span]
O restante acertei numa boa. Poderia me ajudar por favor?
Eduardo Costa,
Tem que ler com mais atenção o tutorial.
Esse trecho do código é pra ser inserido nos artigos. Isso tá bem claro acima.
Eu coloquei tudo certinho ó que todos post que tava no blog fico “Leia mais” em baixo
Como faço para arrumar isso?
Export.,
Isso não tem como tirar. Esse implemento aparecerá em todos os artigos, não tendo como escolher que terá o link ou não.
Muito bom parabéns!
Vai me ajudar bastante!
Obrigado
Não consigo encontrar de jeito nenhum a linha mostrada no terceiro tópico. Será que pode estar escrito diferente no meu código do blogger?
Crítico,
Veja a ajuda do blogger q está como fonte desse artigo.
Vc não está encontrando pq vc usa um modelo de layout antigo, chamado de Clássico!
Para os modelos Clássicos, tem q fazer de outro jeito q tá na ajuda!
meu amigo valeu meubloger gannho mais espaco eficou muito melhor pra trabalhar agora e so organizar e comecar a publicar valeu qual quer critica ou sugestoes serao bem vindas ate mais.
Du karai, meu blog ficou muito massa depois disso.
Valeu.
Obrigado! Tinha mudado o template de meu blog e não estava conseguindo colocar o reseumo de postagem. Achei sua dica no blog da Ariane.
Valeu mesmo!!!
ajudou bacarai meu amigo! 🙂 valeu!
Qual o código HTML para inserir uma imagem no lugar de “leia mais!”?
Alguém sabe informar?
Vlw!
El_PeteJur,
É o mesmo código pra inserir qualquer outro tipo de imagens no seu blog.
Este recuso leia mais, não tem uma maneira de ficar fixo em todas as postagens, mesmo nas novas publicações sem ter que eu colocar o codigo?
Ou tenho que escolher um template novo que já tenha este recurso.
Leão,
Infelizmente não tem como usando esse formato acima.
Mas tem um modelo que é automático e que funciona bem. Veja esse tutorial aqui que ensina como fazer:
– https://ferramentasblog.com/2009/03/resumo-de-postagem-expansivel.html
Pode ser que existam templates que já vêm com o recurso instalado, você vai ter que procurar.
Obrigado!acabei de usar no meu blog e funcionou!tinha testado de outros mas, não tinha dado certo.
Ola amigo,beleza?
cara já tentei de tudo no meu template…
não estou conseguindo colocar esse hack leia mais.. com resumo de postagem expansível.
Aqui no meu template ja tem um hack leia mais..
mas é aquele que tem sempre que atualizar a pagina toda, entendeu,mas e eu queria mesmo colocar esse hack leia mais… expansível na mesma pagina. Eu tambem não sei qual é codigo do outro, para mim poder retirar!
por favor peço sua ajuda se for possível??
dê uma olhadinha no meu hack la?
Já fiz tudinho como estava escrito aqui !
peço ajuda ???
Crisian25,
Cara, olhei o seu blog e está funcionando perfeitamente.
Não entendi qual seria o seu problema!
obrigado vc me ajudou a meu log ficar organizado =D veja como ficou seu ensinamento nele(se puder)
http://entretidoo.blogspot.com/
Olá!!!
Muito obrigado pela explicação. Muito bom.
Só tem 1 problema, os vídeos aparecem na mesma…
Não há forma de os videos so aparecer depois de carregar em “Leia mais”?
Pode-se mudar a pocição do “leia mais”, ele está à esquerda, é possivel coloca-lo à direita?
http://retirotuga.pt.vu/
Cumprimentos
Retirotuga,
Observe se o código dos vídeos está antes da tag de fechamento “[/span]”
E, para alinhar o texto, basta adiconar os mesmos códigos no código-fonte para formatar um texto padrão.
Obrigado pela resposta tão rápida.
A tag “[/span]” coloco mesmo no fim, depois do código do filme. Todo o texto que estiver depois do fime aparece também.
Procurei em “Layout”, “editar html” e não consegui encontrar o 2º código, [b:if cond=’data:blog.pageType != “item”‘][br /]
[a expr:href=’data:post.url’]Leia mais![/a]
[/b:if].
Como faço para mudar o “leia mais” para a direita?
Obrigado
Já encontrei o código, tinha que expandir os modelos de widget…A questão do alinhamento do “ler mais” está resolvida.
Porém, o video aparece na mesma e o texto que esteja abaixo dele.
Veja o primeiro post.
http://retirotuga.blogspot.com/search/label/Filmes
Obrigado
Cumprimentos
Retirotuga,
verifica se no código HTML do artigo, no editor de textos do blog, se não tem mais de uma tag de fechamento [/span] inserida no texto.
Algumas vezes o editor do Blogger acrescenta, replica essa tag, por isso dá esse erro.
Por acaso reparei nisso. Vi que já tinha uma tag de fechamento [/tag] inserida, retirei-a e coloquei só uma tag [/span] no fim. No entanto, o video aparece logo na mesma.
Cumprimentos
Já consegui resolver o problema.
Obrigado pelas explicações.
Cumprimentos
Marcos, estou com uma única dúvida, no HTML da postagem aparece automáticamente várias tags “span”. Tentei apagar todas e deixei só a última no final do texto, mas quando salvo volta tudo de novo. Isso está atrapalhando na determinação do trecho que escolhi. Ao invés de aparecer somente um parágrafo, aparece o texto inteiro e no final o “Leia mais!”.
Dá uma ajuda…
Vilmar,
a melhor solução e passar a usar o Windows Live Writer para editar seus artigos do Blog.
Acontece que usando o editor do blogger, algumas vezes, quando reeditamos os artigos, o Blogger recoloca algumas tags como tá fazendo no seu caso e isso atrapalha muito e refazer é mais demorado.
Aqui ensinamos a instalar e usar o Live Writer:
https://ferramentasblog.com/2009/05/video-tutorial-windows-live-writer.html
Acho q vai resolver o seu problema!
CUIDADO!! Eu usei isso no meu blog por duas semanas e as minhas visitas caíram quase 80%, ai descobri que o crawler do google não estava mais indexando as minhas novas postagens… acredito que alguma parte desses códigos em alguns templates acabam por interferir no Crawler do Googlebot!
Futurauto,
Eu mexo com isso a muito tempo e nunca ouvi falar de ningu’em q teve problemas.
Acredito que vc teve algum outro problema.
Não tem nada a ver! O google parou de te indexar foi por qualquer outro motivo, com certeza. Já usei esse código e não tive nenhum problema. Recomendo!
Cara, excelente tutorial! Há tempos vinha matutando em como inserir esse hack no meu blog, mas como o tópico de Ajuda do Google é muito vago, sempre desistia no meio do caminho. Parabéns pela clareza e pela informatividade!
Só estou apanhando pra colocar uma imagem em formato de seta ao lado do ‘leia mais…’: sempre que insiro a imagem ali, ou o ‘Leia mais’ acaba redirecionando pra URL da própria imagem (que está hospedada no Picasa) ou fica desativado.
Vou continuar quebrando a cabeça por aqui por enquanto…
Muito bom, estava procurando essa dica faz tempo. Ficou muito bem explicado, consegui fazer a publicação do post sem problemas.
VALEU PELA DICA!!
Já estou usando no blog:http://kebra-kexo.blogspot.com/…conheçam ele ai
Abraço!!
Marcos:
Testado e aprovado no blog de testes!
Estou apenas tentando criar o "Leia mais" em botão, via linha de comando(?) para configurar no blog. (Você teria uma dica?)
Obrigado.
Basta no lugar do texto "Leia mais…" vc colocar o código de uma imagem.
Ola Marcos!
Obrigada mais uma vez pela sua paciencia e boa vontade com nós blogueiros de primeira viagem!Eu por exemplo!
Amigo não esta aparecendo a tag [Leia Mais..]
Já não sei mais o que faço para ajeitar o meu texto de livros e audios.
Eu estou usando um template que contem o continuar lendo em espanhol.
Sei la ta uma bagunça!
Simplesmente esse codigo e o codigo dos slides da Ariane não estou conseguindo abrir e nem colocar nos meus blogs.
Tu e a Ariane são 1000
eu gostaria de saber como ocultar a janela para comentar do resumo que aparece no resumo eu gostaria que aparecesse somente na paina que é aberta depois que se clica em leia mais !
Ewethon,
o que aconteceu é que vc colocou o código do ítem 3 no lugar errado, por isso que os comentários estão aparecendo. Reveja o tutorial e siga conforma estabelecido.
Da uma olhada ai, como que ta no html e ve oque esta errado http://img193.imageshack.us/img193/623/comentariosa.png
Ewerton,
Realmente vc colocou o código no lugar certo. O que deve tá errado é o lugar do código do comentário.
Aí vc terá que entrar em contato com quem criou o seu template para ver com ele como corrigir o problema.
Oi Marcos, pq q akele template que vc criou a gente não precisa colocar o codigo na postagem, pq q ele vai automaticamente?
@Mikael,
Pq nele eu usei outro recurso, o de resumo automático:
https://ferramentasblog.com/2009/03/resumo-de-postagem-expansivel.html
Pode tentar.
Obrigadão estava ate iritado não copnseguia, mas com essas dicas eu consegui , vlw
olá ,valeu mesmo acho que fica bem mais atrativo ,poe mais conteúdo,postagem em seus blogs .gostei muito. valeu .ja pus o blog nos meus favoritos!ate a proxima.
Gostei do post! Dá um pouco de trabalho para achar o código do HTML, mas vale e pena.
Ferramentas sempre me ajudando! ;D
olá marcos,
quando for colar no editor pde ficar do mesmo jeito que colou ou tem que alinhar,se tem que alinhar,como fazer?
obrigado!!
@Lpracing,
Não precisa alinhar nada.
Obrigado pela dica !!. Que Deus te abençoe. achei melhorou muito o Blog os textos não tomam mais a página inteira. Valeu !!!!
Excelente post. Este recurso é indispensável para qualquer blog, principalmente aqueles com matérias detalhadas. Sanou minha necessidade. Muito obrigado.
Uma ajudinha para os que estão tendo dificuldades de achar o código na selva de tags que é o template do blog: Antes de dar CTRL+F (find) para procurar o texto, marque uma pequena porção (qualquer coisa) dentro da caixa com o código. O FIND será corretamente direcionado para dentro da caixa de texto, e não fora dela, como acontece em alguns navegadores. Basta digitar o texto que estiver procurando e ser feliz. Paz para todos.
Sensacional!
Não encontrei a solução deste problema em lugar algum, então resolvi vasculhar o seu blog. Sem dúvidas, na matéria antiga, você não tinha muita experiência, mas agora, pode se considerar como um profissional!
Parabéns!
Maravilhoso!!!
Na ajuda do Blogger tem as dicas, mas em nenhum momento falam que tem que expandir os modelos de widgets!!!
Eita nois…. VALEU!!
Excelente explicação. apesar de não utlizar o formoso (Post "Continuar Lendo")
fiz um teste pra ver se realmente funcionaria e o mesmo pegou legal
diferente de muitos outros… esse aqui nota 10.
estou com uma dúvida… por em vou tulizar seu Formulário… XD
Olá por ora estou apenas lendo vendo se aprendo um pouquinho. Quero ter mais visitar no blog, mas ainda não me dediquei a aplicar as tuas dicas.
Parabéns pela iniciativa. Sempre estou aqui lendo alguma coisa.
Pingback: Dicas para Blog – Artigos de Fevereiro/2009 | [ Ferramentas Blog ]
Pingback: Tutoriais e Dicas – criar Blog [ Intermediários ] | [ Ferramentas Blog ]