Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1490295728
Vida do cache: 1490554928
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Blogger Gadgets Postagens SEO

Postagens relacionadas com imagens para Blogger

Manter os visitantes mais tempo em seu blog é uma arte. Não é simples, mas faz muita diferença! Abaixar a Taxa de Rejeição e aumentar o tempo médio dos visitantes no blog é fundamental no processo de crescimento.

Com esse gadget instalado no fim de todas as postagens você pode conseguir mais tempo dos seus leitores, pois você divulga um conteúdo relacionado ao post que ele (leitor) está lendo. Aquilo chama atenção e por consequência, outra página sua é visitada pela mesma pessoa. Se a ligação entre as postagens for muito boa e suas postagens principalmente, aquele leitor pode se tornar um usuário fiel, visitando constantemente seu blog, assinando o feed e fazendo comentários.

Leia também: Posts Relacionados no blog (versão em forma de texto)

O gadget foi criado pelo blog Blogger Plugins, fiz algumas modificações visando melhor visibilidade e agora ensino como inserir o tal gadget em seu Blogger:

– Faça login, entre em “Design” -> “Editar HTML” e marque a caixa “Expandir modelos de widgets”;

– Procure (Ctrl + f) por :

</head>

- Cole o seguinte código ANTES do código encontrado:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//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]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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();
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:88px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; 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>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

- Faça as configurações:

  • defaultnoimage: Imagem padrão para os posts que não apresentam nenhuma imagem. Substitua o link existente pela imagem que você quiser. Padrão: http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png;
  • maxresults: Quantidade de postagens relacionadas a ser apresentada. Padrão: 5;
  • splittercolor: A cor (em código) da linha divisória. Padrão: #d4eaf2.

- Procure por:

<div class='post-footer-line post-footer-line-1'> 
ou
<div class='post-footer-line post-footer-line-1'/>
ou outro lugar onde você deseja inserir o gadget

6° - Insira logo abaixo o seguinte código:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0;display:none;" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

7° - Caso você queira que o gadget seja visível nas páginas internas (postagens abertas) e na página inicial (em todas as postagens), apague as linhas:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
e
<!-- remove --></b:if>

As postagens são relacionadas através das categorias usadas em cada post. Se você não usa categorias ou não organiza bem a escolha das categorias, o gadget não vai fazer o seu melhor papel.

Caso você tenha algum problema com as imagens das postagens que não aparecem no gadget, como na imagem abaixo:

Leia o post: Erro de carregamento das postagens relacionadas com imagens



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

22 Comentários

  1. Aline S. disse:

    Eu uso o LinkWithin http://widget.linkwithin.com
    É fácil de configurar e instalar e o efeito é o mesmo.
    http://alinetux.blogspot.com

  2. Daya Baxton disse:

    Muito útil esse post, tenho isso no meu blog tbm e é muito bom para q atraia mais o leitor, pois se ele se interessar pelo assunto acaba clicando na imagem e lê mais posts do seu blog, mesmo q sejam antigos..

    Mudando um pouco de assunto, eu recebi um e-mail da equipe do Windows live dizendo q meu blog e outros blogs seriam deletado até março, nao sei se é vdd, pois meu blog é do Blogspot da minha conta no google, oq isso tem a ver??? Só uso um programa do windows live (o Windows live writer). Nao entendi esse email, será virus?

    bjs

  3. Paulo Estevão disse:

    @Daya,
    O Windows não tem ligação alguma com o Google, então não tem porque se preocupar. Deve ser vírus.

  4. Aldéryck Riptor disse:

    Saudações! Adorei o artigo. Usei está funcionando perfeitamente. | Mas gostaria de saber como posso editar o código para que este widget se centralize no rodapé do post. Pois ao usar seus códigos, o widget permaneceu à esquerda. =/ Inscrevi este post, estarei aguardando resposta. muito obrigado!

  5. Paulo Estevão disse:

    @Aldéryck,
    coloca < div align = "center" > antes e < / div > depois.

    Obs.: Sem espaços.

  6. MetalEmPortugues .com disse:

    Aldéryck Riptor:
    @Paulo Estevão

    Sem sucesso, Paulo. Apenas o título "Artigos Relacionados" se posicionou no centro. =/

  7. Alta Floresta News.com.br disse:

    sem sucessooo nao dei certo aqui nao

  8. Carlos Romero disse:

    O linkwithin tem um resultado bem melhor. O problema é que eu não tô conseguindo fazer com que os posts relacionados sejam mostrados apenas nas páginas internas.

  9. Bloguinho2@11 disse:

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.

  10. Giovani Bartz disse:

    Eu usava o linkwithin e agora coloquei o 2leep.com no meu blog, está funcionando bem.
    A minha dúvida é como posso colocar o título "Leia também:" tipo esse seu aqui?
    Desde já agradeço.

  11. Paulo Estevão disse:

    Giovani,
    é só escrever antes do código do 2leep.
    abraços

  12. Giovani Bartz disse:

    Já achei, Paulo.
    Veja como ficou:
    http://pescanalagoa.blogspot.com
    Consegui até mudar as letras.
    Um abraço.

  13. Ines Wiltshire disse:

    Quando tento procurar um dos textos
    div class='post-footer-line post-footer-line-1'
    ou div class='post-footer-line post-footer-line-1'/
    aparece a mensagem: texto não encontrado.
    Você poderia me ajudar? Obrigada

  14. Paulo Estevão disse:

    @Ines,
    procure algo relacionado.

    abraços

  15. PAGONEJA disse:

    nao consegui…nao aparece nd ;/

  16. Jessika Crazy disse:

    Olá !

    Tenho uma dúvida.

    Sobre esse código não aparece no meu site,já tentei colocar o do linkwithin más não atualiza , já tinha colocado antes ,exclui umas postagens faz meses; mesmo assim elas ainda aparecem como postagens relacionadas ,já coloquei o códigos várias vezes e nada elas ainda aparecem

    Tem como 3 postagens relacionadas eu quero colocar 5 postagens

    O que tem de errado ?

    http://www.fazercosmeticos.com

  17. Paulo Estevão disse:

    Você usa marcaodres nas postagens? Tem que usar…
    Abraços

  18. MICHAEL disse:

    oLÁ, como eu aumento o tamanho das imagens? em que parte do código eu altero?
    grato.

  19. O meu não tem a quarta opção,onde coloco o codigo então?

  20. mauro disse:

    oi paulo esta dando erro nesta linha aqui o que faço
    for (var i = 0; i < json.feed.entry.length; i++) {

    e o meu aparece duas linhas e outras com o final 2 e 3

    • mauro disse:

      oi paulo esta dando erro nesta linha aqui o que faço
      for (var i = 0; i < json.feed.entry.length; i++) {

      e o meu aparece duas linhas
      div class='post-footer-line post-footer-line-1'/
      e outras com o final 2 e 3

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.