Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

JavaScript

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.

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 pixelsimg_thumb_width — Largura da imagem em pixels

Agora vamos implementar o código no HTML

Em Design >> Editar HTMLMande 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 */
}

Sobre o autor | Website

Olá! Sou Vinicius Horta e tenho 37 anos, trabalho com Marketing Digital a 6 anos (quase 7 já). Aqui você aprenderá como construir negócios rentáveis online trabalhando no conforto de sua casa, exatamente como eu faço a 6 anos. Sou Web Designer com formação pelo SENAC e apaixonado por Copywriting e análise de dados de campanhas de Marketing Digital.

Treinamento Online Grátis

Assista Agora ao Treinamento Online Grátis com a Técnica que uso para Gerar um Faturamento de R$ 14.465,70 por Mês!

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta para Marcos Olegário — fototekne.com Cancelar resposta

*

2 Comentários

  1. Olá Vinicius. Ótima matéria. Só uma pergunta: eu fiz isso e o sumário está mostrando código html dos anúncios do Adsense. Estive pesquisando uma forma de evitar isso, de forma a no sumário apenas aparecer os primeiros carateres do texto, mas não qualquer código. Até acho bem estranho porque se pesquisa em qualquer post o código não se vê (em forma de código). Você sabe a que isso é devido?
    Obrigado!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.