Recurso Leia Mais do Blogger

Como eu faço templates e desde 2007 os disponibilizo aqui para download, com certeza a maioria deles não possui este recurso que o blogger disponibilizou recentemente.

Já li em vários blogs amigos - os quais indico na sidebar "Vale um Click" - como fazer para ativar o recurso "Leia Mais" do blogger.

Aprendi com meus amigos e vou ensinar a quem usa algum template que criei a ativar este recurso e utilizá-lo em seu blog.
Antes leia este aviso:
► Se você usa algum template que criei que já possui o recurso "Leia Mais" instalado não precisa incluir o recurso do blogger. Se você quiser fazer isso será por sua conta e risco.

Ativando o recurso em templates mais antigos.
1º Passo:
» Use o Ctrl+F e encontre a linha: <data:post.body/>

» Logo abaixo desta linha coloque o código:
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 
</div>
</b:if>
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.
2º Passo:
Como utilizar o recurso:
1ºAtivando o editor atualizado de posts

♦ Clique em SALVAR ALTERAÇÕES.

2º Crie o seu post e aplique o jump break


3º Observação:
Se você não usa o novo Editor de postagens é só inserir a tag:
<!-- more -->
Antes da palavra que você quer que fique oculta no seu post.

4º Configure as palavras "Mais informações" indo em Elementos de página » Em Postagens no blog » Clique em Editar e Altere o campo que mostra na figura abaixo:

Você pode alterar "Mais informações »" por "Leia mais" ou "Continue lendo", etc.

5º Altere o lado, cor e o aspecto que as palavras "Leia Mais" vão aparecer em seus posts utilizando o CSS:
Para isso:
» Cole o código abaixo acima da tag ]]></b:skin>
.jump-link {
text-align: right; /*Alinhamento do "Leia mais"*/
font-size: 95%; /*Tamanho*/
font-weigth: bold; /*Fonte em negrito*/
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited {
color: blue;
text-decoration: none;
}
.jump-link a:hover {
color: red;
text-decoration: none;
}
♦ Clique em VISUALIZAR para se certificar que está indo tudo certo.
Em seguida:
♦ Clique em SALVAR ALTERAÇÕES.

♦ Clique em Visualizar blog para se certificar que deu tudo certo.



Para aprender de formas diferentes sobre este recurso veja os posts abaixo que serviram como fonte para eu criar este tutorial:
Tutorial para “Leia mais…” do Blogger - Sem complicações!
Leia Mais como Recurso do Blogger
Novo Resumo de Postagens do Blogger – Hack “Leia mais”
Jump Break – o hack “Leia mais” do Blogger
Recurso Leia Mais do Blogger Recurso Leia Mais do Blogger Reviewed by Aurea on 9/23/2009 Rating: 5

28 comentários:

  1. hehehe...
    percebi isso hoje no blogger...
    mas o tutorial deles estava em ingles...
    entao corri direto aqui, pra ver os detalhes... (eu previ que ja tinha postado sobre algo - e acertei) :)

    obrigado por sempre nos ajudar...

    ResponderExcluir
  2. Olá gostaria de uma ajudinha tenho um blog que gostaria de desativar como faço?

    ResponderExcluir
  3. Já coloquei no meu blog! Funciona bem e o melhor é que não precisa colocar nenhum javascript

    ResponderExcluir
  4. nao entendi
    Na parte:» Logo abaixo desta linha coloque o código:
    eu coloquei o codico e nao deu entederam oh alguem tem um template que tem leia mais?

    ResponderExcluir
  5. @' ॐ п α п δ σ ॐ ' Que bom! Fico feliz em ajudar e ver que você gostou.

    @Ana Cláudia Na ajuda do Google tem o que você procura em detalhes.

    @Jonathan É verdade Jonathan,
    Mas eu ainda prefiro o Leia Mais automático.

    @Dêzinha Olá Dê,
    Infelizmente não estou pegando templates por encomenda por total falta de tempo. Detesto esperar e fazer as outras pessoas esperarem e, por ter pouco tempo demoro muito. Sei que a Elke do Templates e Acessórios e o Paulo Estêvam do Códigos Blog pegam encomendas. Os links dos mesmos encontram-se na sidebar Vale um Click aqui do TPV.

    @Site Você seguiu o 2ºpasso? Nele ensino como ativar o JumpBreak.

    ResponderExcluir
  6. Não foi possível salvar 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: The element type "b:includable" must be terminated by the matching end-tag "".

    so deu isso mais nada! o que eu faço?

    ResponderExcluir
  7. Olá Áurea! Estou com o mesmo problema da Olivy. Poderia ajudar? O template que tentei colocar o "leia mais" é o Blue Love. Dá o mesmo erro relatado pela Olivy. O template é lindo (como todos!) e se adequa perfeitamente ao que preciso, mas sem o "leia mais" não tem condições, não é mesmo?
    Desde já, fico-lhe grata pela atenção e, se possível, aguardo retorno. Embora já esteja procurando por outros modelos em outros sites, não gostaria de mudar, pois como disse, achei o Blue Love perfeito!
    Abçs

    ResponderExcluir
  8. @Nairym Vou tentar atualizar o Blue Love para download novamente. Como eu disse no início deste post, criei este template e outros antes do blogger disponibilizar este recurso e este post é justamente para ativá-lo.
    Mas adoro este template também e assim que possível, provavelmente na semana que vem, pretendo atualizá-lo e disponibilizar aqui no TPV.

    ResponderExcluir
  9. Porque quando tento achar com o CTRL + F ele não acha nenhum resultado?

    ResponderExcluir
  10. Aurea, eu baixei um template(Iara) seu que já tem esse recurso, so que eu gostaria de utilizar as postagens inteiras, com fotos e tudo mais, como faço...

    ResponderExcluir
  11. Estou louco atrás de uma coisa bem próxima disso aí, porém, automático, uma amiga minha tem um template seu que veio com este recurso pronto, portanto automático e sem javascripts, e é exatamente isso que preciso, se puder me passar esse bizú eu agradeço muito mesmo, obrigado!!!

    ResponderExcluir
  12. utiliza o draft.blogger.com, que adiciona facinho o recurso ae

    ResponderExcluir
  13. poxa me ajudou muito,pois eu tinha mudado o template e não veio com essa
    função leia mais.parabens e muito obrigado pela dica!

    ResponderExcluir
  14. Muito obrigada, me ajudou muuuuito mesmo!
    Só não estou conseguindo deixar a fonte em negrito. O código tá lá, como vc colocou aqui, e na visualização aparece tudo ok, mas quando salvo não fica em negrito.
    Mas tudo bem, depois quebro minha cabeça com isso!
    Obrigada pela ajuda!

    Abraços!

    ResponderExcluir
  15. Valeuuu !
    consegui.. proximo passo é procurar como colocar uma imagem personalizada pro leia mais !

    :*

    ResponderExcluir
  16. Thanks for your tutor. Really useful & helpful. Gracias.
    RR

    ResponderExcluir
  17. como eu faço para por uma imagem em vez do texto?

    ResponderExcluir
  18. Obrigado ajudou mto.
    No meu template ja existia esse recurso, mais eu queria mudar cor da fonte e posição.

    ResponderExcluir
  19. Oi muito obrigado pela dica vcs são de ++++++++++

    ResponderExcluir
  20. aaa brigada *-----------*

    adorei a dica, ajudou a salvar meu blog :3

    Bjim

    ResponderExcluir
  21. Muito obrigada, pela ajuda, mais uma dica, existem almas de poucas experiencia que nem eu então da uma simplificada no final e explica assim o para alterar cores, alinhamento, tamanho. é só colocar em inglês a cor que vc quer, o tamanho que quer por exemplo ta em 95% ai queres maior e só colocar 150%

    ResponderExcluir
  22. Olá Áurea!
    Eu fiz todos os passos que você mandou, mas na parte do css eu percebi que eu não tenho NADA escrito no meu css, o que eu faço?

    ResponderExcluir
  23. Obrigada pela dica, consegui fazer ! Mas, o "Leia mais" ficou no canto esquerdo da postagem. Como faço para colocar ele no meio? ou do lado direito?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.