Configurar Postagens Vanessa S.
Recurso “Leia Mais” do próprio Blogger
Umas das recentes novidades disponibilizadas pelo Blogger, é o resumo de postagens automático como recurso do próprio Blogger. O que antes era necessário inserir um hack para resumir postagens automaticamente, através de códigos javascript no html do template, agora não há mais necessidade.
Com esta novidade, ativar resumo de postagens no blogger ficou mais fácil, mais leve e totalmente customizável, já que agora você decide o que quer que fique oculto nas suas postagens ou não.
Para aqueles que possuem templates novos, este recurso já vem ativado, basta apenas configurá-lo para que ele funcione, mas também é possível ativar o recurso em templates antigos, e é o que vou explicar hoje aqui neste tutorial, como ativar o recurso nos dois casos.
Seguindo os passos corretamente, você ativa o seu “Leia Mais” do blogger, sem complicações!
1º passo – ativar o Jump Break na postagem do Blogger:
Crie sua postagem normalmente, escreva seu texto.
1. Clique no modo “escrever” no editor de postagem para ativar a “toolbar” completa.
2. Clique no ícone “insert jump break” e ative o ‘jump Break’ na postagem, separando a parte que você quer ocultar na home.
2º passo – personalizar a frase no link
Por padrão, a frase do link do resumo é “Mais informações”, mas você pode altera-la para “Leia Mais”, ou “Continue Lendo”. Personalize a frase como preferir.
Acesse o painel do blogger, clique no menu “layout”, em “postagens do blog”, clique no link “editar” e altere a frase na parte indicada na imagem abaixo:
3º passo – Personalizar o link do “Leia Mais”
Personalizar o link do “Leia Mais” que vai aparecer nas postagens, aplicando seus estilos.
Entre no menu “modelo”, clique em “editar html” e procure pela tag ]]></b:skin>
Cole o seguinte código CSS acima desta tag:
.jump-link {
text-align: right; /*Alinhamento do link "Leia mais"*/
font-size: 20px; /*Tamanho da fonte*/
font-weigth: bold;
margin: 5px 10px 5px 0px;
}
.jump-link a:link, .jump-link a:visited { /*Estilo do link ativo e visitado*/
color: #fff; /*Edite cor do link*/
text-decoration: none;
}
.jump-link a:hover { /*Estilo do link qdo passa mouse em cima*/
color: #8080cf; /*Edite cor do link*/
text-decoration: none;
}
Caso você utilizar o editor de textos do blogger no modo html e não no modo “escrever”, há uma maneira de ativar seu jump Break também,basta você incluir a tag:
<!– more –>
Antes da parte que você quer que fique oculta na sua postagem.
Atenção: o novo recurso do blogger só está habilitado para templates novos. Se você seguir todos os passos e ainda assim não funcionar, veja abaixo como ativar o recurso em templates antigos.
Ativando o recurso “Leia Mais” em templates antigos:
Vá no menu “modelo, acesse o botão para edição de html do seu blog, marque a caixinha “expandir modelos de widgts” e Procure pela linha:
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
E cole o código a seguir, logo ABAIXO dela:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Prontinho.Agora é só salvar!
Siga as mesmas orientações postadas no tutorial acima, referentes a aplicação de estilos etc.
Substituir o link “Leia Mais” por uma imagem:
Alguns leitores me perguntaram como substituir o link do “Leia Mais” por uma imagem, tal qual podemos fazer no hack que utiliza script.
É muito simples.
Entre na edição HTML do seu template, clique em “expandir modelos de widgets” e procure por:
<data:post.jumpText/>
SUBSTITUA esta tag por esta outra:
<img src='URL-DA-SUA-IMAGEM' />
Visualize, se estiver tudo certinho, salve!
[alerta] Lembrando que, o resumo só será aplicado nas postagens que você ativar o jump break. Caso você queira que o resumo apareça não somente nos posts da home, mas também nas páginas de arquivos e marcadores, você terá que editar todos os seus posts, um a um, manualmente. Será necessário que você ative o jump break em todos os seus artigos![/alerta]
Conseguiii , obrigadoooooo
Noossa ameiii!! Obrigada . ajudouuuu mtmtmtmt eu queria saber como fazia pra colocar e agora consegui!! bjooes
nao conssigir 🙁
adorei muito bom otimo
Oi, só uma pergunta, o que eu faço se ficar dois leia mais?
No meu ficou?
Até que enfim uma boa explicação, parabéns ^^
muito bo parabens tão simples obrigado
Gostei vlw
Sua dica me salvou, na boa você merece um prêmio.
Muito obrigado, sua linda!
Ficou excelente Clau ,,, personalizei com uma imagem e ficou coisa do outro mundo … 😀
Clau, veja no meu blog: http://blogcdttestes.blogspot.com/
Acontece o seguinte o 'leia mais' fica desalinhado entre dois posts.
Consegui!!!!!!!!! Era só colocar a opção "Modelos antigos" Mais cuidado você vai perder seu modelo atual! depois é só refazer.
Andrea
No tutorial já está explicado onde vc deve colar o código do 4º passo. Se não deu certo ai, é pq pode ser algo relacionado a seu template.
godmasterdownload
Vc deve ativar o Jump Break em todas as postagens se quiser que apareça nas demais.
Carlos Augusto
Vc deve ter feito algo errado, entretanto, alguns recursos variam de template para template. Sendo assim, não tenho como te ajudar.
Clau eu fiz isso e deu mas so na pagina inicial
nas outras paginas nao consigo postar usando o recurso leia mais, me ajuda ai. Como faz pra usar o recurso leia mais nas outras paginas?
Guilherme,
o resumo só será aplicado nas postagens que você ativar o jump break. Se quiser que apareça em outros posts, será necessário que você ative o jump break em todos os seus artigos.
Oi Clau, Td bem?
Estou tendo problemas para aplicar o "Substituir o link "Leia Mais" por uma imagem:" Dá um erro:
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 "body" must be terminated by the matching end-tag "".
deu certo mais o ruin que é só em uma postagen dai e mau:(
Oi Clau!
Estou tentando aplicar este recurso no meu blog e não consigo, o código do 4º passo não está com as tags fechadas, e dá erro. Pelo pouco que entendo de html, tentei fechar mas continuou com o erro XML.
Uma dúvida: este código do 4º passo eu coloco no html da postagem ou do blog? – (caso sim, é em: design – editar html – clicar em expandir modelos ou não?)
Se puder me ajudar, agradeço.
Estou procurando e tentando este código há meses e NENHUM dá certo, não sei mais o que fazer.
Obrigada!
Andrea.
Clau,não aparece o leia mais
Bauru:
Que bom que deu certo.E obrigada pelo comentário, bom ver vc por aqui =)
Apesar de ter de adaptar o que mandou, pois não encaixava no lugar indicado, deu tudo certo, Clau. Valeu pela dica que usei agora lá no Blog do Bauru. Beijo.
Obrigada, estava a procura desta informação a séculos e finalmente tenho o meu blog personalizado!
OBRIGADA
Como fazer um leia mais especifico????? *-* Ajudaa…
http://bloggitando.blogspot.com
@xTudodownloads:
Vc seguiu o passo no tutorial que ensina a Ativar o recurso "Leia Mais" em templates antigos?
É necessário seguir este passo,senão não vai aparecer mesmo.
Oi, olha eu mudei a forma de postagens para Atualizado mais nao aparece essa opção jump brake
como faço?
@MaÐ:
Vou tentar criar um tutorial sim. Vou fazer uns testes e publico.
Obrigada pelo comentário e pela visita.
Olá eu fiquei com a mesma dúvida do amigo PHelipe ali em cima, a vossa senhoria podia fazer um totorial de como colocar imagem clicável no lugar do jump break? Obrigado.
ps.: adoro seu site
Valeu pela dica!
Abraços!
Oi, Clau!
Ó eu denovo 😀
Então, muito obrigado pela atenção e ajuda. Pra ser honesto eu nem esperava ser respondido (como quase nunca sou nos outros blogs. Parabéns pela disposição em ajudar.
Agora a minha questão. Fiz o que você sugeriu e deu certo! Mas tem um porém, a imagem não ficou "clicável" como era a frase "Leia Mais". Na verdade, a frase "Leia Mais" ficou por cima da imagem, então lá em "Postagens do Blog", no campo em que a gente escrevia "Leia Mais", eu coloquei caracteres invisíveis, aí deu mais ou menos certo, porque agora o que é clicável é o caractere invisível que está por cima da imagem, e não imagem em si.
Vou especificar a mudança pra eu me expressar melhor:
Antes era assim:
.jump-link {
text-align: right; /*Alinhamento do "Leia mais"*/
font-size: 20px; /*Tamanho da fonte*/
font-weigth: bold;
margin: 5px 10px 5px 0px;
Aí você disse pra eu colocar assim:
.jump-link {
background: transparent url(endereço da sua imagem) no-repeat;
text-align: right; /*Alinhamento do "Leia mais"*/
font-size: 20px; /*Tamanho da fonte*/
font-weigth: bold;
margin: 5px 10px 5px 0px;
Então apaguei as linhas text-align, font-size, font-weigth, margin porque não faria sentido tê-las, né?
Mas aí a imagem não está mais clicável… por que será?
Desde já eu agredoço muitão, e entendo se não for possível ajudar.
Abraços e muito mais sucesso com o blog!
@PHelipe:
Eu não testei isso, mas acredito que dê pra colocar imagem sim, faz um teste e tenta fazer o mesmo procedimento que teria q ser feito com o "showlink" (que é o do Hack Leia Mais automático).
Outra sugestão tb é tentar colocar a imagem em "jump-link", ficaria +/- assim:
.jump-link {
background: transparent url(endereço da sua imagem) no-repeat;
Espero que consiga. Boa sorte e obrigada pela visita.
Olá, Clau!
Primeiro queria agradecer elo seu blog. Ele é realmente muito bom e tem me ajudado muuuuito mesmo!
Agora gostaria de saber se tem como, pore sse moddo acima, colocar uma imagem no lugar da palavra.
Tem como? Ou é só pelooutro modo do "Leia Mais" automático?
Desde já, muitoobrigado!
@Kássio:
Tem sim. Dá uma lida neste tutorial:
Hack" Leia Mais" – resumo automático
Olá gosto muito do seu site e do seu trabalho, e visito ele constatemente!
Gostaria so de tirar uma duvida…tem como personalizar para que o jump seja ativado automaticamente? já definido tio depois de uma determinada quantidade de caracteres? (obrigado pelas informações e se puder me ajudar fico muito grato XD)
Nossa Clau, tentei dos dois jeitos mas acho que o primeiro foi que deu certo, fiz uma confusão, mas consegui, valeu mesmo!!!
Carla:
Pois é…sem falar q a home fica mais limpa…eu utilizo esse recurso de postagens resumidas aqui desde qdo criei o blog.Antes usava com script agora uso o do blogger mesmo..
Viu como é facil ativar? Não tem mistério nenhum…=)
.::Clau::.
Nossa, Clau!
Gostei desse recurso e resolvi experimentar…
Sabe que gostei?
Dá p/ colocar + posts na página inicial do blog…
Vlw pela dica!
Bjinhosssssssssss