26 de ago de 2011

Lista de Posts Relacionados nas Postagens

Encontrei esse tutorial há algum tempo mas demorei pra conseguir fazê-lo, pois ele estava meio confuso e os códigos que deveriam ser procurados não tinham no meu blog, até que consegui fazer e vim explicar pra vocês como consegui.
» Como esse tutorial é muito grande aconselho que façam com calma e antes de tudo copiem todo o html do seu blog e colem no Bloco de Notas para que, se algo ocorrer errado, você possa colocar o html anterior de volta «

     Vá em Design no painel do blogger e clique em editar html. Ao fazer isso aperte Ctrl+F e procure por </head> e acima dessa linha cole o seguinte código:

<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;
while (i < relatedTitles.length && i < 20) {
document.write('<br/><a href="' + relatedUrls[r] + '">' + relatedTitles[r] +
'</a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>
     Salve as alterações e depois clique em expandir modelos de widget e procure por:
<b:if cond='data:post.labels'>

     Você vai ver algo parecido com o código abaixo.
<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"'>,</b:if>
</b:loop>
</b:if>
     Lembrando que seu html pode ter sido editado para algum fim, como o meu próprio html foi.
     Agora coloque o código abaixo acima da linha </b:loop>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +
"?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"'
type='text/javascript'/>
</b:if>
     Salve as alterações novamente e procure pelo seguinte código:
<div class='post-footer-line post-footer-line-3'/>
     Se não tiver esse código no seu blog procure por: <p class='post-footer-line post-footer-line-3'/>

     Após achá-lo cole esse código em baixo dele:
<b:if cond='data:blog.pageType == &quot;item&quot;'>Posts Relacionados</b:if>
<div class='assuntos'><script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
     Onde está escrito Posts Relacionados você pode trocar por algo como Leia também, que é o que está no meu blog, fica da sua preferência.
     Se você quiser colocar uma imagem antes de onde está escrito Posts Relacionados e só você escolher um mini gif (você alguns mini gifs aqui), hospedá-lo em algum site de hospedagem de imagens (aconselho esse) e colocar o seguinte código antes do código que você acabou de colocar:

<img src="URL DO MINI GIF"></img>


     Onde estiver URL DO MINI GIF é só substituir pela url do gif que você hospedou e pronto, vai ficar como está aqui no TSQC:


     Salve novamente e agora procure por body { aparecerão mais de um desse código, mas você utilizará somente o primeiro. Cole esse código acima dele:
.assuntos a{text-indent:15px;background-image: url(URL DO GIF-1);background-repeat: no-repeat;background-position: left 4px;padding-left:15px;padding-top:1px;padding-bottom:1px}
.assuntos a:hover{background-image: url(URL DO GIF-2);background-repeat: no-repeat;background-position: left 3px}
      Onde estiver URL DO GIF-1 você vai colocar a url do mini gif que ficará ao lado do nome de cada post sem o mouse estar em cima. Onde estiver URL DO GIF-2 vai substituir pela url do mini gif que ficará quando o mouse estiver em cima do link. Se você não quiser nenhum mini gif então apague onde está URL DO GIF-1 e URL DO GIF-2.
     Links onde pode encontrar mini gifs:
Evelyns Place
Place Fame Extras
Trechy Teen


     A lista vai aparecer automaticamente no final de cada postagem e vai ser como essa aqui:
 Qualquer dúvida é só perguntar

7 comentários:

Place Fame disse...

Acho legal, mas nem em todos os blogs... No seu, por exemplo ficou uma graça!
E obrigada por avisar sobre o blog excluído, estranho isso... Mais enfim, obrigada pelos elogios também ♥

Beijos, Emily
Place Fame | Extras | Twitter

Jéssica Rodrigues disse...

Nossa amei seu blog querida, já estou seguindo!
Dá uma passada lá no meu blog (:

http://byjessicarodrigues.blogspot.com

Márcia e Aline *-* disse...

oi flor,td bem? como somos afiliadas vim te pedir ajuda, vota no The Diary of Teens lá no Attitude Included? pfv. http://theattitudeincluded.blogspot.com/ se votar me avisa, bjinhos (:
TDiaryOfTeens.blogspot.com

Maria Isabel disse...

Lindo blog!
http://www.destinarioparavoce.blogspot.com/

Ingrid Gonzalez disse...

hey flor,
envieium e-mail para tudosobrequalquercoisa@live.com

veja lá e me responda :*

Ana Lu Nagib disse...

Oi amore, vim fazer uma visitinha no seu blog, e gostaria de pedir sua ajuda!
O meu blog Ser Menina, está participando do sorteio que tá rolando no The attitude Included, dá uma passadinha nesse link:

----> http://theattitudeincluded.blogspot.com/2011/08/votacoes-abertas.html

Entra na enquete e vota em Ser Menina, por favor, não custa nada!
Beijos e conto com você ^^
http://sermenina-blog.blogspot.com

Sandriele disse...

Adorei o blog,
aceita parceria?
http://justsandri.blogspot.com

Postar um comentário

- Para evitar que seu comentário venha a ser excluído, leia a política de comentários do blog.
- Antes de fazer uma pergunta dê uma olhada na página de FAQ para ver se sua pergunta já não foi respondida lá.

Obrigada por comentar. Saber que minhas postagens são valorizadas por outras pessoas é o que me faz continuar com o blog