Resumo de Postagem Automático com imagens na Página Inicial

A maioria dos blog aparecem somente um resumo da postagem na página inicial, onde no final aparece escrito “Leia Mais”, ou “Continue Lendo”, e quando clicamos aparece a postagem completa.Eu uso aqui no meu blog,e particularmente acho que dá uma estética melhor á pagina inicial, evitando que a home fica extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Hoje vou ensinar como incluir este ‘hack’ no seu blog.
Com estes recurso suas postagens se resumirão automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem, juntamente com uma miniatura da imagem utilizada no post.

Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado.

Para evitar problemas na dependência com algum servidor externo, é preferível que instale o script diretamente no template.
No código a seguir, o hack “Leia Mais” não se aplicará nas Páginas Estáticas, as postagens só aparecerão resumidas na página inicial,marcadores e arquivos.

1º passo – incluir o script no template:

Acesse o painel do Blogger, entre no modo ? ‘editar html’ do seu template (não precisa clicar em ‘expandir modelo de widget’) e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:

 
<!-- JavaScript Resumo do Post --> 
<script type='text/javascript'> 
var thumbnail_mode = &quot;float&quot; ; 
summary_noimg = 450; 
summary_img = 400; 
img_thumb_height = 100; 
img_thumb_width = 100; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} } 
strx = s.join(""); } 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; } 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
if(thumbnail_mode == "float") { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; 
summ = summary_img; 
} else { 
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>'; 
summ = summary_img; 
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary;} 
//]]> 
</script> 
<!-- JavaScript Resumo do Post - Fim--> 

Caso tenha dificuldades em copiar o código acima, copie o conteúdo deste arquivo.txt e cole-o ANTES da tag </head>.

Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:
Em summary_noimg ? é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.
summary_img ? Indique o número de caracteres do resumo para o texto que contiver imagens.

É neste trecho que você vai definir o tamanho que você quer que as imagens do resumo tenham:
img_thumb_height ? Indique a altura da imagem
img_thumb_width ? Indique a largura da imagem

Visualize e Salve!
Agora vamos a 2ª etapa.

2º passo – edição no html:

Volte no menu “modelo” ? “Editar html”, clique em ‘expandir modelos de widgets’ e procure por:

 
<div class='post-body entry-content'> 
<data:post.body/> 
<div style='clear: both;'/> <!-- clear for photos floats --> 
</div> 
 

Apague tudo e substitua por:

 
<div class='post-body entry-content'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> 
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> 
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span> 
</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 --> 
</div> 
 

A palavra “Leia Mais” se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e direcionado à página do post completo. É neste espaço que você coloca o texto que preferir (Ex.Continue Lendo,Ler Todo Artigo, Leia Mais, Ver Conteudo etc).

Você pode também personalizar o link “leia mais”, de diversas maneiras,substituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do link, com uma seta, por exemplo.
Veja como proceder logo abaixo:

3º passo – Personalizando o Link ‘Leia Mais’:

Para substituir o texto por uma imagem, acesse o menu “modelo”, entre em “editar html” do seu template e procure por este trecho:

 
<span id='showlink'><a expr:href='data:post.url'>Leia Mais ? 
 

E substitua o texto ‘Leia Mais’ por:

 
<span id='showlink'><a expr:href='data:post.url'> 
<img src="URL-DA-SUA-IMAGEM" /> 
 

Para incluir uma imagem ao texto ‘Leia Mais’, acrescente logo em seguida a ele:

 
<img src='ENDEREÇO-DA-SUA-IMAGEM'/> 

4º passo – aplicar estilos CSS:

Se você quiser, poderá também personalizar estilos para o link ‘Leia Mais’, para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :

 
#showlink { 
font-size: 11px; /* escolha o tamanho da fonte para o link */ 
float: right; /* escolha se quer link flutuando à esquerda ou direita */ 
margin-right: 30px; /* aplique margens para posicionar link */ 
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */ 
font-weight: bold; 
} 
 
#showlink a { 
color: #ffffff; /* escolha a cor de seu link */ 
} 
 
#showlink a:visited { 
color: #cccccc; /* escolha a cor de seu link quando visitado */ 
} 
 
#showlink a:hover { 
color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */ 
} 
 

Confira o artigo:Criando estilos para o Hack ‘Leia Mais’ de postagem resumida e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Tags:
Comentários
  1. Marcos
  2. Douglas
  3. José
    • Vanessa
  4. Mario
  5. Mario
  6. TheBiel73
  7. Marcelo
  8. Reinaldo
  9. Tibério César
  10. ploc
    • Vanessa
  11. samuel ambrosio
  12. Hemerson
  13. Jéssica
  14. Valdiney
  15. Lucas
    • Vanessa
      • Lucas
  16. Alvaro
  17. Sergio-F
  18. Filipe Silva ivo
  19. Rodrigo Anjos
  20. Andson Boa Sorte
  21. bcommv
  22. looney catt
  23. Dani Fuller
  24. Ju Monteiro
  25. .:: Clau ::.
  26. Pandora
  27. .:: Clau ::.
  28. Thyego Ferraz
  29. Rafael Silva
  30. .:: Clau ::.
  31. Humberto "Jones Cray"
  32. TábZombie
  33. Luiz Guilherme
  34. Lu_Guii
  35. Sandro3a
  36. João Neto
  37. Arranque na Web
  38. Testei... e você???
  39. Testei... e você???
  40. Jr Marques
  41. Jerfferson Araújo
  42. Coca Cola
  43. ????a
  44. .:: Clau ::.
  45. thamiires
  46. testeievoce
  47. Duuh Tankian
  48. Zaraki
  49. .:: Clau ::.
  50. Roneide Sousa
  51. RvPokedex
  52. Andreonni
  53. .:: Clau ::.
  54. Jean Corauci
  55. AntonioAlves
  56. .:: Clau ::.
  57. .:: Clau ::.
  58. link
  59. Rafael Snatos Almeida
  60. Tayls? F?li??™
  61. Lukas
  62. Lúh Galativicis
  63. .:: Clau ::.
  64. Guilherme Turatti Fonseca
  65. Edu Aurrai
  66. .:: Clau ::.
  67. -=|G¡äñ|=-
  68. .:: Clau ::.
  69. Paula
  70. Turse
  71. ::Clau::
  72. ::Clau::
  73. Bre
  74. gilvancn
  75. ::Clau::
  76. Bre
  77. Marcos Danilo
  78. Marcos Danilo
  79. ::Clau::
  80. Alysson Nathan Girotto
  81. ::Clau::
  82. Alysson Nathan Girotto
  83. ::Clau::
  84. gilvancn
  85. ::Clau::
  86. gilvancn
  87. Ronaldo
  88. Bruno Sajermann
  89. .:: Clau ::.
  90. Bruno Sajermann
  91. Bruno Sajermann
  92. ::Clau::
  93. Ajasta Gayatri
  94. Tavão
  95. ::Clau::
  96. ::Clau::
  97. Paola - Rock Glamour
  98. ::Clau::
  99. Claudio Sanches
  100. Natinho Brito
  101. Ruiva