Posts Recentes Somente com as Miniaturas das Imagens dos Posts

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

Vocês acabaram de aprender no artigo anterior como colocar um Gadget de Posts Recentes com Miniaturas e Resumo do Post.
Neste aqui vou ensinar como colocar o gadget de posts recentes somente com as imagens dos posts.

Considero este recurso muito útil para quem tem blogs de imagens, pois valoriza mais as imagens do blog tornando-o mais visual.
Utilizei-o no meu blog de imagens o Imagens para Você. Se você quiser ir ver como ficou é só clicar no link.

1º- Crie um Gadget HTML onde desejar em seu blog:

Vá em Layout → Clique em Adicionar um Gadget → Escolha o Gadget HTML/JavaScript

» Copie e cole este código na Gadget HTML:

<div id='bp_recent'></div>
<style type='text/css'>
.bp_item_thumb img { border: 1px solid #ccc; transition: all 400ms ease-in-out; -webkit-transition: all 400ms ease-in-out; -moz-transition: all 400ms ease-in-out; -o-transition: all 400ms ease-in-out; -ms-transition: all 400ms ease-in-out; }
.bp_item_thumb img:hover { opacity: .6; filter: alpha(opacity=60); -moz-opacity: .6; -khtml-opacity: .6; }
</style>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 8;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 4;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://URL_DO_SEU_BLOG/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

2º- Entendendo e Configurando o Código de Posts Recentes somente com Miniaturas

Fiz algumas adaptações ao código original para ficar como está na imagem acima. Como colocar bordas nas imagens e colocar o efeito hover opacity (a imagem fica opaca quando o mouse está sobre ela).

Veja no Demoplate ou no Imagens para Você

»[ var numberOfPosts = 8; ]→ Quantidade de posts que o seu gadget irá ter;
»[ var imgDim = 70; ]→ Dimensão das miniaturas das imagens dos posts recentes. Neste caso: 70px. Dimensione as imagens do seu gadget para ficarem dispostas da melhor forma;
»[ var myMargin = 4; ]→ Margem entre as miniaturas das imagens;
»[ max-results=10 ]→ Se você selecionou 8 posts na variável var numberOfPosts=8; acima esta opção deverá ser sempre um número maior que o primeiro. Neste caso 10.
»[ http://URL_DO_SEU_BLOG ]→ Substitua pelo link do Seu Blog.

Observação Importante:

Veja o script deste gadget:

<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>

»O link em vermelho é o código JavaScript deste gadget.
Você pode hospedar este arquivo em um site de sua preferência colocando o LINK fornecido por sua hospedagem no lugar do script original;

»Leia:Como Hospedar Javascript no seu GoogleDrive

»Desta forma não haverá o risco de seus posts recentes não funcionarem, a não ser que muitas pessoas usem o mesmo endereço do java e sua taxa de transmissão de banda ultrapassar o limite do site de hospedagem.

Fonte: ♦ Tradução e Adaptação do Artigo: http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html