Blogger - (hack) Leia Mais / Postagens Resumidas [com Thumbnail]

      Um dos primeiros hacks necessários a um blog que tenha um suporte de imagem muito pesando entre postagens é o hack Postagens Resumidas, que tem sua versão nativa no Blogger que foi batizada de Jump Break, mais para as pessoas que não gostam de adicionar o Jump Break toda vez que fazer uma postagem, eis a solução, o hack postagens resumidas, ou mais conhecido Leia Mais que têm a função de resumir a postagem e adicionar um thumbmail ao lado esquerdo do resumo.




Antes de nada quero declarar que encontrei este hack no Dicas Blogger, via Mundo Blogger e Templates Para Você.

Detalhes sobre o hack
    O hack tem a função de resumir a postagem, ou seja, deixá-la menor na página inicial, com um thumbmail ao lado esquerdo do post resumido com o link de destinário a postagem completa.


Conselho
1) Antes de fazer faça um backup de seu template.
2) E teste primeiro em um blog de teste.


Vamos Começar:

Entre na versão Editar HTML | Painel > Mais Opções > Editar HTML > Marque a caixa Expandir Modelos Widgets

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

Substitua a linha <data:post.body/> por:


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


Atenção! Para quem usa o jump break do Blogger, o código é outro. Procure por:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>#fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>#fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
    </div>
    </b:if>
    <span id='showlink'>
    <a expr:href='data:post.url'>Continue lendo &gt;&gt;</a>
    </span>
    <script type='text/javascript'>
    checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
    </script>
    </b:if>
    <div style='clear: both;'/> <!-- clear for photos floats -->
E substitua por:


    <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>
    <div style='clear: both;'/> <!-- clear for photos floats -->



----


Procure então pela tag </head> e cole este outro código em cima dela:


<!-- 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 &gt; 150 ? 150: true);
  max-height:120px;
  height: expression(this.height &gt; 120 ? 120: true);

}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
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-->


Adicionando o CSS
   Agora iremos adicionar o CSS ao hack, para isso vá até a tag ]]></b:skin> e cole acima o seguinte código:

/* ----- Hack Leia Mais ------ */
.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*/


Antes de salvar clique em Visualizar, para ver se está tudo Ok, caso esteja clique em Salvar.


Comentários

  1. Adorei,já apliquei lá no meu blog!

    ResponderExcluir
    Respostas
    1. @Diana,
      Muito Obrigado pela preferência, visite mais vezes o Amotrix, caso tenha alguma dúvida ou quiser algum recurso do Blogger ou outra plataforma *PC, WEB, Wordpress, WEBS.COM, etc. * Entre em contato conosco.

      -Obrigado, Matheus Amorim [administrador do Amotrix]

      Excluir
  2. Quero ver a demostração

    ResponderExcluir
    Respostas
    1. Lógico, pedimos desculpa por não ter publicado o link da demostração. Bem, segue abaixo a demostração.

      http://amotrixdraft.blogspot.com.br/

      Excluir

Postar um comentário

    Comentários que contenham em seu conteúdo seguintes temas: pornografia, palavrões, palavras ofensivas ou preconceituosas, spam, todas palavras em Caps Lock, não serão aceitos.