saiba como é feito: "Artigos relacionados com miniatura de imagens"
Autor: Edilene brandao da silva | Publicado: 2011-08-03T15:24:00-07:00

Este presente tutorial vi no blog da Elke,e todos os créditos são detemplateseacessorios,&nbsp;o blog da ElkeHá tempos queria aprender, e no&nbsp; LinkWithin, nunca dava certo!Portanto,muito obrigada Elke (Maravilha!!!)     "Artigos relacionados com miniatura de imagens"  
  

   

O site LinkWithin já havia oferecido um serviço como este mas como blogueiro é gente curiosa e inquieta, já houve quem o aperfeiçoasse. Blogger Plugins agora nos ensina como colocar direto no blog os tais posts relacionaods com miniatura de imagem. Serve para o blog antigo e para o novo, implementado em junho de 2010. Vamos então aprender ?

Vá até o HTML de seu blog e procure pelo seguinte código:
&lt;/head&gt;


Acima dele cole este código abaixo
*código na cor verde é a cor de fundo das miniaturas 
*codigo vermelho, cor de fundo do widget selecionado
*código azul é o número de posts que aparecerá




&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;!-- remove --&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type='text/css'&gt;
#related-posts {text-align:center; text-transform:none; height:100%;min-height:100%;padding:10px 0 15 0; margin: 20px 5px 0 5px; background: #ffffff;}
#related-posts h2{font-size: 12px;text-align: center; color: black; margin-bottom: 0.35em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:black; background: #ffffff; border: 1px solid #000; padding: 10px; margin: 2px; height: 180px;}
#related-posts a:hover{color:black;}
#related-posts  a:hover {background-color:#ccc;}
&lt;/style&gt;&nbsp;&lt;script type='text/javascript'&gt;
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Posts Relacionados";
&lt;/script&gt;
&lt;script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/&gt;
&lt;!-- remove --&gt;&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;
Agora clique em "Expandir modelos de widget" e procure pelo código abaixo:
&lt;div class='post-footer-line post-footer-line-1'&gt;

Se não encontrar este acima, tente este outro.
&lt;p class='post-footer-line post-footer-line-1'&gt;


Em ambos os casos, depois do código, aplique todo este trecho abaixo.


&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;!-- remove --&gt;&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type='text/css'&gt;
#related-posts {text-align:left; text-transform:none; height:100%;min-height:100%;padding:20px 0 15px 0; margin: 30px 5px 0 5px; background: #eee;}
#related-posts  h2{text-shadow: 1px 1px 1px #fff;font-size: 16px;text-align: center;  color: black; margin-bottom: 0.35em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;color:black; background: #eee; border: 1px dashed #000; padding: 10px; margin: 4px; height: 150px;}
#related-posts a:hover{color:black;}
#related-posts  a:hover {background-color:#ccc;}
&lt;/style&gt;

&lt;script type='text/javascript'&gt;
var defaultnoimage=&amp;quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&amp;quot;;
var maxresults=5;
var splittercolor=&amp;quot;#d4eaf2&amp;quot;;
var relatedpoststitle=&amp;quot;Posts Relacionados&amp;quot;;
&lt;/script&gt;

&lt;!-- remove --&gt;&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;


Onde está em vermelho você poderá trocar pela quantidade de posts que deseja mostrar
               http://dicasmaiss.blogspot.com&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;