Arquivos do Website:

Como colocar artigos relacionados na barra lateral do blog?


Colocar artigos relacionados na barra lateral do seu blog, é um procedimento muito simples, basta você utilizar o gadget nrelate! O gadget nrelate é muito bom, porque ele mostra artigos relacionados de forma correta e aleatória. Para utilizar esta ferramenta gratuita no seu blog, é necessário fazer um cadastro no site nrelate e, adicionar o seu blog na conta do seu perfil.

Esse código não funciona mais, porque o nRelate fechou o site! Utilize o código desse outro artigo.

Imagem: Google Imagens

Caso você já tenha cadastro no site nrelate, basta acessar o site, para fazer as personalizações do gadget, no painel de controle correspondente ao blog que você deseja adicionar o gadget!

É necessário adicionar o seu blog no site nrelate, porque a ferramenta precisa indexar todos os artigos, para poder exibir artigos relacionados no gadget que está no seu blog!

Para exibir artigos relacionados na barra lateral do seu blog, de forma simples, adicione num elemento de página, este código abaixo:

<div id='nrelate_related_placeholder'></div>
<div id='nrelate_related_backup_placeholder'></div>
<script async type='text/javascript' src='http://staticjs.nrcdn.com/rcw_b/0.52.0/loader.min.js'></script>

Salve o gadget.

Eu também adaptei o código dentro de uma scroll; assim, é possível exibir até 20 artigos relacionados, sem ocupar muito espaço na barra lateral do blog (acho que fica muito melhor desta forma), aparece a barra de rolagem lateral no scroll, mas, você pode escondê-la. Digamos que o seu blog tenha a barra lateral com 300px de largura, o "width:" do scroll deverá ser no mínimo "310"; sempre com 10px a mais (em alguns templates, pode ser necessário adicionar mais 20px ou 30px na largura do scroll)!

(Imagem de exemplo de gadget com scroll)!

Copie o código do scroll e adicione num elemento de página do seu blog e, salve o gadget:

<div style="overflow-y:scroll; overflow-x: hidden; width:310px; height:800px;">
<div id='nrelate_related_placeholder'></div>
<div id='nrelate_related_backup_placeholder'></div>
<script async type='text/javascript' src='http://staticjs.nrcdn.com/rcw_b/0.52.0/loader.min.js'></script></div>

A "width:310px" é a largura do scroll e, "height:800px" é a altura do scroll. Altere estes valores para adaptar o scroll às necessidades do seu blog! Os estilos de fontes e imagens que aparecem nos artigos relacionados do gadget, você deverá personalizar no painel de controle correspondente ao seu blog, lá no site nrelate.