Gostou do blog ? então curta nossa página no Facebook:

Widget artigos relacionados com imagens

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 default nos seus artigos relacionados

Fonte do código: Ferramentas Blog

2 comentários:

BUYMAZON disse...

Mais uma vez estou te agradecendo por dividir seu conhecimento.
Queria instalar os "artigos relacionados" e agora tenho a oportunidade de fazê-lo.
Valeu Francinelson!!!

andre disse...

Isso é muito bom para baixar a taxa de rejeição do blog!

© 2010 | Rei do Bloguinho |Todos os direitos reservados
topo ↑