Resumo automático com imagem para Blogger

Você já deve ter reparado que em muitos blogs e sites na página inicial são exibidos apenas resumos dos artigos e não os artigos completos, o que torna sua página inicial muito mais interessante, mais compacta e com mais informações.

Este código serve para fazer isso no blogger, mas devo alertar que caso você tenha um domínio próprio não funcionará. O JavaScript no Blogger funciona quando está em domínio .blogspot, para usar em domínio próprio será necessário o JavaScript completo instalado em seu servidor.

Bom, vamos aos passos para modificar seu Blogger. Inicialmente vamos implementar o Java no código do seu Blog:

Vá em Design >> Editar HTML

Antes da Tag </head> coloque o código abaixo:

<!-- JavaScript Resumo do Artigo -->

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 450;

summary_img = 400;

img_thumb_height = 100;

img_thumb_width = 100;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);} }

strx =  s.join(""); }

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...'; }

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

if(thumbnail_mode == "float") {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

} else {

imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';

summ = summary_img;

}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;}

//]]>

</script>

<!-- JavaScript Resumo do Artigo - Fim-->

Editando o código:

summary_noimg  — Aqui você vai definir a quantidade de caracteres para quando o resumo não tiver imagem.

summary_img — Aqui você vai definer a quantidade de caracteres para quando seu resumo tiver uma imagem.

img_thumb_height — Altura da imagem em pixels

img_thumb_width — Largura da imagem em pixels

Agora vamos implementar o código no HTML

Em Design >> Editar HTML

Mande expandir windgats e procure pelo seguinte código:

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Subistitua ele por esse código:

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►</a></span>

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

</div>

Você pode também aplicar estilo CSS ao “Leia mais…”

Desta forma vai personalizar ainda mais seu blog, para isso basta novamente em Design >> Editar HTML

Procurar por ]]></b:skin>

E antes coloque o código abaixo

font-size: 12px; /* escolha o tamanho da fonte para o link */

float: right; /* escolha se quer link flutuando à esquerda ou direita */

margin-right: 30px; /* aplique margens para posicionar link */

margin-top: -2px; /*a margem negativa para o topo aproxima o link do texto do post */

font-weight: bold;

}

#showlink a {

color: #ffffff;  /* escolha a cor de seu link */

}

#showlink a:visited {

color: #cccccc;  /* escolha a cor de seu link quando visitado */

}

#showlink a:hover {

color: #000000;  /* escolha a cor de seu link quando passa o mouse em cima */

}