Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Postagens resumidas com miniaturas


Já está na hora de seu blog ter uma nova incrementada, ter uma nova cara, e ainda mais melhorará a leitura do navegador de seus leitores quando acessarem sua pagina com varias postagens e ainda sempre terá um espaçinho para alguns gadgets e anúncios.

Baixe o modelo completo do seu blog (backup)

Vamos parar com a conversa e ter logo esse hack no seu blog. Vá em layout, editar HTML, e expandir modelo, e encontre esse código com CTRL+F:

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

Substitua a parte do código:
<data:post.body/>

Por:
<b:if cond='data:blog.pageType != "item"'>
<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 cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Agora vamos personalizar:
Você pode trocar a parte de “>»»Leia mais...”, pelo que você quiser.
Agora vamos fazer mais algumas modificações: 
Copie o código abaixo e cole acima dessa tag  ]]></b:skin>:
.rmlink {
font-size: 120%;
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*/

Agora visualize toda essas modificações e se tiver tudo certo continue o processo abaixo:
Procure a tag </head> e abaixo dela 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><!-- Fim JavaScript Posts Resumidos-->


Visualize e se estiver tudo certo, Salve.

Gostou? Compartilhe:

14 comentários:

  1. Muito bom,parabéns,tava procurando justamente isso

    ResponderExcluir
  2. Maykon,

    Fico feliz em satisfazer sua grande procura por esse tipo de hack que todos vivem procurando.

    Abraços.

    ResponderExcluir
  3. Po ta dando erro,ta duplicando as postagens,da uma olhada lá http://negodrive.blogspot.com/

    ResponderExcluir
  4. Maykon,

    Esse hack funciona perfeitamente com postagens escritas normalmente, percebi em seu blog que ele está cheio de funções e provavelmente cheio de scripts, logo o hack pode apresentar problemas, peço a você para ver o que ultimamente está colocando em seu HTML.

    Me desculpe mas, para termos bons templates temos que pensar no visitante, então reveja se quer continuar com esse template. Deve ser isso que está entrando em conflito com esse hack e futuros scripts que você quiser colocar.

    Abraços.

    ResponderExcluir
  5. Você sabe explicar porque quando eu clico em compartilhar não aparece a miniatura correta?

    ResponderExcluir
  6. Maykon,

    Isso acontece por causa de como você publica seu post e se você copia imagem de outros blogs e coloca-as em seu texto ou se você posta pelo blog e não coloca suas meta tags.

    Mas na maioria das vezes é só postar pelo blog através do ícone para carregar imagens, assim você terá mias chances de ter mais opções de imagens a serem escolhidas para o compartilhamento em redes sociais.

    Abraços.

    ResponderExcluir
  7. Tem com deixa resumido apenas as postagens da pagina inicial e as demais paginas continuarem com as postagens inteiras?

    ResponderExcluir
  8. Casa das capas,

    Existe várias formas para se trabalhar a seu pedido. Lhe informarei uma se desejar usar estará de portas abetas pois é uma ferramenta normal do Blogger.

    Nas suas primeiras postagens, vá no seu painel e edite as postagens que você deseja o resumo. No painel de edição logo no texto deixe o curso de digitação onde deseja o resumo e clique em Inserir expansão de postagem(img:folha quebrada).

    Toda novo text que postar, publique em datas anteriores aos das postagem principais. Assim ficará da forma que você pediu, e qualquer problema conseguirá resolver num instante.

    Abraços

    ResponderExcluir
  9. Boa noite! Gostaria de agradecer pela dica! Muito boa, e ajudou bastante!

    ResponderExcluir
  10. Olá, li seu post e gostei muito, tentei aplicar no meu blog mais não obtive tanto sucesso devido aparecer umas mensagens de erro, acredito ter sido semelhantes a do amigo Maikon dos Santos que comentou acima. Mesmo assim apliquei as configurações pra ver qual seria o efeito no meu blog e gostei bastante, agora vou procurar "limpar" meu template.
    Mais agradeço pela postagem.
    www.grupoalphaseg.blogspot.com.br

    ResponderExcluir
  11. Olá. Me apareceu um problema a uns 6 dias, quando tento postar um novo artigo de meu blog no face, a caixinha na qual aparecem uma ou duas miniaturas, agora só mostra uma foto de meu perfil do blog. E às vezes, aparece como segunda opção uma miniatura de um outro blog meu!! explicando que no blog principal, tenho o botão de redirecionamento do tipo: clique na miniatura e conheça ..... o face está reconhecendo esta e a foto citada.
    Obrigado. espero que possa ame ajudar.

    ResponderExcluir
  12. Thomaz,

    Amei seu problema, com todo respeito. Postei recentemente a solução a para esses problemas com compartilhamento nas redes sociais. Segue abaixo os links que te ajudarão e muito:

    1-http://www.phabloprojetos.com/2013/02/faca-5-analises-seo-basicas-para-blogs.html
    2-http://www.phabloprojetos.com/2013/01/ativar-descricao-post-resultados-compartilhamentos.html
    3-http://www.phabloprojetos.com/2012/07/otimizacoes-na-tag-head-para-blogger.html

    Pronto, aproveite bem. Abraços

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube