Pesquisar

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

0 comentários:

Postar um comentário


Mensagem do formulário de comentário:

Seguir por e-mail

Seguidores

Google+ Followers

arquivo

Google+ Badge

"Alô Negócios !!!…buscas populares"

Alô Negócios !!!…buscas populares