Colocando “Leia Mais” no Blogger (Posts Resumidos)

Quem usa o Blogger como plataforma deve ter percebido que na página inicial do seu blog, simplesmente ficam enormes e pesadas pelo fato das postagens do blog aparecerem completas, ou seja, todo o post aparece na página inicial.

Para resolver esse problema o melhor a se fazer é colocar o “Leia Mais” como todos dizem, que nada mais é do que colocar apenas um “resumo” da postagem com um link escrito “Leia Mais” (Ou uma outra frase que você queira) assim que o visitante clicar ele é levado para a página do post.

123987

Uma mudança como essa pode melhorar significamente o seu blog, com uma página inicial bem mais organizada e mais rápida para ser carregada, além e ser visualmente mais bonito para o leitor saber exatamente onde ele quer ir.

Colocando “Leia Mais” no Blogger

Antes de fazer qualquer alteração no seu blog é bom fazer um backup completo dele caso você faça algo errado.  Não sabe como fazer um backup no Blogger? Veja:

[unordered_list style=”bullet”]

[/unordered_list]1. Agora entre no painel do seu Blogger e do lado esquerdo clique em “Modelo” e em seguida “Editar HTML

9879

Marque a caixinha  “Expandir modelo de widgets

9878

2. Aperte “Ctrle + F” e pesquise por: <data:post.body/>

O primeiro código desse que encontrar, delete e coloque o código abaixo no lugar:

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

Você pode trocar o texto “Leia mais” no código acima por qualquer outro que quiser.

O código ficará assim:

2311

3. Aperte “Ctrl + F” novamente e pesquise por: ]]></b:skin>

E ACIMA dele cole o código abaixo:

.rmlink {
font-size: 100%;
float: right;
margin-right: 30px;
margin-top: 10px;
font-weight: bold;}
.rmlink a {
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: Arial,Sans-Serif;
color: #24618e; /*Cor do Link*/}
.rmlink a:visited { color: #649dc7;}/*Cor do link depois de clicado*/
.rmlink a:hover { color: red;} /*Cor do link ao passar o mouse em cima*/

O código ficará assim:

231456

4. Aperte “Ctrl + F” e procure agora por: </head> e ACIMA dele cole o código abaixo:

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

O código ficará assim:

7897777

5. Agora clique em “Visualizar” e verifique se está tudo certo,  se estiver clique em “Salvar modelo

98798654