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:

Tweet