Um dos meios mais simples e eficientes de se aumentar a permanência do visitante em um blog é divulgando suas matérias no próprio site. O código abaixo apresentado irá criar uma seção de matérias relacionadas que conta ainda com imagens em miniatura para chamar mais a atenção do internauta.

Para usuários leigos a implementação passo a passo será algo ligeiramente simples. Por outro lado, se você for um usuário avançado poderá modificar e fazer melhorias no script sem a menor dificuldade já que o mesmo será completamente inserido no template.

Passo Um – Acessando o Código

Entre na sua conta do blogger e vá na seção design > editar html. Selecione a opção Expandir Modelos de Widgets e procure pela tag .

Passo dois – Script e Folha de Estilo

Copie e cole o código abaixo antes da tag . Ele contém o script e a folha de estilo

Passo Três – Escolhendo um Local

Agora procure pelo seguinte código:

. Se acaso não o encontrar tente esse: . Cole isto logo abaixo do código localizado e salve o modelo.

Essa etapa irá fazer com que a seção matérias relacionadas apareça entre o final do post e os comentários. Você pode inserir o passo três em diferentes partes do layout, para aprender como coloca-lo entre o texto do post leia a matéria: insira um anuncio adsense no meio do post.

Finalizando – Dicas e Problemas Conhecidos

A principal dica é personalizar o script de acordo com o seu template. Caso não tenha conhecimento para tanto, duas variáveis são muito facilmente alteráveis e estão destacas de vermelho no código do passo três. São elas: var maxresults (que define quantas matérias relacionadas aparecerão) e var relatedpoststitle (que define o título da seção).

Entenda que para aumentar a quantidade de matérias que serão visualizadas também será necessário aumentar outra variável: max-results. Ela é que define quantos posts serão instanciados através do feed do seu blog. O valor de max-results será sempre de no mínimo um a mais que var maxresults, pois um dos resultados poderá ser o próprio post. Para entender como são instanciados os feeds leia o guia: Como Funcionam Os Endereços Dos Feeds E Sua Sintaxe.

Com relação as imagens em si, o script usa sempre a primeira. Caso ela esteja hospedado no picasa ele usura as miniaturas geradas pelo próprio serviço, função que pode alterada. Portanto se as suas fotinhas ficarem distorcidas basta criar uma quadrada com 72x72 pixel e coloca-la dentro do seu post, sempre em cima e invisível com uso da tag html display:none, além do mais, fazer isso é altamente recomendado pois diminui o peso das páginas.

Um problema que tive foi um bug com outro código de matérias relacionadas, só que sem imagem. Pois ao manter os dois um estragava o outro. No meu caso eu alterei os nomes das variáveis dos scripts e tudo funcionou perfeitamente.

É isso, apesar das dicas poderem parecer complexas para alguns a implementação sem personalização é extremamente simples. Boa sorte.