Posts Relacionados com Imagens Miniatura (Thumbnails) - Widget para Blogger -

Se abrirem um qualquer post deste blogue e forem lá abaixo, quase ao fundo da página, poderão ver o novo widget que agora vou explanar: a forma de inserir, no final de cada post, um conjunto de links para posts relacionados com aquele que estão a ler. A novidade aqui é que esses links são acompanhados de uma imagem miniatura/thumbnail, retirada precisamente do post em questão (o relacionado).

É muito simples e de belo efeito.

Passo 1:

Inicie a sua sessão no blogger
Vá para o seu Painel
Clique no separador Design
Clique em editar HTML
Marque a caixa Expanda os Widgets do Template

Passo 2: 

Procure, no código do seu blog, o seguinte:

</head>

Depois, substitua-o pelo seguinte código:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKoTchZMTegkmIbq5R1ALuRKH_MpSPhcxTlTIx1hxHOuFkrcSOqayvK100OYEAx6K-irUyhrT57iyxmiERYSBUpdBJg6Y4jREjCpm6vOPHPoQxeo2r6WZaMsFO2jQFPvZybkifOI_NWM/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Posts Relacionados";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Passo 3:

A seguir, procure:

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

Se não encontrar, procure:

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

Passo 4:

Qualquer que tenha sido o que encontrou, imediatamente a seguir a essa parte de código, ponha esta:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

E é isso. Deverá resultar. Comigo resultou.

No caso de surgir algum problema, reporte nos comentários, pf.

Mensagens Relacionadas

Uma das coisas interessantes que se devem utilizar nos blogs é a possibilidade de colocar automaticamente, imediatamente após cada mensagem, os links de mensagens relacionadas com ela.
Assim se permite ao utilizador interessado num determinado artigo, navegar facilmente por outros de alguma maneira relacionados, isto é, que abordem o mesmo tema ou similares.
É uma vantagem para o utilizador que encontra mais facilmente no blog assuntos do seu interesse, e para o blogger, que assim mantém o leitor mais tempo no seu blog.
E isso é muito fácil. Sigam os passos:
1. Editar o Template/Modelo do blog (Editar HTML);
2. Se não tem grande à vontade a mexer no código HTML, faça o download do seu template, para que, se alguma coisa correr mal, o poder restaurar.
Para isso clique em "Transferir modelo completo";
3. Marque a caixa "Expandir modelos do widget"
4.Encontre a linha:
data:post.body/>
5. Logo na linha a seguir coloque o seguinte código:

Related Posts by Categories




Widget by Hoctro | Jack Book

E é tudo. Simples, não?