Como colocar artigos relacionados com imagens no blog

Existem duas formas de se colocar artigos relacionados, uma delas é mais fácil e a outra um pouco mais difícil. Vou ensinar as duas formas, a escolha fica a seu critério.

A primeira delas é utilizando-se o site Linkwithin. Para você, que está começando a usar blogs, este widget é recomendável, ele escolhe aleatoriamente os seus posts, fazendo com que os seus posts antigos não fiquem esquecidos. Lembrando que você precisa fazer uso de imagens nos posts para que ele funcione corretamente.

Siga as instruções abaixo:

1)Acesse o site LinkWithin.

2) Coloque seu e-mail:

3)O endereço do seu blog.

4) Qual plataforma utiliza.

5)Quantas caixinhas deseja.

6)Se o seu template é escuro marque a opção "My blog has light text on a dark background".

7)Clique em "Get Widget!".

8)Na página seguinte clique em "Install Widget".

9)Acesse sua conta Blogger.

10)Selecione o blog.

Em Design, clique e arraste o gadget para baixo das postagens no blog e Salve.


A segunda forma, um pouco mais difícil, porém mais personalizável:

1. Vá ao painel do Blogger e abra o menu “Layout” ~> “Editar HTML” e marque a opção “Expandir modelos de widgets”, para poder visualizar todo o código-fonte de seu template.

2. Procure pela linha “</head>” e, imediatamente ANTES dela, insira o código abaixo sem modificar nada:
<!--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-->

3. Agora procure por uma linha semelhante a:

<div class=’post-footer-line post-footer-line-1′>

ou, se não, procure por:

<p class=’post-footer-line post-footer-line-1′>

4. Imediatamente ANTES de uma dessas que você encontrar em seu código, cole os linhas a seguir:

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

Indicado de vermelho está o número “5″ que é a quantidade de elementos que aparecerá. Veja qual a melhor quantidade para o seu blog. Em amarelo está o título que aparecerá em seu blog. Salve.

Obs: Você deve usar Marcadores em seu blog.