Os Artigos Relacionados são indispensáveis na maioria dos blogs ou websites, pois ajudam a aumentar as visualizações de páginas, oferecendo na maioria das vezes alguns artigos relevantes e úteis aos visitantes. Esse modelo de artigos relacionados é parecido com o random posts para blogger, ele irá mostrar artigos aleatórios, que estão na mesma seção do post que o usuário está visualizando naquele momento.
Este código é bem fácil de adicionar no template do seu blog! Mas, antes de começarmos, eu recomendo que você faça backup do template do seu blog ( Painel de controle do Blogger ==> Modelo ==> Fazer backup/Restaurar ==> Fazer download do modelo completo ==> Fechar).
Ok, depois de salvar o template atual do seu blog, clique em "HTML". Adicione no código fonte do seu blog, logo acima de "]]>", este CSS:
.related-posts {background: #fff;list-style: none;overflow: hidden;margin: 5px 0 5px 5px;margin-bottom:50px !important;margin-top:30px;}
.related-posts h2 {background:#ddd;color: #555;font-family: 'Open Sans',arial,sans-serif;font-size: 18px; font-weight: 300;margin: 0 0 10px;padding: 5px 10px 10px;}
.related-posts .relatedTitles {color: $(black.link.color); display: block;font-family: 'Open Sans',arial,sans-serif;font-size: 12px;font-weight: 600;line-height: 24px;}
.related-posts .relatedTitles:hover {text-decoration: underline;}
.related-posts img {border: none;display: block;height: 235px;margin: 0 0 5px;width: 183px;}
.related-posts img:hover {-webkit-opacity: 0.80;-moz-opacity: 0.80;opacity: 0.80;}
.related-posts h3 {color: $(black.link.color);font-size: 18px;line-height: 24px;}
.related-posts a {border-left: 0.5px solid transparent;color: $(black.link.color);float: left;margin: 0 0 4px 5px;padding: 0;position: relative;text-decoration: none !important;width: 183px;}
Para controlar a largura e altura das imagens que aparecem no gadget, personalize isto: height: 235px (altura) - width: 183px (largura).
Agora, adicione este código javascript logo acima de "". Salve o template.
var defaultnoimage="";
var maxresults=3;
var splittercolor="#555";
var relatedpoststitle="Artigos Relacionados:";
//
var relatedTitles=[],relatedTitlesNum=0,relatedUrls=[],thumburl=[]; function related_results_labels_thumbs(f){for(var e=0;e"+relatedpoststitle+"");for(document.write('');e e&&e w183-h235-c/")+'"/>"),e++,f ");relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
Estes valores aqui no código javascript "w183-h235", devem ser os mesmos no código CSS. Para exibir mais do que 3 artigos relacionados, apenas altere o valor em "var maxresults=3". Para alterar o título do gadget "Artigos Relacionados:", personalize isto: "var relatedpoststitle="Artigos Relacionados:";".
Para finalizarmos, procure por "
