Um jeito bem simples de adicionar "Posts Relacionados" em seu blogger

Esta é uma tarefa bem simples, até mais simples do que pode-se pensar. Mas deu trabalho para bolar. Em particular, existem alguns detalhes sobre os quais fui buscar ajuda em alguns sites especializados sobre javascript [1]. A idéia é a seguinte: ao fim do texto (ou onde mais o usuário quiser) adicionar uma lista de outros posts de conteúdo relacionado. Detalhes: não pode repetir o próprio post que o leitor está visualizando no momento e não pode desperdiçar muito tempo do navegador do usuário. Sim, porque javascripts são códigos interpretados pelo navegador, não pelo servidor. Logo, se não usado com parsimônia e sabedoria, scripts podem causar lentidão em conexões mais lentas.

Algumas palavras

Aplicações web vêm se desenvolvendo e ficando cada vez mais poderosas. Um dos episódios que mais me impressionou na história das aplicações web foi a criação do Ajax. Há tantas vantagens em utilizar, é uma idéia tão esperta [2]. Eu e alguns colegas (incluo você, Rodrigo?) tivemos nosso primeiro verdadeiro contato com linguagens de marcação para internet (html, xhtml e xml) e algumas linguagens script (PHP, javascript, python, perl) em 2006, no curso de Programação Voltada à Internet. Desde aquele momento, tenho visto o quão importante é o respeito por padrões e a utilização de sites gigantes, dentre os quais talvez o mais óbvio seja o w3c. Acha que isso não é importante? Veja o Google Gadgets Editor ou Google Mash Up Editor: trata-se praticamente de puro xml desenvolvido sobre tags definidas pela Google, adicionando-se HTML e javascript. Eu arriscaria (com razoável certeza) dizer que hoje o nivelamento inferior para os desenvolvedores web está em conhecimentos sólidos de xml e XHTML.

Chega de enrolação!

Javascript

Todo javascript que for adicionado em uma página html vai dentro de uma tag identificada como script. Como esta tag também é usada para outras linguages, especificamos qual a linguagem de seu conteúdo pelo atributo type. A seguir, o script que desenvolvemos para gerar a lista de posts relacionados.

<script type='text/javascript'>
//<![CDATA[

/* Quantidade de links */
var relcounter = 0;

/* Quantidade máxima de links */
var relmax = 10;

/* Lista ordenada com os títulos */
var reltitulos = new Array();

/* Lista ordenada com os endereços */
var relend = new Array();

/* Algumas variáveis para o caso de um post com poucas tags */

/* Número mínimo de tags */
var tag_min = 3;

/* Número de tags */
var tag_counter = 0;

/* Essa função pega os posts relacionados, ou seja, ele vai atrás
do título e do endereço dos posts com um certo marcador. Por isso,
esta função deve ser chamada PARA CADA marcador. */
function getrels(json)
{
tag_counter++;

/* Vale mais truncar a busca agora... */
for (var i = 0; i < 5 && i < json.feed.entry.length; i++)
{
var entry = json.feed.entry[i];
reltitulos[relcounter] = entry.title.$t;

for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == 'alternate')
{
relend[relcounter] = entry.link[j].href;
relcounter++;
break;
}
}
}
}

/* Adiciona tags fantasma......... */
function completeTags()
{

}

/* Função verifica repetições, pois pode ocorrer de um post pertencer a mais
de uma etiqueta (ex. física e ciências são as etiquetas de um mesmo post.
Esta rotina deve ser chamada antes da rotina que imprime a lista. */
function remInuteus()
{

/* Listas auxiliares para verificarmos possíveis repetições (como já explicado) */
var auxend = new Array(0);
var auxtit = new Array(0);

/* Vamos testar se o proprio post está na lista usando a url. No entanto, se
o usuário tiver ido pra páginas de recado, então o endereço terá um #comments.
Para evitar esses e outros casos relacionados (marcadores gerais), usamos
o método split de strings e pegamos apenas o primeiro elemento do resultante. */

var thisURL = location.href.split("#")[0].split("?")[0];

/* Agora é só ir testando... */
for (var i = 0; i < relend.length; i++)
{

/* A primeira das condições a seguir simplesmente verifica se
um dos endereços já está na lista auxend (nova). A segunda condição
impede que o próprio post visualizado entre na lista! */

if ( !contains(auxend, relend[i]) && thisURL != relend[i])
{
auxend.length += 1;
auxend[auxend.length - 1] = relend[i];
auxtit.length += 1;
auxtit[auxtit.length - 1] = reltitulos[i];
}
}

/* Redefinimos as listas "globais". */
reltitulos = auxtit;
relend = auxend;
}


/* Esta função imprime a lista (depois de pronta). Como é utilizada
uma lista não ordenada (<ul>), basta adicionar marcações de estilo
em sua css. */
function printlegauss()
{

/* Para embaralhar, vamos usar uma idéia que pode ser encontrada
em diversos outros scripts. */
var r = Math.floor((reltitulos.length - 1)*Math.random());
var i = 0; var counter = 0;

document.write('<ul id="leiatbm">');
while (i < reltitulos.length && counter <= relmax)
{
/* Conta quantas entradas já foram adicionadas */
counter++;

/* Preferimos a abertura de nova aba para que
o usuário não perca o post original */
document.write('<li><a target="_blank" href="' + relend[r] + '">' + reltitulos[r] + '</a></li>');

r++;
if (r >= reltitulos.length - 1) { r = 0; }

i++;
}

document.write('</ul>');
}

/* Retorna um boolean: verifica se 'e' está em 'a'. */
function contains(a, e)
{
for(var j = 0; j < a.length; j++)
{
if (a[j] == e) { return true; }
}

return false;
}

//]]>
</script>

Note que há diversos comentários e muito provavelmente não deve ser difícil compreender o código por si só. Infelizmente não pude mais desenvolver os scripts devido a problemas com do servidor do blogspot. Assim que conseguir, posto sobre como adicionar certas funcionalidades bem interessantes.

Adicionando a lista ao fim dos textos

Suponha que você queira fazer assim como o LeGauss e deixar a lista dos posts relacionados ao fim do texto de cada artigo. Vamos passar o que é necessário para tal. Logo após, comentaremos como é possível colocar a lista de posts relacionados em qualquer outro local do post.

Lembre-se de ter consigo uma cópia do código html de seu blog antes de fazer modificações!

Primeiramente, abra seu painel do blogspot (identificando-se) e entre na aba Layout. Lá, vá em Editar HTML. Habilite a caixa Expandir modelos de widgets. Procure pelo trecho do código <div class='post-body entry-content'> que estiver próximo (algumas linhas de distância) do trecho <data:post.body/>.

Para que a lista apareça na página inicial e em cada página particular dos posts, adicione o seguinte código em baixo do trecho <data:post.body/>.

<br/>
<hr align='center' width='300px'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=getrels&max-results=10"' type='text/javascript'/>
</b:loop>
<span class='leiatbm'>Aproveite para </span>
<script type='text/javascript'>
remInuteus();
printlegauss();
</script>

Para que a lista NÃO apareça na página inicial, MAS APENAS em cada página particular dos posts, adicione o seguinte código em baixo do trecho <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<br/>
<hr align='center' width='300px'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script amp;callback=getrels&max-results=10"' type='text/javascript'/>
</b:loop>
<span class='leiatbm'>Aproveite para </span>
<script type='text/javascript'>
remInuteus();
printlegauss();
</script>
</b:if>

Como nós utilizamos o "Leia mais...", o nosso código aproveita certos atalhos. Por isso ficaria difícil de comparar. Para dúvidas, deixe comentários. Salve o que você acabou de fazer.

Definindo melhor o estilo da lista

Os scripts java foram escritos já com o intuito de aplicarmos formatações usando css, usando a identificação leiatbm. Veja no nosso caso como fizemos. O ícone está em no domínio webpicasa, então por favor não o sobrecarregue.

#leiatbm
{
padding: 0 0 0 15px;
margin: 0;
}

#leiatbm li
{
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOVFU-zmvvlNfSEvo933drZXMpULjBsj3SxBSYfdKN_yomYTomG0QNBG4G9XPfIhv5MG78tgI8XKZhfBocrqY-F6khJaQ9WfgRUjWpbiTZkh4foZN9G04sZknL7Ld5zxQ1IhL0nRxmRJmu/);
}

Terminando...

A partir daí, já deve estar tudo funcionando. Se você quiser colocar em qualquer outro ponto do blog, basta procurar com cuidado no html (com a caixa Expandir modelos de widgets habilitada) de seu layout. Se tiver problemas, deixe comentários (pode deixar e-mail para contato).

Utilize tudo o que ensinamos à vontade e sem restrições. Se achar que merecemos, divulgue o LeGauss em seu blog : )

Agradeço profundamente à ajuda de nosso fã-paga-pau declarado amigo Ponhovo Loreno [3].

Notas:

• [1] Sites que recomendo sobre javascript.
  - w3school
  - DevGuru
  - JavaScript.com (TM)
  -
  
• [2] Não que tenha sido a primeira: independentemente do nome da tecnologia, mas a idéia de se utilizar páginas dinâmicas é sensacional.
  
• [3] Ponhovo Loreno disse não ser paga-pau do blog, mas sim pagapau. Nós não temos nenhuma objeção contra isso.

Edição Blogspot para você!

Reunirei aqui todos os posts que demonstram como alterar seu blog (quando hospedado no Blogspot/Blogger) e as alterações que realizamos em no Legauss. Assim como alguns usuários bem observaram, essas alterações trazem um ar de único para um blog, e muitas vezes usuários, donos de blogs, não muito experientes com css ou html, podem sentir-se menosprezados por não conseguirem obter aquele design que sempre sonharam um dia fazer. Esperamos que todos os posts relacionados abaixo ajudem estes usuários, assim como abrimos um canal direto (via e-mail) para possíveis dúvidas e/ou sugestões.

Faixas separadoras de seções usando CSS

Aqui mostramos como usar o seu css para disponibilizar faixas que separam o texto principal de apêndices, como post scriptum ou notas de rodapé.

Mais: separadores de seções em posts

Que tal darmos mais ênfase à separação de seções em seus textos? Mostramos aqui um jeito interessante e simples, usando apenas uma modificação na css do blogs.

Dicas para utilização das notas de rodapé

Quem nunca quis fazer notas de rodapé linkadas, assim como no Wikipédia? Ensinamos como fazer de modo muito simples aqui.

Vamos brincar com

Neste post, ensinamos como utilizar LaTeX sem a necessidade de instalar nada em servidor algum ou em navegador algum.

Links para expandir no Blogger

Sabe aquele Leia mais que a gente encontra naqueles blogs fabulosos? Aqui nós mostramos como nós estamos utilizando. Se você quiser também inserir isso em seu blog, entre em contato!

Agendando posts

Veja como fazer para agendar posts com o blogger para não mais se preocupar em ter que salvar seus textos no bloco de notas.

Como colocar um favicon em seu site

Mostramos como definir um ícone para representar seu site na lista de favoritos de seus internautas, tal como ao lado do endereço.

Notas importantes:

Este post é constantemente atualizado: à medida em que surgem novos posts que se enquadrem neste perfil, vou os incluindo. Para críticas, comentem!

Links para expandir o texto no Blogger

Ao final de todas os posts do Legauss, podemos ver o link Continue lendo... em azul e negrito. Esta é uma ferramenta amplamente utilizada em blogs de famosos, e facilita a leitura daqueles que usam Leitores RSS ou os que seguem nosso blog usando o blogspot.

Como em qualquer alteração, há aqueles que gostam e há aqueles que não gostam. O método que estamos utilizando faz com que, ao clicar em Continue Lendo..., o leitor seja enviado para a página estática (endereço fixo de cada post), onde também pode comentar. É uma maneira também de sugerir a inserção de um comentário. Eu copiei este método ao ver ele em uso no blog pessoal de Maurício Tuffani.

Aos editores: como utilizar?

O método que estamos usando é simples e traz poucas mudanças para os posts. Na verdade, é possível escrever o post naturalmente e só fazer as modificações que descrevo abaixo ao acabar.

O texto que deve aparecer ao carregar a página do Legauss deve ser escrito normalmente. Em geral, este é um resumo que já deve dar uma boa idéia aos leitores sobre o tema que será tratado. Ao terminar esta parte, o resto do post deverá estar entre as tags:

<span class="fullpost">
-- TEXTO AQUI! --
</span>

Assim, tudo o que for substituído por --TEXTO AQUI! -- não será exibido até que o usuário clique no link para continuar.

Se algum bloguer também interessar-se por esta técnica, entre em contato. Por favor, comentem o que vocês acharam desta nova funcionalidade (em principal, os visitantes). Apesar de nem todos os editores ainda terem editados seus posts antigos, já podemos ter uma idéia de como vai ficar.

Dicas para a utilização das notas de rodapé

Como tenho visto, não apenas no LeGauss, a utilização destas faixas de rodapé e divisões de seções, assim como as que propomos. Existem ainda alguns métodos que podemos utilizar para melhorar a qualidade de nossos textos, mesmo que tornem-se bem mais complexos (ao menos se a html não for gerada automaticamente). Vamos tentar ligar as seções e notas de rodapés com links internos ao post, algo próximo às referências cruzadas do LaTeX.

Links para trechos do post

Há como criarmos links que movem o navegador para outro trecho de uma mesma página. Assim, podemos criar links para modificar o trecho do post que desejamos que o usuário leia. Isto é feito usando a tag âncora <a> , com diferentes atributos.

Primeiramente, damos nome a um trecho do texto, para o qual desejamos enviar o navegador quando chamado por algum link. Para tal, usamos o atributo name, da forma

<a name="NOME" > Texto marcado </a>

Assim, marcamos o trecho para onde desejamos enviar o navegador. Para enviá-lo, usamos o link criado por

<a ref="#NOME" > texto do link </a>

Com isso, enviamos e retornamos com o texto agilmente [1] para trechos específicos do post.

Conclusão

Assim temos mais um detalhe para valorizar os textos que escrevemos por esse mundão. Um comentário sobre isso tudo: montar coisas assim é extremamente trabalhoso, portanto a melhor saída é sempre utilizar isto nos textos em que isto torna-se preciosamente importante (textos longos, por exemplo).

Acho que sobre o tema, estamos quites. Se tiverem sugestões de fru-frus outras decorações, enviem por comentários ou e-mail.

Notas:

[1] Utilizamos estas chamadas rápidas para ligar esta nota de rodapé à sua própria chamada no texto.

Mais: separadores de seções em posts

Como estamos construindo ainda nosso blog e foi demonstrado interesse pelas faixas separadoras, achei que pudesse ser interessante também implementarmos separadores de seções. Em textos longos eu costumo usá-los, mas não como os que temos em nosso CSS agora. São divisores de seções para dar melhor hierarquia ao texto dos posts.

Como funcionam os headers

Em html, existem tags muito especiais: os cabeçalhos h1, h2, h3... Estas tags formatam o texto gerando certo grau de hierarquia, sendo h1 o texto que deve estar mais aparente. Pode ser utilizado, por exemplo, como título de seções. Subseções dentro de uma seção formatada com h1 podem ser formatadas com h2 ou algum outro menor.

Atualmente, com a possibilidade de usarmos CSS (ao menos em quase todo navegador), os cabeçalhos são excelentes ferramentas de customização. Por exemplo, em meu blog pessoal eu uso as faixas separadoras que descrevo em meu primeiro post como o h4. Assim, se eu aplicar algum texto como cabeçalho h4, ele será exibido na mesma forma daquela faixa separadora.

Divisão de seções em posts

De forma similar às faixas separadoras, poemos definir um divisor de seções usando apenas uma linha abaixo do nome da seção e aplicando cores diferentes no texto. Isto já é um estilo bem interessante.

Em nosso CSS, como não utilizávamos o cabeçalho h4, resolvemos customizá-lo da seguinte forma:

h4
{
border-bottom: 3px solid #d6d0cc;
font-weight: normal;
color: #0f0f0f;
font-size: 10pt;
}

Assim, para criar as divisões das seções mostradas acima, apenas aplicamos a formatação no nome da seção, algo como

<h4> Subdivisões de seções em posts </h4>

Temos assim o resultado apresentado neste post.

Post scriptum

1. Como as cores que eu propus inicialmente não estavam muito boas, atualizei algumas vezes este post e com a ajuda de Ponhovo Loreno conseguimos encontrar cores boas para estas seções. Portanto, agradecimentos sinceros ao referido internauta.
2. Ponhovo Loreno sofre de daltonismo e confunde vermelho com verde.
   

Faixas separadoras de seções usando CSS

Olá, caros colegas.
Meu nome é Thiago e estou postando pela primeira vez no LeGauss, um blog dedicado ao que vem na cabeça dos editores temas nerds ou geek. Decidi começar minha contribuição escrevendo sobre algo sobre o que estou muito interessado.

Mantenho um blog mais pessoal em que uso como separação do texto com minhas notas de rodapé umas faixas azuladas [1]. A idéia é simplesmente organizar os textos, e resolvi aplicar aqui esta brincadeira.

Trata-se de mais uma das fabulosas invenções das folhas de estilo em cascata (CSS), que são conjuntos de atribuições feitas em separado ao código html de uma página. Há diversos textos bem completos que ensinam como utilizar estas folhas de estilo, dentre os quais sugiro o tutorial dado pela w3school.

Para utilizar estas faixas, utilizo o seguinte código em minha CSS, baseada em um estilo Facebook:

.notas
{
background:#faf7e2 none repeat scroll 0%;
border-bottom:1px solid #d6d0cc;
border-top:1px solid #d6d0cc;
color:#677284;
line-height:1.5em; padding:0px 4px;
}

Isto significa que se inserirmos o código

< div class="notas"> Notas: < /div >

teremos como resultado algo similar à seção notas abaixo [2]. Esta sintaxe pode ser compreendida com um pouco de estudo do tutorial que sugeri, mas para rapidamente compreendermos: ao adicionar a atribuição .notas, estamos criando uma classe que, quando aplicada sobre algum texto, caracteriza este texto com suas definições.

Espero poder ter dado alguma idéia de como fazer isto. Se alguém tiver alguma dúvida, sinta-se à vontade para entrar em contato. Para testar seus conhecimentos em css, veja que nós também temos uma classe codigo, que está aplicada aos códigos acima descritos.

Notas:

• [1] Podemos ver como exemplo aqui.
• [2] Se você verificar
  

Post scriptum:

Agradeço profundamente aos outros editores pelo convite.