Resumo de posts com miniatura de imagens - "Hack"... "Leia mais"
Autor: Edilene brandao da silva | Publicado: 2014-07-08T21:08:00-07:00


<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.

 . 
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->

<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->


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


&nbsp;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,&nbsp; é tipo um modelo "padrão"
use a sua criatividade!! !



 


"Hack"



&nbsp;"Leia mais"&nbsp;

– Resumo de posts com miniatura de imagens

    







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



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

&nbsp;&nbsp; 


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



Sua&nbsp; função&nbsp; vem a ser de "resumir&nbsp;



automaticamente"&nbsp;



 todas as 
postagens do seu blog. 




Esse&nbsp; "hack" resume tudo,&nbsp;



desde os&nbsp; 
mais antigos&nbsp;posts



inclusive os&nbsp; mais recentes. 




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




Quando a postagem , não exibir imagens?



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



Bom,vamos ao tutorial,
propriamente dito :



. Logado no painel blogger;



.no&nbsp; código "html", de seu template,&nbsp; 

e no&nbsp;

css do template.




 . sendo que:

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


Se der algo errado, ou o resultado &nbsp;

não ficar como você pensa,&nbsp;

haverá a oportunidade 

de voltar tudo, como era &nbsp; seu template anterior.




Prosseguindo:



Após feito&nbsp; login na sua conta blogger;

Clicar em&nbsp; Design &gt;&gt; Editar Html;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; depois:




Pressione as teclas CTRL+F&nbsp;

para abrir&nbsp;

a busca do navegador;&nbsp;

Procure pela tag:






]]&gt;&lt;/b:skin&gt;
&nbsp;
e ,  cole,&nbsp; depois de 



]]&gt;&lt;/b:skin&gt;

código a seguir:



.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;}






 
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;


//<![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 = '';
summ = summary_img;
} else {
imgtag = '

';
summ = summary_img;
}}var summary = imgtag + '
' + removeHtmlTag(div.innerHTML,summ) + '
';
div.innerHTML = summary;}
//]]>












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,&nbsp; poderão ser modificados,&nbsp; por valores que você preferir.





Após feitas&nbsp; as alterações: 

...visualize, 

...se não houver nenhum erro; 

salve!


... 


Inserindo o "link":&nbsp; "Leia mais"

Continuando na página "editar html".&nbsp;



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




<!– clear for photos floats –>





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

&nbsp;




createSummaryAndThumb("summary");
Leia Mais ►






 <!-- clear for photos floats -->

&nbsp;


Visualize,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Salve!&nbsp;


&nbsp;Obs.: "atenção"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


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






 
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      
        
        
 <!-- clear for photos floats -->
      

      
        
        
 <!-- clear for photos floats -->
      


    
      
        
      








ou um trecho assim:


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




&nbsp;o qual, será substituído por:






createSummaryAndThumb("summary");
Leia Mais ►






 <!-- clear for photos floats -->





Observação:



Este "hack" coloca resumo das postagens em
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;seu blog automaticamente&nbsp;e


reduz as imagens dos posts.&nbsp;



Mas atenção, ele invalida o



"&nbsp;&nbsp;Leia mais"&nbsp;&nbsp; (jump break) nativo do Blogger.






Agora:

Em seguida,



procure por:



&lt;b:includable id='nextprev'&gt;



e, ao encontrá-lo,






cole&nbsp;
depois dele
o seguinte código:

▼



&lt;div style='clear: both;'/&gt;

visualize,&nbsp;
estando tudo certinho, &nbsp;
salve!





...





"Leia mais"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ou&nbsp;&nbsp;&nbsp; “Continue Lendo”  

se refere ao "link"&nbsp; 

que dará acesso ao post completo. &nbsp;











No momento em que uma pessoa,&nbsp; clicar nessa palavra;

"leia mais" ou "continue lendo"&nbsp;

será direcionado&nbsp;

ao artigo completo.&nbsp;











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

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











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

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









Visualize, 






estando&nbsp; tudo certo, 






salve!&nbsp;

&nbsp;Daí, para frente, todas as postagens ,de seu blog&nbsp;

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
















Nota:



É importante que se saiba, de que,&nbsp; 

o "hack", aqui explicado, nessa postagem,&nbsp;&nbsp;

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








&nbsp;


&nbsp;

&nbsp;

&nbsp;
Leia mais em: saibamaisaquiblogspot

<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->



.
<!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->


 . <!--
google_ad_client = "pub-3296052210640376";
google_ad_host = "pub-1556223355139109";
/* 200x200, criado 24/04/11 */
google_ad_slot = "9977440149";
google_ad_width = 200;
google_ad_height = 200;
//-->