Hack - artigos relacionados com imagens

Hack - artigos relacionados com imagens

6 10 99
Hack - artigos relacionados com imagens 10 6 99

A nova moda entre os usuários do Blogger é usar imagens para mostrar os artigos relacionados ( ou posts relacionados) em seus blogs. Como eu imagino que vocês também não querem ficar de fora da novidade, fiz uma pesquisa entre metablogs estrangeiros e testei o hack encontrado no excelente El Escaparate de Rosa.

O hack artigos relacionados, serve para mostrar no rodapé de um artigo outros posts de um mesmo marcador e é uma tática saudável para aumentar o número de pageviews ( páginas exibidas) e de diminuir a taxa de rejeição, já que faz com que os visitantes se mantenham mais tempo no blog, pesquisando outros posts.

artigos relacionados Usando um script, podemos transformar estes links em imagens, o que pode chamar ainda mais a atenção dos nossos leitores. A única ressalva é que quanto mais imagens, mais demora para a página carregar e foi por isso que não estou usando o novo hack aqui no blog e nem as imagens nos comentários.

Recomendo que quem já tinha o hack antigo instalado, que apague todo o código anterior para não dar conflito com o atual. (hack posts relacionados)

Entre no html do template, clique em expandir modelos de widgets e procure (Crtl+F do teclado)por </head> Colem ANTES o seguinte código:


<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a{
height: 150px;
color: #000;
border: 1px solid #ccc;
background: #efefef;
}

#related-posts a:hover {
background-color:#d4eaf2;
}


</style>

<script type='text/javascript'>
//<![CDATA[

//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6UmFvGwz4flTW3W5qsl0j2JJrVBkvqTSgKgIkTycd-r3y47VShA8yC1T9pu7w66NLxenR387Etc_-6ZlWmaCJmQ3wNYo-ClwXW5tXz1mI-6mYafcoB87GC3idGVFohyphenhyphen1Aw1oaJ9B-6D0/s400/noimage.png';

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}

function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;

}
}


var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {


document.write('<a style="width: 114px;text-decoration:none;padding:5px;float:left;text-align: left;margin: 0px;');
if(i!=0) document.write('"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:92px;height:92px;border: 0px;margin: 3px auto 0px;padding: 1px;" src="'+thumburl[r]+'"/><br/><div style="width:100px;padding-left:4px;text-align:center;height:auto;border: 0pt none ; margin: 3px 0pt 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: 1.1em; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');


if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);

}

//]]>

</script>

Para que as imagens apareçam logo embaixo do post, procurem por:

<p class='post-footer-line post-footer-line-1'>

ou por:

<div class='post-footer-line post-footer-line-1'>

Vai depender do template

E colem este outro código logo APÓS:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Artigos relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Se você quiser que as imagens apareçam depois do rodapé do post, cole o código acima DEPOIS da seguinte linha:

<div class='post-footer-line post-footer-line-3'>

Para mudar o número de artigos exibidos, altere a parte verde do código:

var maxresults=5;

Para mostrar os artigos relacionados na página inicial, apague as partes em vermelho

Vejam o resultado no meu blog de testes:

resultado posts relacionados com imagens

Em #related-posts você pode mudar a cor, a posição e o tamanho da fonte:

font-size: 15px; (tamanho)
font-weight: bold;(italic ou normal)
color: #000; (cor)
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; (tipo)

Fontes: El Escaparate de Rosa - Blogger Widgets - Templates Novo Blogger

30 Comments
Comments
  1. Sei da validade de publicar imagens num post, mesmo sabendo que não o faço bem ainda, mas usando este hack eu não teria a obrigaroriedade de publicar uma imagem? Creio que sim, né. Usei um hach semelhante, mas de resumo de postagens lá no blog "Casa do texto" e arrumei uma outra preocupação: sempre colocar imagens e sempre quadradas. Se eu não fizer isso, a imagem fica distorcida. Em todo caso, o hack, é eficaz pra chamar a atenção.

    ResponderExcluir
  2. Bingo, professor!
    É uma preocupação a mais.
    Eu sou da opinião que quanto menos firulas, melhor.

    ResponderExcluir
  3. juliana,, me recomende um site legal aee pra hospedar o codigo! valeu.

    ResponderExcluir
  4. Leia o texto de novo que "concerteza" você vai encontrar aeee o que você quer

    ResponderExcluir
  5. Juliana, belo post. Implantei este hack em meu blog. Aproveitando a oportunidade queria agradecer por manter o Dicas Blogger, pois tenho duas blogueiras com ícone na internet: você na parte prática e a Nospheratt na área teórica. Vocês duas são mais que demais. Seu blog é o único que consigo instalar os hacks comm total eficácia. Agradeço.

    Francisco Robson
    @Robhym

    ResponderExcluir
  6. A idéia é boa, mas deve demorar pra carregar a página. Eu gosto de imagens dentro do post e tento diminuir ao máximo o número de imagens fora dele.

    Marco Damaceno

    ResponderExcluir
  7. Excelente dica Juliana. Eu já utilizo o hack Posts Relacionados "tradicional" mas estou pensando seriamente em usar este novo quando mudar meu template.

    abraços

    Ps: Estou enganado ou você mudou o template do blog? Tenho a sensação de que ele tá um pouco mais azul ;oP.

    ResponderExcluir
  8. Oi Ju, eu publiquei um artigo no início do mês semelhante a esse, só que utiliza o LinkWithin: http://www.blogwindows.org/2009/09/posts-relacionados-com-miniaturas.html

    Abraço. :)

    ResponderExcluir
  9. Boa dica,mas meu blog já é meio pesadinho,e o rodapé é aquele do usuário compulsivo,acho que não iria dar pra manter desse jeito...

    Fazer o que né

    ResponderExcluir
  10. Hahaha! Chorei de rir lendo comentários...

    "Leia o texto de novo que "concerteza" você vai encontrar aeee o que você quer"

    Resposta genial!

    ResponderExcluir
  11. Eu adquiri um widget , depois que fui ver aqui ¬¬
    so porque sou pereguçoso vou deixaa , kkkkkkkkkkk

    ResponderExcluir
  12. Juliana, eu intalei o hack e funcionou perfeitamente, durante um dia! depois ele simplesmente sumiu!!
    sabe porque acontece isso?

    ResponderExcluir
  13. eu de novo...rss antes de vc me responder.. só uma observação, o hack funciona as vezes!!
    uma vez ou outra aparece as imagens!!

    eu estou usando no blog de testes, http://fflintstones.blogspot.com/

    se puder ajudar!!
    desde já agradeço!!

    ResponderExcluir
  14. Parece muito boa a idéia, mas por hora vou deixar como está.

    ResponderExcluir
  15. entao eu gostaria de saber o seguinte
    eu uso o script de leia mais ... ai acontece que só aparece o post relacionado quando se clica no titulo da postagem e abre apenas ela.
    sera que tem como corrigir isso ?

    ResponderExcluir
  16. ótima dica, mas não funcionou no meu blog

    ResponderExcluir
  17. bem loko mais eu consegui colocar outro olha meu blog como ficou legalzinho =)

    www.cubofilmesonline.blogspot.com

    ResponderExcluir
  18. Julianaaaa..preciso te dizer que você nos ajuda demais quando o assunto é Blog.Antes de procurar os itens que quero em qualquer outro lugar, antes venho aqui, porque eu acho que ninguém explica tão bem quanto você. Parece que você advinha as nossas dificuldades!rs.
    Parabéns viu?utilizo Hack..ele funciona perfeitamente e além de ajudar na navegação dos nossos visitantes, dá uma imagem linda ao Blog.Adoroo! *.*

    ResponderExcluir
  19. Juliana, você por um acaso não sabe de um hack como esse mas que eu tenha a opção de linkar quais os posts que vou relacionar?

    ResponderExcluir
  20. Meu template não consta nenhum dos:
    p class='post-footer-line post-footer-line-1'
    ou por:
    div class='post-footer-line post-footer-line-1'

    ResponderExcluir
  21. no meu site
    www.mococafilmes.rg3.net
    nao deu certo :S
    alguem sabe oq fazer?

    ResponderExcluir
  22. Obrigado Jú. Apaguei o hack antigo e adicionei este! Ficou ótimo! :)

    Beijos e Abraços!

    ResponderExcluir
  23. Cara, ótima dica! Funcionou perfeitamente no meu blog! Valeu!

    ResponderExcluir
  24. Queria saber como faz para que os "Relacionados" vão em aleatorio, sem ser na sua propria categoria. Se alguem puder me ajudar ficarei grato! :D

    ResponderExcluir
  25. Olá tudo bem?
    Não consigo encontar (/head)no HTML do meu blog. Mesmo expandindo e usando o (Ctrl + F)não se acha ele. Ja procurei em todo o HTMl e relamente não tem. O que devo fazer?
    Beijos.

    Patricia.

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top