Hot Posts

6/recent/ticker-posts

Gadget artigos relacionados com imagem

Gadget artigos relacionados com imagem

Encontrei outra de forma de colocar artigos relacionados abaixo das postagens do blog,essa maneira e mais legal de que colocar linkwithin , essa forma ela exibe imagens no formato de Thumbnails.
Thumbnails são pequenas imagens de 72x72 pixels que nós podemos usar em nosso blog para indicar ao visitante sobre algum assunto relacionado.

Para colocar o acessório no seu blog siga as instruções abaixo:
Entre no blog,layout,editar html e clique em expandir modelos de widgets e procure por essa tag </head> e cole o código abaixo antes dela:

 

<!--Artigos Relacionados Estilo e Script Inicio -->
<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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-->

Salve seu template.

clique em expandir modelos de widgets e procure por:

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

Se em seu template não tiver este código procure por este:

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

Cole o seguinte antes de umas dessas tags:

<!--Codigo Artigos Relacionados Inicio-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Artigos Relacionados";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/></b:if>
<!--Codigo Artigos Relacionados Final-->

salve o seu template

Uma lista com 5 artigos relacionados e em cada um deles exibirá uma imagem,Você também pode determinar o número de artigos que aparecerão abaixo das suas postagens modificando este atributo no script:

var maxresults=5;

Poderá também alterar a mensagem artigos relacionados por qualquer outra, basta modificar este atributo abaixo:

var relatedpoststitle="Artigos Relacionados";

Obs:
As imagens só aparecerão caso você tenha feito upload de alguma imagem para colocar no seu artigo. Do contrário o hack vai exibir uma imagem de
fault nos seus artigos relacionados

Fonte:Ferramentas Blog