Tutorial Blogger: Hack “Leia mais” com resumo automático

preview hacker
Nesse tutorial vamos ensinar a como instalar o hacker “leia mais” na plataforma “Blogger”, no qual utilizamos aqui no Guia da tecnologia.

Muitos blogs postaram esse tutorial de várias maneiras, alguns foram simples demais outros foram mais complexos, eu vou ensinar do meu jeito, no qual coloquei aqui no nosso blog, achei super fácil de colocar, mas em vários testes alguns templates tiveram o layout “quebrado” por causa do java script, impossibilitando a navegação no blog…

O tutorial aqui postado tem em base os seguintes tutoriais:

Primeiro você deve baixar o template para poder continuar com o tutorial. Vamos começar?

1 – Acesse o painel novo do Blogger > Clique em seu blog > Modelo > Editar HTML > Prosseguir > e marque a caixa “Expandir modelos de widgets

2 – Pesquise com Ctrl+F:


<div class='post-body entry-content'>
<data:post.body/>

3 – Substitui a tag <data:post.body/> pelo:


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>Leia mais »»</a></div>
</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>

4 – Depois de copie o código abaixo e cole em cima da linha ]]></b:skin>:


.rmlink {margin-right: 30px; margin-top: 50px; color: #017bf7;} .rmlink a:visited {color: #0b357d;}

5 – Para colocar o java script, procure pela tag </head> e cole abaixo dela o código abaixo:


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

Clique em “Visualizar” pra ver se deu certo, se não deu erro nenhum, Salve o modelo!

Se achar que esta estragando o template basta usar o Backup feito no inicio deste tutorial ou removendo todos os scripts colocados…

Qualquer problema basta comentar =D

  • Man nem deu bugo o tenplate kk mais vlw

  • Algumas imagens do hack ficaram grandes passando da área da postagem, porém quando clico em ler elas estão normal. Como configuro isso? Não entendo muito de script e não tem nenhum valor px no hack.

  • não deu certo!

    • Olá, antes de adicionar o sis. “leia mais”, verifique se o template tem algum hack semelhante a esse… Pois irá gerar conflito.