Todo blogueiro que seus leitores encontrem com facilidade os conteúdos dentro de seu blog, para isso existem várias formas de melhorar a navegação, são técnicas que vão desde fazer um menu de navegação com links para as principais categorias, até links inseridos no corpo de texto de forma contextualizada. Mas sem sombra de dúvidas um ótimo meio de fornecer acesso simples é uma lista de postagens relacionadas ao término do post.
Também é de grande ajuda para seu leitor localizar mais facilmente os conteúdos do seu blog, você instalar um sistema de resumos automáticos. Assim você terá uma página inicial eficiente oferecendo vários artigos sem tomar muito espaço, e cada post também otimizado oferecendo artigos relacionados!
Para fazer isso é simples, em apenas alguns passos seu blog estará com esta funcionalidade habilitada e em perfeitas condições. Bom, agora que você já sabe o quanto isso pode elevar a qualidade do seu blog, vamos aos passos para a implementação do código.
Vá em Design >> Editar HTML
1 – Procure pelo seguinte código (ctrl + F) “]]></b:skin>”, então cole logo após ele o código abaixo:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
2 - Agora, visualize para se certificar de que não há nenhum erro, não havendo nada errado, salve e mande expandir modelos de widgets. Feito isso, encontre o seguinte código:
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'/>
Após ele, cole o código em negrito abaixo:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>
Repare que o código fica antes de </b:loop> que já faz parte do código nativo de seu blog, eu o citei aqui apenas para você saber exatamente onde deve acrescentar o código em negrito.
3 – Feito isso, procure pelo seguinte trecho: <div class='post-footer-line post-footer-line-3'>
E logo após ele, cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
Pronto, basta salvar e conferir o código em funcionamento!
Mas talvez você queira dar estilo para seus Arquivos Relacionados. Então, terá que acrescentar CSS.
.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: coloque aqui o tamanho da fonte;
color: #...coloque aqui o valor da cor para o título;
}
Para dar estilo à lista:
.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: tamanho da fonte;}
.related-posts li a{ color: #....}
.related-posts li a:hover{color: #.....; text-decoration:none;}
