Resumo de posts com miniatura de imagens - "Hack"... "Leia mais"

. . Resumo de posts com miniatura de imagens - "Hack"... "Leia mais" 


 Veja modelo aplicado clicando ►aqui◄


O presente tutorial, visa, dar orientação, de como é realizado o passo - a - passo, pois, cada pessoa, pode alterar, como melhor lhe convir, as dimensões, cores, alterar os caracteres etc.


Aqui, nesse tutorial,  é tipo um modelo "padrão"
use a sua criatividade!! !

"Hack"

 "Leia mais" 

– Resumo de posts com miniatura de imagens

O "hack" de resumo de postagens, é muito conhecido , simplesmente, como  “Leia mais”,   o que confunde muito as pessoas , quando     querem      saber como se faz.

Então,
temos, popularmente, assim, chamado:
“Leia mais” = "resumo de postagens"

  

A função do "hack" ..."Leia mais" :

Sua  função  vem a ser de "resumir 

automaticamente" 

todas as postagens do seu blog.

Esse  "hack" resume tudo, 

desde os  mais antigos posts

inclusive os  mais recentes.

O "hack" mostra  o  " resumo do post", e,  mostra  também, 01 (huma ) miniatura com a primeira imagem contida  dentro da "postagem" ="post" .

Quando a postagem , não exibir imagens?

Não será exibida miniatura da imagem, pois  a postagem não contivem  imagem, e sim somente texto!
 

Bom,vamos ao tutorial,
propriamente dito :

. Logado no painel blogger;

.no  código "html", de seu template, 

e no 

css do template.

. sendo que:

      Antes de começar as alterações ,
      é necessário que  se faça backup do seu template. 

Se der algo errado, ou o resultado  

não ficar como você pensa, 

haverá a oportunidade

de voltar tudo, como era   seu template anterior.

Prosseguindo:

Após feito  login na sua conta blogger;
Clicar em  Design >> Editar Html;

      depois:

Pressione as teclas CTRL+F 

para abrir 

a busca do navegador;
 

Procure pela tag:

]]></b:skin>

 
e , cole,  depois de

]]></b:skin>

código a seguir:

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <style> .post { width: 500px; height:400px; margin: 16px 8px 6px 8px; padding:4px 2px 4px 2px; background: #fff; border: 3px groove #ccc; overflow:hidden; float: left; } .post h3 { font-size: 12px; background: #F5F5DC; text-shadow: #ccc 1px 1px 1px; font-weight:bold; padding:10px 0; height: 40px; } .post-body { height: 250px; overflow:hidden; } .post-body img { width:100px; height: 100px; float: left; overflow:hidden; margin: 3px; padding: 2px; border: 1px solid; } .post-footer { overflow:hidden; margin: 10px 0 -1px 0; padding: 10px 0 -2px 0; background: #F5F5DC; } .post-footer-line-2 {display: none;} .post-footer-line-3 {display: none;} .date-header {display: none;} </style> </b:if> </b:if> <script type='text/javascript'> var thumbnail_mode = "float" ; 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>

As alterações:

• summary_noimg = 450; o valor 450 equivale ao número de caracteres que serão mostrados se o post não tiver imagens;
• summary_img = 400; o valor 400 equivale ao número de caracteres que serão exibidos caso o post tenha imagens;
• img_thumb_height = 100; o valor 100 equivale a altura da miniatura;
  img_thumb_width = 100; o valor 100 equivale a largura da miniatura;

Os valores numéricos, que estão citados, acima,  poderão ser modificados,  por valores que você preferir.

Após feitas  as alterações:

...visualize,

...se não houver nenhum erro;

salve!

...

Inserindo o "link":  "Leia mais"

Continuando na página "editar html". 

...abra a busca do navegador de novo = (CTRL+F) e encontre  o seguinte código:

<data:post.body/><div style=’clear: both;’/> <!– clear for photos floats –></div>




Apague o código citado, acima,  e 
cole, o seguinte código:

 <div class='post-body entry-content'> <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> <span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span> </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> <div style='clear: both;'/> <!-- clear for photos floats --> </div>  


Visualize,      

Salve! 


 Obs.: "atenção"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


...Nos templates do novo blogger,
você vai encontrar é este trecho:

<b:if cond='data:blog.metaDescription == ""'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:else/> <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> </b:if> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if>

ou um trecho assim:


 <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>




 o qual, será substituído por:

<div class='post-body entry-content'> <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> <span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span> </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> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

Observação:

Este "hack" coloca resumo das postagens em

                                                                                         seu blog automaticamente e

reduz as imagens dos posts. 

Mas atenção, ele invalida o

"  Leia mais"   (jump break) nativo do Blogger.

Agora:

Em seguida,

procure por:

<b:includable id='nextprev'>

e, ao encontrá-lo,

cole 
depois dele
o seguinte código:

▼

<div style='clear: both;'/>

visualize, 
estando tudo certinho,  
salve!

...

"Leia mais"      ou    “Continue Lendo”

se refere ao "link" 

que dará acesso ao post completo.  

No momento em que uma pessoa,  clicar nessa palavra;

"leia mais" ou "continue lendo" 

será direcionado 

ao artigo completo. 

Pode usar qualquer frase , palavra, no lugar de "conrinue lendo", ou "leia mais". 

Pode-se usar, no lugar das frases e / ou palavras ditas acima, usar uma imagem!

Como também, pode-se  anexar  "uma imagem"

ao lado da palavra e/ou frase, ou adicionar  um "botão CSS"!!

Visualize,

estando  tudo certo,

salve!
 

 Daí, para frente, todas as postagens ,de seu blog 

 estarão no estilo de " resumo automático".

Nota:

É importante que se saiba, de que, 

o "hack", aqui explicado, nessa postagem,  

não interfere nas páginas estáticas do blog.

 

 

 

  Leia mais em: saibamaisaquiblogspot

. .