Artigos relacionados rotativo para blogger



Colocar os artigos relacionados rotativo no blogger, acredito que muita gente igual a mim procura, e acaba encontrando tutoriais que são complicados demais para entender. Se você ainda não sabe do que eu estou falando, olha ai o exemplo:

As postagens ficam relacionados pelos marcadores (tags), mostrando outros artigos com as mesmas tags, e que o leitor, pode se interessar e ler a postagens. 

Antes de qualquer alteração em seu layout, salve o código em um bloco de notas, caso aconteça algum erro. 

Bem, vamos ao códigos. Basta ir em modelo > edit HTML e clique em "expandir modelos de widgets" aperte 'ctrl+f ' e procure por </head> e logo antes dessa linha coloque este código.

<!--Artigos Relacionados Estilo e Script Inicio -->
<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: 12px; color: #a9a9a9;font-family: Georgia; margin-bottom: 10px; margin-top: 10px;}
#related-posts a{color: #a9a9a9;}
#related-posts a:hover{color: #c6bd5e;}
#related-posts a:hover {background-color:#e1e1e1;}
#related-posts img{margin: auto;}
</style>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!--Artigos Relacionados Estilo e Script Final-->

Feito isso, procure por:

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

caso não encontre tente,

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

 Encontrando, cole ANTES da linha este código:

<!--Codigo Artigos Relacionados Inicio-->
<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=&quot;Você também pode gostar&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!--Codigo Artigos Relacionados Final-->

var maxresults=5; este ' 5 ' indica a quantidade de postagens que ira aparecer. Você pode modificar, já que em cada blog cabem quantidades diferentes de artigos.

Em  #related-posts, você pode modificar a cor dos links, cor do background dos artigos, deixando de acordo com as cores do seu blog.

Salve e veja o resultado. Lembre-se, só funciona com o uso dos marcadores. 

É isso, qualquer dúvida ou questionamento deixe nos comentários, Um Abraço!

Comentários

Postagens mais visitadas deste blog

Como corrigir Publicações com undefined na data do Blogger

Ganhe dinheiro com o Facebook

Como fazer o seu dinheiro trabalhar para você