Resumo automático com imagem para Blogger
Autor: Post Blogger | Publicado: 2010-12-13T18:01:00-08:00

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 &gt;&gt; Editar HTML
Antes da Tag &lt;/head&gt; coloque o código abaixo:
&lt;!-- JavaScript Resumo do Artigo --&gt;&lt;script type='text/javascript'&gt;var thumbnail_mode = &amp;quot;float&amp;quot; ;summary_noimg = 450;summary_img = 400;img_thumb_height = 100;img_thumb_width = 100;&lt;/script&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[function removeHtmlTag(strx,chop){if(strx.indexOf("&lt;")!=-1){var s = strx.split("&lt;");for(var i=0;i&lt;s.length;i++){if(s[i].indexOf("&gt;")!=-1){s[i] = s[i].substring(s[i].indexOf("&gt;")+1,s[i].length);} }strx =&nbsp; s.join(""); }chop = (chop &lt; strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' &amp;&amp; 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&gt;=1) {if(thumbnail_mode == "float") {imgtag = '&lt;span style="float:left; padding:0px 10px 5px 0px;"&gt;&lt;img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/&gt;&lt;/span&gt;';summ = summary_img;} else {imgtag = '&lt;div style="padding:5px" align="center"&gt;&lt;img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /&gt;&lt;/div&gt;';summ = summary_img;}}var summary = imgtag + '&lt;div&gt;' + removeHtmlTag(div.innerHTML,summ) + '&lt;/div&gt;';div.innerHTML = summary;}//]]&gt;&lt;/script&gt;&lt;!-- JavaScript Resumo do Artigo - Fim--&gt;
Editando o código:
summary_noimg&nbsp; — 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 pixelsimg_thumb_width — Largura da imagem em pixels
Agora vamos implementar o código no HTML
Em Design &gt;&gt; Editar HTMLMande expandir windgats e procure pelo seguinte código:
&lt;div class='post-body entry-content'&gt;&lt;data:post.body/&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;
Subistitua ele por esse código:
&lt;div class='post-body entry-content'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt;&lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt;&lt;div expr:id='&amp;quot;summary&amp;quot; + data:post.id'&gt;&lt;data:post.body/&gt;&lt;/div&gt;&lt;script type='text/javascript'&gt;createSummaryAndThumb(&amp;quot;summary&lt;data:post.id/&gt;&amp;quot;);&lt;/script&gt;&lt;span id='showlink'&gt;&lt;a expr:href='data:post.url'&gt;Leia Mais ►&lt;/a&gt;&lt;/span&gt;&lt;/b:if&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt;&lt;data:post.body/&gt;&lt;/b:if&gt;&lt;div style='clear: both;'/&gt; &lt;!-- clear for photos floats --&gt;&lt;/div&gt;

Você pode também aplicar estilo CSS ao “Leia mais…”
Desta forma vai personalizar ainda mais seu blog, para isso basta novamente em Design &gt;&gt; Editar HTML
Procurar por ]]&gt;&lt;/b:skin&gt;
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;&nbsp; /* escolha a cor de seu link */}#showlink a:visited {color: #cccccc;&nbsp; /* escolha a cor de seu link quando visitado */}#showlink a:hover {color: #000000;&nbsp; /* escolha a cor de seu link quando passa o mouse em cima */}