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 == "static_page"'>
<data:post.body/>
<b:else/>
<p><b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb
("summary<data:post.id/>");</script>
<span class='reslink' style='float:right'><a expr:href='data:post.url'>Leia Mais ►</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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!
