Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

08 maio 2009

Artigos Relacionados no Blogger

Para colocar no rodapé da postagem os Artigos Relacionados, como uso aqui no Templates, é muito fácil e também muito útil, pois direciona o leitor para outros textos com a mesma tag.



1- Coloque o script abaixo depois de ]]></b:skin>:

<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- Salve a modificação. Clique em Expandir Modelo de Widget e procure por este trecho e acrescente o que está em vermelho:

<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 != &quot;true&quot;'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>

</b:loop>
</b:if>
</span>

3- Agora procure por:
<div class='post-footer-line post-footer-line-3'>

e cole logo abaixo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Relacionados:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Salve as modificações. Para dar estilo ao título e à lista, acrescente no 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;}


Obs: os links dos artigos relacionados aparecem apenas nas páginas internas. Eles não aparecem se você trancar seu blog.

fontes:
UsuarioCompulsivo
Vagabundia


Se deseja colocar este tutorial em seu blog, fique à vontade. Peço apenas que acrescente um link para cá e automaticamente o link do seu blog aparecerá abaixo deste post.

Artigos Relacionados

4 comentários:

Anita Caron disse...

E se no código do blog não tiver essa segunda parte, o que pode fazer? :H

tecnoput disse...

Maravilhoso essa dica, heim.
vou testar no meu blog, que aliás, e um dos templates dos seus,o template black.

obrigado por mais essa !!

valew... e um abraço!

Diversão Dicas & Cia. disse...

TEM UM DESAFIO PARA VÔCE LÁ NO BLOG.
http://diversaoecia.blogas.com.br/
TE AGUARDO ABRAÇO

GTGames.rg3.net disse...

NAO CONSEGUI NAO CONSIGO ACHAR ESSE TAG 3