Hack “Leia mais” automático e com imagens

Fui procurar este hack,  à pedido de uma cliente do DB-produtos e serviços e encontrei no Templates para você, blog da querida e sumida amiga Áurea.
Trata-se de um hack que resume os posts da página inicial (home) automaticamente e ainda mostra uma pequena imagem (thumbnail) do lado esquerdo da postagem.
Antes de mais nada, recomendo que você instale este hack em um blog de testes ou, se quiser instalar diretamente no blog, faça antes um backup do template.
Entre no painel do Blogger, clique em design e, depois, em editar HTML.
Marque a caixa expandir modelos de widgets e procure por:

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

Substitua a linha por:

 


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

Para esconder a data e o rodapé dos posts na página inicial, procure por:

]]></b:skin>




e cole o seguinte código depois dessa tag: 


DIGITE SEU TEXTO AQUI<br />


Agora é preciso você ir em Desing/Designer do modelo/avançados/css


Procure degite essa  tag </head> e cole este outro código embaixo dela:

<textarea

rows=”5″

cols=”50″

style=”background-color: #ffffff; color: rgb(0, 0, 0);”

wrap=”soft”>

<!-- JavaScript Posts Resumidos-->
<!--
/*****************************************************
Auto-readmore link script, version 4.0 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com
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: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>
<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-->

</textarea>
 

Pronto! Seu blog agora tem resumo de postagens com thumbnails ;)

Fontes de referência


Fontes de referência

• Templates para Você - Hack Leia Mais com imagens reduzidas
• Mundo Blogger - Hack Leia mais com imagens na página inicial