Pesquisar

Mostrando postagens com marcador resumo automático. Mostrar todas as postagens
Mostrando postagens com marcador resumo automático. Mostrar todas as postagens

... mole, mole, fácil, fácil...De maneira "fácil" de executar! ...Tutorial para instalar o "Hack"..." Leia Mais"

... mole, mole, fácil, fácil...De maneira "fácil" de executar! ...Tutorial para instalar o "Hack"..." Leia Mais"



 

No NOVO BLOGGER:
  

Atenção,
antes de começar  o tutorial,
salve uma cópia de seu template,
caso não dê certo, 
é só reinstalá-lo."




O "LEIA MAIS" 

...

...será
assim, colocado :

 



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.


.Primeiro Passo:

. Logado no painel blogger;
. Vá até o html de seu template blogger
e encontre o 
seguinte código:


 <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>


Ao encontrá-lo,

 substitua pelo código seguinte:

   ▼

<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>


Visualize! 
Estando tudo certo! 
Salve!



.2º- Passo:

 


.Procure por: ]]></b:skin>


 

 Encontrando-a,
 cole abaixo de ]]></b:skin>
o código a seguir:

<!-- 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-->


 


Visualize! 
Estando tudo certo! 
Salve!




Nota:

Aonde está na cor verde, no código acima,
poderá ser  alterado 
para personalizar 
os posts resumidos de 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>

...



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
}







Para você , optando em configurar, de sua maneira, a parte 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. 

Recomenda-se deixar em "true "  
se a var thumbnail_mode for definida para "float".
 


---
 

var summary_noimg = 50; 
Vem  a ser a diminuição dos caracteres, no  resumo das postagens, se deixar "ZERO", aparcerá apenas a imagem, sem caracteres (escritos)

var summary_img = 40; 

Vem  a ser a diminuição dos caracteres, no  resumo das postagens, quando seu post tem imagem. Nesse casso , o que foi escrito acima, tem de ser maior que "Zero"
 

Em tempo:

O valor atribuído = 50  representa ser  "50 (cinquenta) palavras";

e, já o valor atribuído = 50  representa ser  "50 (cinquenta) palavras"; para o classicMode definido como "true".

|||


Nota:

Caso,  você queira colocar, uma imagem, no lugar de Leia Mais


Procure por, no html de seu template blogger

<a expr:href='data:post.url'>Leia Mais</a>

Encontrando:

substitua 
Leia Mais 
pelo código:  

<img src='URL da Imagem' />

Dessa forma, você irá incluir uma imagem ao invés das palavras.


Share:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge