Artigos relacionados com imagens no final da postagem dicas e tutoriais

Manter o leitor interessado no Blog é uma das tarefas mais importantes para um blog de sucesso, com os artigos relacionados seu leitor poderá encontrar o que procurava ou se interessar por um novo conteúdo que existe em seu Blog, sendo assim ele irá visitar mais paginas e ficara por mais tempo no Blog, vamos aprender como inserir esta função que irá manter seu leitor interessado de maneira inteligente.

Colocando artigos relacionados com imagens

1. Vá até "Layout" > "Editar Html" e marque a opção "Expandir modelos de widgets" e procure pela linha "</head>" e acima dela adicione o código abaixo:

<!--Artigos Relacionados Estilo e Script Inicio -->

<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

</b:if>

<!--Artigos Relacionados Estilo e Script Final-->

As partes em negrito representam a cor que os textos terão, caso queira alterar substitua pelo nome da cor que deseja, ex: "white"

2. Agora procure por "<div class='post-footer-line post-footer-line-1'>" se não encontrar procure: "<p class='post-footer-line post-footer-line-1'>" imediatamente antes disto, adicione o código abaixo:

<!--Codigo Artigos Relacionados Inicio-->

<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>

<!--Codigo Artigos Relacionados Final-->

Onde está indicado em vermelho pode ser alterado pelo numero de artigos relacionados que você quer que apareça.

Onde está indicado em azul pode ser alterado pelo titulo que você deseja, ex: Leia Também.

3. Salve o modelo e veja o resultado.