Postagens relacionadas com imagens para Blogger na vertical

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

É comum encontrarmos modelos de gadgets para o Blogger de “Artigos Relacionados” para aparecer abaixo do texto de forma ordenada lado a lado. É bem como usamos aqui. Mas também é possível organizar a lista de recomendações em forma natual, um sobre o outro, exibindo imagem e títulos do artigo que será indicado.

Perceba que esse postagens relacionadas com imagens para Blogger na vertical como o próprio nome já diz, mostra as postagens relacionadas na posição natural de leitura de texto, o que dá um toque mais elegante em seu blog.

Veja o exemplo abaixo

Postagens relacionadas com imagens para Blogger na vertical

Como colocar postagens relacionadas com imagens para blogger na vertical.

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

2. Clique em: “Expandir modelos de widgets” para ver todo o código fonte do seu Blog. (Veja: Como acessar o código XML/HTML na nova interface do blogger)

3. Encontre o seguinte código (use CTRL + F para encontrar o código):

]]></b:skin>

4. Agora adicione o código abaixo imediatamente ANTES do indicado acima:

#related-posts{float:left;width: 99%;}
#related-posts ul{margin:0;padding:0;list-style-type:none}
#related-posts ul li{padding:10px 0}
#related-posts ul li:hover img{width:65px;height:40px;padding:3px}
#related-posts img{float:left;border:1px solid #BBB;margin-right:10px; width:65px; height:40px;background:#FFF;padding:3px}
#related-posts h3{margin:0;font-size:14px;color:#333333!important;}

5. Agora encontre o seguinte código (use CTRL + F para encontrar o código):

<div class='post-footer'>

6. Copie e cole o código que segue imediatamente DEPOIS do indicado anteriormente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both'/>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;<h4>Recomendamos a leitura dos seguintes artigos</h4>&#39;;rn=&#39;<h4>Não há artigos relacionados</h4>&#39;;rcomment=&#39;Comentários&#39;;rdisable=&#39;Comentários off&#39;;commentYN=&#39;yes&#39;;</script>
<script type='text/javascript'>
//<![CDATA[
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div style='clear:both'/>
</b:if>

7. Salve o modelo para ver o resultado em seu Blog.

Para personalizar:

Procure por maxresults=5; que é o numero de postagens mostradas (você pode alterar para mais de 5 ou menos de 5 se desejar)

Você pode ainda alterar o tamanho das imagens onde diz: width:65px; height:40px;

Também é possível alterar a cor de fundo das imagens: background:#FFF;

Pode alterar a cor e o tamanho da fonte: font-size:14px;color:#333333!important;

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

21 Comentários

  1. podemos usar este tutorial juntamente com as postagens relacionadas do linkwhitin?
    é que eu já utilizo as relacionadas do linkwhitin na horizontal, mas só alcança 15 postagens e não fica na barra vertical. gostaria de usar este seu também, será que tenho que eliminar o linkwhitin?

    Responder

    • Lhe aconselharia mostrar os artigos relacionados somente dentro dos posts e não na home page. Também seria um boa se você usasse artigos relacionados somente com texto e sem imagem, os artigos relacionados ficariam na vertical também, para combinar com o layout do blog é só você personalizar fontes, cor e tamanho dos títulos apresentados.

      Boa sorte! 🙂

      Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.