Hack Leia Mais com Imagens Reduzidas

Existem várias formas de você colocar o hack leia mais em seu blog.
Algumas das quais eu já ensinei aqui no TPV.
Hack Leia mais com Posts Expansíveis → Neste hack os posts se expandem na página principal do blog como um efeito sanfona.
Hack Leia mais → Neste hack podemos escolher qual parte do post ficará oculta na página principal e qual ficará à mostra. Quando clicamos em "Leia mais" a página do post se abre saindo da página principal.

» Hoje vou ensinar como aplicar no seu blog o hack de Posts Resumidos Automaticamente com Thumbnails onde o próprio hack já define quantos caracteres irão aparecer na página principal do blog automaticamente sem que você defina qual parte do post irá aparecer na página principal.
» Além deste recurso este hack também apresenta a possibilidade de aparecer uma imagem reduzida (thumbnail) da imagem que você adicionou no post, também na página principal.
» Este hack é a Versão 4.1 Auto Readmore criada pelo Vietnamita Anhvo dono do blog VIETWEBGUIDE.COM
Principais Vantagens:
♥ Você não precisa se preocupar com qual parte vai se expandir ou não, tendo que aplicar o <span="fullpost">Conteúdo oculto < /span> no seu post, como acontece com os hacks anteriores;
♥ O post da página principal do seu blog aparece resumido automaticamente → Isso diminui o trabalho na hora de criar o post;
♥ Você pode configurar quantos caracteres podem aparecer na página inicial do post, qual o tamanho da imagem reduzida e de qual lado ela deve ficar no resumo do post;
♥ As miniaturas(thumbnails) das imagens não ficam deformadas nos resumos dos posts;
♥ Você tem a opção de limitar, no seu post, até onde quer que apareça o resumo usando apenas uma tag (<!-- more -->).
Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
Obs: Se você já tem o hack instalado em seu blog pode atualizá-lo para esta versão 4.1.

Vamos ao hack:
Clique em Modelo► Editar HTML

1º- Passo:

» Encontre a linha:
<data:post.body/>
Clique Ctrl+F para encontrá-la. ATENÇÃO → Será a segunda linha que você vai encontrar no HTML do blog.
Substitua-a pelo código:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><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 == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/>
</b:if>

Personalizando o [»»Leia mais....]

1- Você pode substituir as palavras »»Leia mais... Por Continue lendo..., Resto do Post, "...", etc.

2- Você também pode personalizar as palavras »»Leia mais... criando um comando CSS definido abaixo.
Copie e cole acima da linha ]]></b:skin> do HTML do seu blog o comando CSS abaixo:
♦ Para que fique apenas as palavras »»Leia mais... use o código abaixo:
/*---Readmore---*/
.rmlink {
font-size: 120%;
float: right;
margin-right: 30px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps; /*Todas as letras maiúsculas*/
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*/

♦ Para que como um botão igual a este Leia Mais use o código abaixo:
/*---Readmore Button---*/
.rmlink a { display:inline-block;
background:#FF1D23;
background-image: -moz-linear-gradient(top,#FF1D23,#5C0002);
background-image: -webkit-gradient(linear,left top, left bottom, from(#FF1D23), to(#5C0002));
color:#FFF; font-size:12px; text-decoration:none; 
margin-left:5px;padding:5px 10px; -webkit-transition-duration: .90s; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor: pointer; font-weight: bold; text-shadow: 1px 1px 1px #333; -moz-box-shadow: 0 1px 1px #9c9c9c;
-webkit-box-shadow: 0 1px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;}
.rmlink a:hover { background:#5C0002;
background-image: -moz-linear-gradient(top,#5C0002,#FF1D23);
background-image: -webkit-gradient(linear,left top, left bottom,from(#5C0002),to(#FF1D23));}
3- Se você quiser colocar uma imagem no lugar de Leia Mais:
Veja a linha: <a expr:href='data:post.url'>Leia Mais</a> e substitua Leia Mais pelo código:
<img src='URL da Imagem' />
Assim você irá incluir uma imagem ao invés das palavras.

Obs: O hack já foi atualizado para não resumir os post das páginas estáticas do blogger.
♦ Clique em Visualizar para se certificar que está indo tudo certo.

2º- Passo:

» Encontre a tag: </head>

Cole abaixo desta tag o código abaixo:
<!-- JavaScript Posts Resumidos-->
<!--/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Please dont remove this copyright or change it into your own
******************************************************/-->
<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:10px 10px 0px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}

function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
 }
 
  var s = "";
 var indentBlank = "";
 for(var i=0;i<indent;i++){
  indentBlank += " ";
 }
 if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
 } else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
 }  
 return s;
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
 } 
 else {
 
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
 }
 
 var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
 
 div.innerHTML = summary;
 div.style.display = "block";
 }
}
//]]>
</script><!-- Fim JavaScript Posts Resumidos-->
♦ Clique em Visualizar para se certificar que está indo tudo certo.

♦ Clique em Salvar modelo.

Vamos entender o código acima:

Veja a parte que está em vermelho. Nela você pode fazer alterações para personalizar os posts resumidos do seu blog.
<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;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>

1º Configurando a parte em CSS:

.thumbnailimg IMG {
max-width:150px;
→Valor máx. da largura da miniatura da imagem do seu post
width: expression(this.width > 150 ? 150: true);
max-height:120px; →Valor máx. da altura da miniatura da imagem do seu post
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
→ Lado que a miniatura ficará flutuada no resumo do post
padding:0px 10px 5px 0px; → Margem interna da imagem
}

2º Configurando alguns pontos do Script:

var thumbnail_mode = "no-float"; → Para que a miniatura fique sempre à esquerda selecione "float". Determina a flutuabilidade variável à esquerda da imagem.
var classicMode = false ; → False para modo clássico desligado. É aconselhável deixar em "true " se a var thumbnail_mode for definida para "float".
» Sugiro que você faça testes e mantenha o que melhor lhe agradar. Eu, prefiro o modo "true".
var summary_noimg = 50; → Corresponde ao corte do resumo quando seu post NÃO tem imagem.
var summary_img = 40; → Corresponde ao corte do resumo quando seu post tem imagem.
» Respectivamente o valor 50 significa "50 palavras" e o valor 40 significa "40 palavras" para o classicMode definido como "true".
♦ Clique em Visualizar para ver suas alterações.
♦ Se estiver tudo OK»» Clique em Salvar modelo.

Veja como ficou nos templates modelo 2006 e 2010 do blogger.

3º Passo - Opcional

» Você pode definir até onde o seu post será exibido na página principal usando uma única tag.
<!-- more -->
Você pode usar esta tag no meio do seu post, por exemplo veja a imagem:


OBSERVAÇÃO IMPORTANTE: Quando você configurar até onde será o resumo do seu post e esta parte tiver uma imagem, esta imagem não irá aparecer como miniatura da forma que aparece no resumo automático .

Fonte: Tradução e adaptação do link Auto Readmore ver 4.1

►Post Atualizado em 04/03/2014
Qualquer problema encontrado por favor me avisar para que este post possa ser útil sempre.

NÃO Retire os Créditos!
NÃO é Permitido redistribuir os templates ou os tutoriais/hacks do TPV sem a prévia autorização de sua Autora.
Observação: Este hack pode ser utilizado nos templates da plataforma Blogger 2006  e 2010.
Hack Leia Mais com Imagens Reduzidas Hack Leia Mais com Imagens Reduzidas Reviewed by Aurea on 3/04/2014 Rating: 5

97 comentários:

  1. Olá!

    Bom segui as orientações do post. Mas não sei se ficou legal o hack no meu blog! Na verdade não consigo ver nada antes do Continua...

    O que será que saiu errado?

    ResponderExcluir
  2. @Márcia Olá Márcia, Já corrigi o problema. Muito obrigada por avisar.

    ResponderExcluir
  3. Adorei esse tutorial tou usando ele no meu blog, ficou muito legal, vlw

    ResponderExcluir
  4. Nossa. Era isso o que eu estava exatamente procurando. Olhei em outros lugares, mas nunca dava certo. Aqui funfou direitinho.

    Muito obrigado por compartilhar essa dica conosco. Ficou muito bom! =)

    Abraços.

    ResponderExcluir
  5. Muito bom eu já fiz isso e deu certinho!!!

    ResponderExcluir
  6. esse tutorial realmente é muito bom, gostei mesmo, muito obrigado! xD

    ResponderExcluir
  7. para mim esse é o melhor hack leia mais. só colocar e pronto e nao prescisa dos códigos chatos. excelente.

    ResponderExcluir
  8. Já tinha usado esse hack e tinha dado tudo pefeito, só que mudei de template e agora quando cliko em leia mais aparece o post duas vezes mesma pagina, um embaixo do outro.

    Tem alguma ideia do que pode ser?

    ResponderExcluir
  9. Desculpe incomodar novamente mas erra uma pequena falha na template nada a ver com o código.

    ResponderExcluir
  10. Olá,
    Adorei este hack.
    Ficou ótimo em meu blog!

    Gostaria apenas de tirar uma dúvida.
    Quando eu quiser que o post apareça completa, como faço?
    Por exemplo, agora nas novas páginas estáticas que o blogger oferece não funciona muito bem.. =/

    Desde já, agradeço!

    ResponderExcluir
  11. Obrigao pelo post, os outros tutoriais que encontrei estavam todos "vencidos"

    ResponderExcluir
  12. O primeiro código que deu certo muito obrigada

    ResponderExcluir
  13. Muito muito muito bom. Adorei! Parabéns pelo blog, seus tutoriais são sempre fáceis de entender e bem explicados!

    ResponderExcluir
  14. como faço para colocar uma imagem no lugar de leia mais???????????

    ResponderExcluir
  15. Bah, muito obrigado...o hack funcionou direitinho. Estou mudando de template e o nove não tem, ou melhor não tinha o "Leia Mais". Valeu!

    Abr.

    Paulo

    ResponderExcluir
  16. Muito obrigado, foi de muita valia seu post. Já estou usando no meu blog. Adorei a dica.

    ResponderExcluir
  17. Depois de tanto procurar encontrei sua postagem muito bem explicativa,
    Muito obrigada!
    Eu fiz em um blog de textes e deu certinho\0

    ResponderExcluir
  18. ...o menininha parabéns vc faz tudo direitinho, excelente post, e, bem explicado, até os mais leigos com certeza entendem, continue assim! bj abraço Uno

    ResponderExcluir
  19. Ola, muito bom o tutorial, já estou utilizando o mesmo, mas gostaria de saber se é possível colocar as postagens lado a lado, consegui diminuir a largura da postagem, mas colocar uma postagem ao lado da outra não foi possível, você poderia me ajudar por favor?

    ResponderExcluir
  20. Otimoo!, Gostei muito Desse Hack ...
    Só uma Duvida Áurea, tem como colocar aqueles classicos " ... " 3 Pontos no final da ultima palavra ? Agradeço desde já,bjão.

    ResponderExcluir
  21. Primeiramente muito obrigado pelo tutorial, mas gostaria se possível que me esclarecesse uma dúvida. Gostaria de saber se é possível especificar na postagem alguma tag (ou qualquer outra coisa) que faça com que o hack não seja utilizado nela. Pergunto isso porque quando faço alguma postagem contendo somente um vídeo, o resumo não mostra o vídeo, somente um monte de códigos estranhos. De antemão lhe agradeço e te parabenizo pelo grande trabalho feito neste blog.

    ResponderExcluir
  22. Muito bom Áurea, só uma duvida, na questão se o post tiver videos tem como aparecer pelo menos um video ou vou ter q add uma imagem no começo?
    Obrigado, se tiver afim de rir um poquinho visita o meu blog, bjo

    ResponderExcluir
  23. Outro detalhe: Como faço para retirar esse código das páginas estáticas?

    ResponderExcluir
  24. Bom dia.

    Parabéns pelo hack. Fiz tudo certinho e está a funcionar. Mas agora tenho um problema. Eu não quero que este hack se aplique às outras páginas que tenho no blog. Sabe como resolver isso?

    Obrigado,

    Vitor Sarabando

    ResponderExcluir
  25. Tem como ajustar a imagem de forma individual?

    ResponderExcluir
  26. Olá boa noite, coloquei o hack no meu blog funciona que uma beleza, estou apenas com um probleminha ao trocar "Lei Mais" por "CONTINUE LENDO" este ficou em caixa alta, não era o resultado que eu esperava, pois gostaria que ficasse "Continue Lendo" o que faço? onde devo alterar para obter este resultado? meu blog "admrenatomaia.blogsport.com.br" aguardo resosta.

    ResponderExcluir
  27. Postei um comentário acerca da post, acho que não foi publicado devido ao link. Desculpe. O hack é ótimo funcionou um beleza, porém ficou em caixa alta como colocar em caixa baixa "Lei Mais..." ou "Post Completo" no meu caso. Tem outro problema nas Páginas que tenho por exemplo CONTATO,PAS ODONTOLOGICO, AO SERVIDOR e etc.. o hack também resumiu o conteúdo, mais em compensação não apareçe o texto completo. O que fazer? aguardo a resposta

    ResponderExcluir
  28. Muito obrigado mesmo.
    Este foi o único blog que conseguiu me ajudar com esse problema, valew mesmo.

    parabéns pelo blog.
    visitarei sempre a partir de hoje

    ResponderExcluir
  29. porque as miniaturas não fica com link do post,
    eu quero que fique igual a do Wordpress com link isso seria possível. Agradeço

    ResponderExcluir
  30. só funciona com alguns templates e não com todos.....

    ResponderExcluir
  31. eu tinha perdido o leia mais ,quando mudei de template e graças a este excelente post...estou com ele de volta...obrigadaço...fuiiiiiiii

    ResponderExcluir
  32. Eiita,tentei em varios tutoriais e nenhum funcionava.
    Lembrei do Template Para Você e não deu outra,funcionou de primeira.
    Muiito obrigado e continue fazendo otimos posts como esse!

    ResponderExcluir
  33. Eu usava esse hack e ele funcionava sem nenhum problema agora nao sei porque ele numca da certo sempre some toda a postagem e fica apenas o Leia Mais porque favor me ajude ae.

    ResponderExcluir
  34. Muito bom este tutorial eu naum tava achando de jeito nenhum para resumir postagem por sorte achei esse site

    ResponderExcluir
  35. Muito bom esse hack, mas tem um problema nas paginas estaticas fica aparecendo tambem o leia mais como faço pra retirar isso , desde ja agradeço.

    ResponderExcluir
  36. Olá, obrigado pelas dicas.
    Uma pergunta, no caso eu adicionei o Leia Mais, em meu blog, mas as 10 paginas extras não estão abrindo o Leia Mais, falta algum código...

    ResponderExcluir
  37. Eu tenho uma dúvida meio boba: Se eu usar esse hack, todas as postagens vão obrigatóriamente aparecer reduzidas? Porque eu gostaria que apenas um determinado assunto (muito repetido no blog) de postagem permanecesse reduzido (isso eu já faço usando o jump break, mas assim a imagem não fica reduzida)

    Abraço

    ResponderExcluir
  38. Adorei o tutorial e já instalei no template,deu tudo certo..valeu!!

    ResponderExcluir
  39. Muito Obrigado por esse tutorial. Procurei muito na net para procurar um hack de postagens resumidas que não distocesse as imagens!!!!

    Obrigada mesmo por compartilhar!

    ResponderExcluir
  40. Excelente trabalho, adorei. Você explica muito bem. Obrigada!
    Abraços,
    Roberta

    ResponderExcluir
  41. Olá, primeiramente gostaria de agradecer e parabenizar pelo excelente trabalho feito acima e em todo o seu blog. Em seguida gostaria que me ajudasse em umas dúvidas.

    1- Como deixar todo o resumo do lado direito da imagem e não abaixo da mesma?

    2- Fiz tudo o que tem no tutorial e mesmo assim meu texto não resumiu, criei um post de teste e coloquei diversas palavras com nome "TESTE" e nada aconteceu. Só foi cortado quando utilizei a ferramente opcional disponibilizada aqui mesmo.

    3- Gostaria de deixar as reticências (...) quando um texto for cortado. Tem como?

    Desde já agradeço. Estou na construção do meu blog e fiquei super feliz com esse tutorial, faltando apenas detalhes para que fique perfeito para meu uso. Aguardo respostas.

    ResponderExcluir
    Respostas
    1. Você não fez tudo certinho, tente mais uma vez... Prestando muita atenção ao texto!

      Excluir
  42. Ola,

    Fiz tudo que foi orientado aqui e funcionou muito bem, menos por uma questão e gostaria de ajuda.
    Criei uma página que também ficou resumida, assim como a página principal. Porem ao contrário da página principal está pagina que criei não expande quando clico no MAIS>.
    O que posso fazer para resolver este problema? Posso criar mais de uma página como faço com os posts?
    Fico grato com a ajuda!!

    ResponderExcluir
  43. queria saber se tem como por uma imagem ao inves do leia mais...
    Tem como?

    ResponderExcluir
    Respostas
    1. Daniel,
      Tem como colocar uma imagem sim. Vou atualizar este post com esta informação.

      Excluir
  44. Olha tem um serio problema nesse hack e que você não percebeu, os resumos acontecem com a pagina principal(correto) MASSSSSSSSSS em paginas extras no blog esse hack também resume as postagens, e quando olhei se a postagem nessa pagina expandia, nãaaaaaaaaaoooooooo expandiu!!!!!! Pode resolver? ficaria grato!!!

    Pagina extra "Eu quero um Blog"

    ResponderExcluir
    Respostas
    1. Phablo,

      O código já foi corrigido para não resumir os posts das páginas estáticas do blogger.

      Excluir
  45. eu ainda coloco eu banner no meu blog sem mesmo pedir parceria e só quis uma resposta!!!

    Obrigado :)

    ResponderExcluir
  46. Eu não consigo encontrar o no meu HTML.O que eu faço?

    ResponderExcluir
  47. Oi Fiz aqui e deu tudo certo, muito bom!
    Obrigado!

    ResponderExcluir
  48. Como faz agora para tirar o "leia mais" das paginas estaticas? =(

    ResponderExcluir
    Respostas
    1. ola amigo, para isso vc terá que colocar diferente, vai ter que colocar mais condicionais se precisar de ajuda me add eudesamarelo@hotmail.com ou acessa o meu blog e deixa um comentario, posso te passar o codigo html porem aki não dá, não da pra publicar codigos html nos comentarios

      Excluir
  49. Parabéns pelo conteúdo, gostei muito ;)

    ResponderExcluir
  50. adorei muito mesmo, ajudou de mais...mas como faço para remover o lei-mais das páginas do blog?

    ResponderExcluir
    Respostas
    1. Matheus,
      Vou publicar um post de como retirar o hack instalado. É só aguardar um pouco.
      Obrigada.

      Excluir
  51. Olá.
    Como eu faço para extrair tudo o que foi realizado nesse tutorial?
    Eu quero procurar outro porque não quero que apareça o "Leia Mais" nas páginas, quero que apareça só no post =\

    ResponderExcluir
    Respostas
    1. ola amig, vc tem certeza que colou tudo no lugar certo? se colou no lugar errado, vai dar errado, da uma conferida, testa em um blog novo antes de aplicar no blog definitivo

      Excluir
  52. Boa tarde, no caso dos videos?
    o codigo não cria thumbnail para eles?
    porque comigo correu tudo bem, excepto que não cria as miniaturas dos videos.
    obrigado

    ResponderExcluir
  53. Olá! Adorei a postagem. No caso, eu tentei alterar as dimensões da imagem que aparece na página inicial, como automática, e ela só cresce até determinado valor, sempre proporcional à inicial. Eu gostaria de deixá-la com altura de 280 e 550 de largura, mas não fica. Fica como se ela só crescesse proporcionalmente. Como posso alterar isso?

    ResponderExcluir
  54. Enviei um comentário há pouco para tirar uma dúvida, mas já a sanei. A questão agora é a mesma de uma outra pessoa de comentários anterior: Como colocar os "..." no final do resumo do post na página inicial? Porque com o seu código ele não vem. Agradecida. :D

    ResponderExcluir
    Respostas
    1. Nana,

      A resposta para sua dúvida não estaria no 1º Passo em Personalizando? Substituindo »»Leia Mais por "...".
      Espero ter ajudado.

      Excluir
  55. Não, não estaria. Não é o link "Leia mais" que quero alterar. Quero que o "Leia mais" permaneça ali, no cantinho do resumo, para as pessoas clicarem e abrirem o post completo. Estou me referindo ao momento do corte no post, não deveria ter uma reticência na última palavra do resumo, indicando que ele foi cortado?

    ResponderExcluir
    Respostas
    1. Entendi,
      Parece que esta seria uma alteração no javascript do hack.
      Não sei mexer nos códigos java.
      Mas encontrei mais hacks como este e vou publicá-los logo, aí verei se eles contém esta mudança e posto aqui.
      Boa a sugestão! Obrigada.

      Excluir
  56. Gostei muito da postagem, porém depois que eu fiz tudo isso no início do blog tem um negocio escrito
    !-- JavaScript Posts Resumidos-->
    Como faço pra tirar??
    Obrigada.

    ResponderExcluir
    Respostas
    1. @livrosquefazemsonhar
      Já corrigi este problema. Faltava o < no começo. É só copiar de novo e colocar no sue blog.
      Obrigada por avisar.

      Excluir
  57. Olá Aurea eu estava com um problema nesse Hack ele estava só aparecendo o link e não o resumo e imagem dos pots, mas eu refiz tudo seguindo seu tuto e resolveu, é bem explicativo é só seguir passa a passo e seguir a risca o que está escrito muito obrigado pelo post ajudou bastante até, bom fim de semana.

    ResponderExcluir
  58. @Márcio FerreiraQue legal Márcio,

    Sempre que publico os tutoriais foi depois de muitos e exaustivos testes.
    E mesmo assim, algumas vezes falta alguma coisa.Sempre peço aos leitores que indiquem alguma falha.

    Até hoje ninguém soube expressar tão bem a intenção que tenho ao explicar tudo com tantos detalhes. Por isso demoro tanto para escrevê-los.
    Muito obrigada por gostar daqui e por seu comentário.

    ResponderExcluir
  59. Muito bom tutorial, como faço para posicionar a imagem do "Leia mais". Quero por ela no lado da imagem

    ResponderExcluir
    Respostas
    1. Thiago,
      Estou estudando como fazer o que você está perguntando.
      Com isso vou atualizar este post. Só que estou com pouco tempo...
      Assim que conseguir te falo. Desculpe a demora!

      Excluir
  60. Fiz uma manutenção no meu blog, portanto perdi esse código, mais o blog não permite copiar nada.

    ResponderExcluir
    Respostas
    1. Olá Thiago,
      Já corrigi este problema. Havia detectado, mas ainda não tinha tido tempo de corrigir.
      Pode copiar tranquilo o código que vai dar certo!
      Seja sempre bem vindo!

      Excluir
  61. Oi sou eu Anadir.sabe,eu descobri por um erro meu ao clicar em;postar foto.que clicando naquele envelopinho rasgado,não é preciso colocar a tag more em todos os textos.Fiquei contente ao descobrir isso.Entrei em um site que ensina fazer HTML,fiz o meu mas não sei usá-lo.Vou continuar tentando.Pois tenho vontade de aprender a fazer
    Templates e layouds. .
    Boa tarde.

    ResponderExcluir
    Respostas
    1. Olá Anadir,
      Vi seu comentário anterior, mas não publiquei porque não segue as regras de comentários do blog.
      Você pode divulgar o conteúdo do TPV sim desde que cite a fonte.
      Não entendi sua dúvida deste comentário.
      Seja sempre bem vinda ao TPV.

      Excluir
  62. Olá! Estou preparando um blog usando o Blogger, usei o código e funcionou direitinho, agora surgiu uma dúvida. Em algumas postagens ponho vídeos, gostaria de saber de há como criar uma miniatura p/ eles ou como inserir uma imagem que nao apareça no corpo da postagem.
    Grato!

    ResponderExcluir
    Respostas
    1. Olá Silvio,
      O hack não irá criar a thumbnail do vídeo automaticamente.
      Sugiro que você crie uma imagem indicando que é um video o conteúdo do seu post e utilize esta imagem em seus posts.
      Estou preparando outro hack leia mais que tem uma imagem automática quando o post não possui imagem. Logo publicarei.
      Seja bem vindo ao TPV.

      Excluir
  63. Não consigo achar o codigo < div class='post-body entry-content'>

    Me ajuda por favor!!

    ResponderExcluir
    Respostas
    1. Olá Fernanda,
      Procure por [ post-body entry-content ] apenas que pode ser que o seu esteja entre aspas duplas aí não dá para encontrar.
      Seja bem vinda ao TPV.

      Excluir
  64. o nome da postagem fica acima da imagem,voce não saberia como deixar o nome da postagem a frente da imagem?

    ResponderExcluir
    Respostas
    1. O Projetor,
      Para isso teria que alterar a localização das tags div no html do blog. Ainda não sei como fazer isso, mas assim que souber coloco aqui!

      Excluir
  65. sem duvida nenhuma esse codigo nao funciona no meu blog, nao sei porque.
    mas valeu pela ajuda.

    ResponderExcluir
  66. Olá Aurea boa tarde.

    Adoro os seus posts e com certeza vou testar esse hack em meu blog de testes. Gostaria muito se pudessas fazer um post nos ensinando a criar um hack igual ao que vc usa aqui no seu blog. Elé é muito bonito e elegante.

    Desde já a agradeço.

    Abraços.

    ResponderExcluir
  67. Como eu faço pra colocar " NEW MOVIES" "RECENT GAME" e "TECH REVIEW" no blog. queria deixar igual a este
    http://bpress-cbtblogger.blogspot.com.br/ ele esta a baixo do slide

    ResponderExcluir
    Respostas
    1. Olá Gabriel,
      Visitei o template que você falou, mas não vi o que você está perguntando!

      Excluir
  68. Oi Aurea, tudo bem?
    Segui seu conselho mas não consegui implementar o Leia Mais...
    Continua a configuração normal que estava antes, da quebra de página do Blogger..

    O que pode ter acontecido?

    ResponderExcluir
  69. Olá. Eu não estou conseguindo colocar no meu blog. O que será que está errado?

    ResponderExcluir
  70. Nossa ta de parabens, foi o unico codigo que funcionou no meu blog muito Obrigado mesmo, Ta de parabens

    ResponderExcluir
  71. o meu so não consigo colocar a emagem leia mais fica aparecendo mais informaçoes... como faço para corrigir o erro ?

    ResponderExcluir
  72. Oi Aurea, tudo bem?
    Segui seu conselho mas não consegui implementar o Leia Mais... o texto ficou reduzido mais fica a palavra mais infoemaçoes não consigo de jeito nenhum colocar o a imagem leia mais...

    O que pode ter acontecido?

    me ajuda por favor

    ResponderExcluir
    Respostas
    1. Olá Nildo,
      Entre no HTML do seu blog clique em cima do código e digite: Ctrl+F
      Então procure pelas palavras "mais informações". Assim que encontrar pode mudar da forma que quiser.
      Vi também que você colou 2 vezes o javascript deste hack em seu código fonte. Sugiro que elimine um deles.

      Excluir
  73. ver la no http://palavrareveladaoficial.blogspot.com.br/ como ficou gostei muito pois o tetxo ficou reduzido so que não consigo colocar a imagem leia mais fica o nome mais informaçoes...


    O que pode ter acontecido?

    ResponderExcluir
  74. Adorei....

    Consegui fazer tudo certinho o único problema é que não expandi quando clico em leia mais pq sera?
    pode me ajudar?

    ResponderExcluir
  75. Exelente meeeeu!

    se alguem optar por definir as miniaturas em tamanhos iguais na pagina inicial, pode alterar o campo:

    .thumbnailimg IMG {
    max-width:150px;
    width: expression(this.width > 150 ? 150: true);
    max-height:120px;
    height: expression(this.height > 120 ? 120: true);

    para:

    .thumbnailimg IMG {
    max-width:150px;
    width: 200px;
    max-height:120px;
    height: 200px;

    no caso eu optei por definir minhas imagens na pagina inicial de tamanho 200 x 200

    esse blog é o melhor!

    divulgar.info

    ResponderExcluir
  76. Ola, era exatamente o que estava procurando, mas ao colocar no meu blog, duplicou as postagens... o que sera que houve??

    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.