Hack “Leia mais” automático e com imagens

Hack “Leia mais” automático e com imagens

6 10 99
Hack “Leia mais” automático e com imagens 10 6 99
Fui procurar este hack, à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você, blog da querida e sumida amiga Áurea.
Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.
Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.
Como colocar o hack Leia Mais com imagens
Entre no painel do Blogger, clique em design e, depois, em editar HTML.
Marque a caixa expandir modelos de widgets e procure por:
<div class='post-body entry-content'>
<data:post.body/>
Substitua a linha <data:post.body/> por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
ATENÇÃO! Para quem usa os meus templates, que já vêm com um outro hack “leia mais” e/ ou com o jump break do Blogger, o caminho é outro. Procure por:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
<span id='showlink'>
<a expr:href='data:post.url'>Continue lendo &gt;&gt;</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
Substitua tudo por:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
Agora vá no CSS do template e antes da tag ]]></b:skin> cole este código:
.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/
Procure então pela tag </head> e cole este outro código em cima dela:

Fontes de referência
Escondendo o rodapé dos post na página inicial
Para esconder a data e o rodapé dos posts na página inicial, procure por:
]]></b:skin>
e cole o seguinte código depois dessa tag:
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> .post-footer { display: none; } </style>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'> h2.date-header { display: none; } </style>
</b:if>
Para entender melhor as condicionais do Blogger, acesse:
Esta última dica funcionou no Template Mínima e nos meus templates, mas talvez não funcione em outros, já que o nome dos seletores ( .post-footer e h2.date-header ), pode variar de um modelo para outro.
Exibindo apenas o texto
Se você quiser mostrar apenas o texto na home e não as imagens, procure por:
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
Substitua todo o trecho acima por este:
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
width: expression(this.width > 150 ? 150: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
display: none:
}
.thumbnailimg {
float:left;
padding:0px 10px 0px 0px;
}
59 Comments
Comments
  1. Gostei demais desse hack!
    Já estou usando!
    Parabéns

    ResponderExcluir
  2. Mais um Hack para minha Lista (rs)
    Obrigado mais uma vez ;)

    ResponderExcluir
  3. Beleza hein, eu usava este código, mas não desse jeito, ficou muito melhor, parabéns.

    http://www.bero.tk/

    ResponderExcluir
  4. Gostei desse hack. Acho que vou colocar no meu blog ^^

    ResponderExcluir
  5. Eu estou testando o seu Template business, e é justamente desse hack que estou precisando para ele ficar como eu quero, pois no template atual do meu blog já tem esta funionalidade.
    Segui toda a orientação com cuidado, para implementar o hack e, depois de clicar em Visualizar, recebi esta mensagem:
    Mensagem de erro em XML: The string "--" is not permitted within comments.
    Um abraço

    ResponderExcluir
  6. Em breve pretendo começar um novo blog e queria algo justamente nesse estilo. Ótimo post como sempre.

    ResponderExcluir
  7. Por favor, desconsidere o meu comentário sobre o erro de "--" em comment. Já resolvi.
    Obrigado

    ResponderExcluir
  8. Ótimo! já usava esse hack só não com esse funão de esconde o rodapé e a data das postagens, valeu peda dica!!!

    ResponderExcluir
  9. Aonde está Áurea? Juliana eu queria saber o que aconteceu com o Blog da Áurea desde o natal passado que ela não posta mais será que está doente? Sinto muita a falta dela se tiver notícias me informe, grato!

    ResponderExcluir
  10. Renato, a Áurea está bem. Ontem mesmo falei com ela por email, pois pedi autorização para postar o código que está neste post.
    Abraços

    ResponderExcluir
  11. Coloquei! :)
    Num falei que eu num ia resistir!
    Ficou ótimo! :)

    ResponderExcluir
  12. Só uma dica
    Quem achar que o "Leia mais »»" está muito pequeno é só alterar o tamanho da fonte em:

    font-size: 100%;

    e colocar, por exemplo:

    font-size: 130%;

    Fica a dica! :)

    ResponderExcluir
  13. Muito bom, Juliana.
    Estou pensando em fazer isso no Grandes Filmes já há algum tempo.
    Vou testar para ver como fica.
    Valeu!!!

    ResponderExcluir
  14. Gostei muito! Muito bem explicado e foi fácil para instalar!

    valeu a dica!

    beijo

    ResponderExcluir
  15. Muito, já coloquei no meu novo template http://www.henriquepicanco.com

    ResponderExcluir
  16. Muito obrigada pela dica, sua intruções são muito boas.
    parabens pelo Blog
    Bjs

    ResponderExcluir
  17. Fiz no Mãe de Cachorro e ficou DEZ! Valeu (mais uma vez), Juliana! Beijo!

    ResponderExcluir
  18. Muito obrigado por esse otimo tutorial, deu tudo certo aqui.

    ResponderExcluir
  19. Juliana, não estou conseguindo colocar o Hack dá erro.

    ResponderExcluir
  20. Está dando o seguir 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 "div" must be terminated by the matching end-tag "

    Obs: estou usando o Template DB 3.0

    ResponderExcluir
  21. Muito show esse hack. O único contra dele, é que ele demora no carregamento da página, percebi isso aqui no DB. Tanto que você o retirou não é? Pena que tenha esse contra =/.
    Deve ser por causa do sript que a gente instala, fica mais pesada a página. Não faz mal! Achei legal o post e vou instalar no meu!

    Abraços Juh!

    ResponderExcluir
  22. Kevin, eu não retirei o hack. Fiz algumas alterações ;)

    ResponderExcluir
  23. Muito bom esse Hack, uso ele em todos meus blogs :)

    ResponderExcluir
  24. Oi, Ju,

    Já estou usando o hack, mas gostaria de saber se eu posso definir a quantidade de linhas que vai aparecer no resumo.

    bj

    ResponderExcluir
  25. Olá!
    E se eu quiser colocar o Leia Mais em apenas alguns posts e não em todos, tem como?

    Abraços!

    ResponderExcluir
  26. Olá, há alguma forma de justificar o texto do resumo?

    ResponderExcluir
  27. Perfeito, até o momento não tive problemas com esse hack, ótimo post.
    ah, também estou usando um de seus templetes, depois dê uma passadinha no meu blog pra ver como que tá, abraços.
    www.megabinarios.net

    ResponderExcluir
  28. Cara, parte do "Escondendo o rodapé dos post na página inicial" funciona sozinho ou tem que instalar TUDO pra ele poder funcionar?

    ResponderExcluir
  29. O "continue lendo..." que vocês usam aqui no dicasblogger é esse automático ou vocês fazem de forma manual?

    ResponderExcluir
  30. Gabriel, tem como justificar sim, procure essa linha:


    [ div expr:id='"summary" + data:post.id' style='display:none;' ]

    Substitua:
    style='display:none;'

    Por:
    style='display:none; text-align:justify;'


    O resultado deve ficar assim:

    [ div expr:id='"summary" + data:post.id' style='display:none; text-align:justify;' ]


    PS: lembre de trocar [] por <>

    ResponderExcluir
  31. Eu me lembro desse hack, eu ficava até de noite tentando fazer e dava sempre um Owned, agora é mais fácil (:

    ResponderExcluir
  32. cara muito obrigado eu tinha um outro template que fazia isso o resumo mas ñ era legau ai eu coloquei m template be m legau mais ñ dava para resumir as postages .. procurei varios jeitos mas nenhum dava ai eu vi esse agora e funciono obrigado ;))

    http://3gpaki.blogspot.com/

    ResponderExcluir
  33. Testado e aprovado.

    Jú, avisa aê que o hack resume os textos dos marcadores também. Os paraquedistas do Google agradecem.

    Outra dica legal é avisar o pessoal que dá para trocar o leia mais por imagem.

    Aderi a ótima dica do Bruno Costa para justificar o texto.

    Avisa geral que tú é uma moça e não um "cara".

    PS.: O tempo médio da minha homepage foi para 4.37 segundos. Este hack é ótimo para quando há posts com vídeos incorporados.

    Bjks, fik com Deus.

    Keep blogging.
    Mais sucesso.
    TJ do loucosporvirtude | @loucos_virtude

    ResponderExcluir
  34. Usei o Hack mas agora aparecem dois "Leia mais.."
    Um no lugar original e outro a direita.O que faço para retira o da posiçao original?

    ResponderExcluir
  35. Juliana,

    Você conhece o hack leia mais que aparece apenas quando o leitor clica nos marcadores?
    a pagina inicial do blog permanece normal, com a postagem inteira, só quando ele clica por exemplo na tag "templates" aparece as postagens daquele marcador com o hack leia mais.
    você conhece?


    Obrigado

    ResponderExcluir
  36. Ola, muito obrigado pelos increveis posts.

    Estou tendo problemas em achar esse codigos na minha html. nao sei por que eles nao existem? teria alguma dica? obrigado

    ResponderExcluir
  37. rlaky, você deve não ter colocado 'Expandir Widgets'.

    ResponderExcluir
  38. Olá,

    excelente post! realmente me ajudou muito, com outros códigos de outros lugares não consegui implementar o " Leia mais...". Muito bom mesmo, meus parabéns!

    ResponderExcluir
  39. Muito bom esse Hack e bem facinho de se usar!
    Porém a postagem, as imagens e as letras ficaram muito pequenas; existe algum modo em que eu possa aumentá-las?

    http://fatoselivros.blogspot.com/

    ResponderExcluir
  40. esqueci de comentar que é nesse blog que eu estou com problemas http://fatoselivros-resenhas.blogspot.com/

    ResponderExcluir
  41. estou realmente irritado com isso!!! A imagem não quer aparecer...

    ResponderExcluir
  42. Oi . queria muito instalar no meu blog mas ta faltando um codigo .. o que copia abaixo da tag HEAD . Você poderia repassar o código?

    ResponderExcluir
  43. Galera, já instalei este hack em vários blogs e o código está correto. Se não deu certo, tentem novamente

    ResponderExcluir
  44. Ola, muito boa sua dica, estou utilizando a mesma, mas gostaria de saber se tem como colocar lado a lado as postagens, consegui diminuir a largura da postagem, mas colocar uma do lado da outra não, você poderia me ajudar?

    ResponderExcluir
  45. É possivel deixar desta maneira como a imagem?
    Os posts lado a lado
    http://migre.me/2UkOY

    ResponderExcluir
  46. Hunf!
    Fiz tudo direitinho, ainda por cima visitei o blog da Áurea e não deu certo... =/

    O que fiz de errado Ju?
    Tô com uma idéia legal de blog, mas não tô conseguindo desenrolar!!!! aaaaah!

    Poxa, gostei destes links separadinhos, como faço no meu?

    Consigo com o me template atual?

    Obrigada se m ajudarem! help, help!

    ResponderExcluir
  47. Olá Juliana,

    Fiz do jeito certo e ficou bom!!!

    Parabéns.

    ResponderExcluir
  48. Excelente código, vcs estão de parabens ja serei seu seguidor.

    ResponderExcluir
  49. ah, agora eu tinha que agradecer =D estou a dois dias querendo achar um modo de resumir o post na pág. inicial do blog e NADA dava certo, eu estava desistindo rsrs isso foi perfeito, ficou lindo. obrigada equipe Dicas Blogger, vocês são d_+.
    Beijos

    ResponderExcluir
  50. No meu blog funcionou porem só mostra o titulo dos posts e não mostra mais nada
    e o resumo?eu usei o primeiro modo

    ResponderExcluir
  51. Procurei muito para fazer isso no meu blog, e só conseguir fazer com estas dicas, Parabéns.
    e obrigado pela ajuda.

    ResponderExcluir
  52. Perfeito!! :D

    Deu certinho!! Vejam como ficou bem melhor o visual do meu blog com essa dica espetacular da Juliana!!

    http://bordadosvegetarianos.blogspot.com

    Abraços*

    ResponderExcluir
  53. Oi Juliana,
    Muito obrigado pela ajuda, estava proocurando um post que me explicasse como fazer isso a muito tempo...
    Ótima Dica,
    Blogger Better.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top