Tutorial HTML: Resumo do post - Javascript

Olá, pessoas!

Como estão? Eu estou ótima, apesar dos ocorridos :P

Enfim, não vou me concentrar nesse assunto, pois já é passado e, para mim, não teve relevância nenhuma na minha vida.

Então, muitas (muitas mesmo) pessoas vieram me pedir para ensinar como fazer o post dos blogs ficarem resumidos, sabe? Afinal, isso não estava no código disponibilizado, pois se trata de uma personalização, e eu tinha avisado que as personalizações seriam por conta de vocês. Entretanto, recebi muitas dúvidas a respeito desse tema em particular, por isso irei fazer um mini tutorial explicando como resumir os posts ^^

Let's go?

Primeiro passo:

Antes de qualquer coisa, faça o backup do seu blog, assim caso algo dê errado (o que eu espero que não aconteça), você tem backup :)

Para fazer o backup do seu blog:

OBS: Se for um blog de teste, faça somente o download do Template.

Backup do Template:

>> Acesse seu Blogger e vá em "Modelo"

>> Clique em "Fazer backup/Restaurar", que fica no canto superior direito da página.

(http://i.imgur.com/Qn2C7q6.png)

>> Irá abrir uma janela (http://i.imgur.com/b8huZbK.png), clique na opção "Fazer download do modelo completo".

Feito isso, baixará o arquivo XML do template para a pasta de download do seu PC.

Backup do conteúdo:

>> No menu lateral do seu Blogger (o mesmo onde tem "Modelo"), clique em "Configurações" e depois "Outro".

>> Você poderá notar a opção "Exportar Blog" à direita. Clique nela. (http://i.imgur.com/zfvUVET.png)

>> Irá abrir uma pequena janela, e nela você clicará na opção "Fazer download do blog".

(http://i.imgur.com/9BzjZFv.png)

>> Nesse momento começará a ser baixado um arquivo com todo o conteúdo do blog, por isso o processo pode levar mais tempo do que o anterior.

>> Depois de ter baixado o arquivo, o seu backup está completo!

Agora, vamos começar com o bendito tutorial ^^

>> Acesse o blogger novamente, clique em "Modelo" e depois "Editar HTML"

1° Passo: Inserindo o Javascript.

Clique no código do seu template e pressione "Ctrl+F". Depois, digite na caixa de pesquisa </head> e dê um enter. ACIMA dessa tag, você irá colar esse código:

<!-- Javascript Resumo Automático de Postagens-->
<script type='text/javascript'>
summary_noimg = 330;
summary_img = 300;
img_thumb_height = 180;
img_thumb_width = 200;
</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) {
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;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Fim Javascript Resumo Automático de Postagens-->

Explicando as partes destacadas:

• Em summary_noimg = 330; está a quantidade de caracteres do resumo para as postagens que não contenham imagens.
• Em summary_img = 300; está a quantidade de caracteres do resumo para as postagens que contenham imagens.
• Em img_thumb_height = 180; é a altura da imagem.
• Em img_thumb_width = 200; é a largura da imagem.

2° Passo: incluindo o código no HTML

Agora, abra a mesma caixa de pesquisa do passo 1, e pesquise agora por <data:post.body/>

ATENÇÃO: Você poderá encontrar 3 trechos como esse, use o segundo.

Substitua SOMENTE esta tag pelo seguinte código:

<!-- Html Resumo Automático de Postagens-->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != &quot;item&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 class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>
</b:if>
<!-- Fim Html Resumo Automático de Postagens-->

*Caso queira substituir o "Leia Mais" por uma imagem, vá para o 3° passo, caso contrário, pule para o 4° passo.

3° Passo: Substituindo o "Leia Mais" por uma imagem.

Substitua o trecho grifado (em amarelo) do código anterior (2° passo) pelo código a seguir:

<span class='reslink' style='float:right'><a expr:href='data:post.url'><img src="URL-DA-SUA-IMAGEM" /></a></span>

Em "URL-DA-SUA-IMAGEM", substitua pela url (link) da imagem que irá ocupar o lugar do link de "Leia Mais".

4° Passo: Salvando

Clique em "Visualizar", caso não encontre nenhum erro, clique em "Salvar".

Para você saber se deu certo ou não, o blog tem que ter pelo menos uma postagem.

Enfim, gente, é isso aí.

O tutorial ficou um pouquinho extenso, porém ele não é de difícil entendimento, e logo logo vocês irão perceber que codificação não é um bicho de 7 cabeças haha

Bem, se foi útil para você, por favor comente! O dedo não vai cair não, HAHA

É isso :)

Beijocas!