Artigos relacionados com imagens para Blogger

Olá leitores QCB!

Hoje iremos debruçar-nos sobre um tutorial bastante interessante. Trata-se de um widget de posts relacionados, que complementam o post, cada artigo tendo uma imagem associada.

 

O código e os estilos são da responsabilidade do blog El Escaparate.

1º – Para começar, aceda à área administrativa do seu blog. De seguida, vá na aba (separador) Modelo > Editar HTML. Tome em atenção que deverá marcar a opção EXPANDIR MODELOS DE WIDGET.

2º – Agora, localize a tag </head> e imediatamente ACIMA/ANTES, cole o seguinte código:      

<!–Entradas relacionadas con imagen–>
<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: 15px;
font-weight: bold;
color: #000;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color: #000;
}
#related-posts a:hover{
color:#000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src=’http://blogergadgets.googlecode.com/files/relatedthumbs21.js‘ type=’text/javascript’/>
</b:if>
<!–Entradas relacionadas con imagen–>

3º – Agora clique em Salvar Modificações.

 

4º – De seguida, volte a procurar, desta vez por <div class=’post-footer-line post-footer-line-1′> .

Em alguns casos, o código pode variar dependendo do template que possui instalado no seu blog.

5º – Logo ABAIXO/DEPOIS dessa linha de código, cole o seguinte:

<!– Entradas relacionadas codigo–>
<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=”Entradas relacionadas”;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>
<!– Entradas relacionadas codigo–>

EDITAR

Este código é personalizável nos seguintes aspetos:

Aparecer/Desaparecer na Página Inicial => o código tem como padrão a opção de aparecer apenas nos links permanentes das postagens e não aparecer na página inicial.

Se desejar que apareça também na HOME do seu blog, localize e elimine o trecho:

<b:if cond=’data:blog.pageType == “item”‘> y </b:if>

Nº de artigos relacionados => o número de artigos relacionados predefinidos para aparecer no widget é de 5 artigos.

Para alterar este valor, localize o seguinte código e altere o nº5 pelo número que deseja:

var maxresults=5;

Título do widget => o título atual do widget é POSTS RELACIONADOS. Se pretender alterar o nome, procure pelo seguinte código e altere a parte a vermelho pelo título que deseja:

var relatedpoststitle=”Posts relacionadas“;

E pronto, agora depois de se certificar que está tudo correto, clique pela última vez em Salvar Modificações e está feito!

Artigos relacionados com imagens para Blogger
Rate this post

Especialista revela os principais segredos para se ganhar dinheiro com Google Adsense

Antonio Faneca

Responsável pela criação de um dos principais metablogs de referência na blogosfera brasileira, António trabalha atualmente como redator web (web writer). É também responsável pela empresa de soluções web (hospedagem, web design, etc.) Web Market.pt. Clique aqui para contratar os seus serviços!

Website: http://afaneca.com

5 Comentários

  1. continuo sem conseguir configurar um “post relacionado” no meu template.
    Quem puder me ajudar eu agradeço

    Não consigo configurar… o código sempre responde “erro de formatação” ou “erro de XML”

  2. Bom post sobre widget de posts relacionados, uma alternativa para quem não quer utilizar os widget da moda.

    • @€mpregodinheiro

      Certamente que poderá representar uma excelente alternativa.

      Obrigado pelo comentário e volte sempre!

    • Ainda bem que gostou 😀

      Espero poder escrever muitos mais artigos, toda a segunda feira!

Deixe uma resposta

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.