Posts Recentes com Miniaturas e Resumo do Post

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

Em 2007 postei um dos primeiros tutoriais aqui no TPV que ensinava como Colocar um Gadget de Posts Recentes. Neste tutorial os Posts Recentes ficavam dispostos em uma lista de links apenas.

Hoje vou ensinar como colocar um gadget com posts recentes também, mas com a miniatura da imagem do post à sua esquerda e seu resumo. E o próximo post será o mesmo tipo de gadget, porém somente com as imagens dos posts.
Vamos lá!

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:

<style type='text/css'>
img.recent_thumb { padding: 1px; width: 60px; height: 60px; float: left; margin: 5px; border: 1px solid #ccc; border-right-width: 2px; border-bottom-width: 2px; }
.recent_posts_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 5px 0px 5px 0px; padding: 0; font-size: 12px; }
ul.recent_posts_with_thumbs li { padding: 5px 0px; min-height: 65px; text-decoration: none; list-style: none; }
.recent_posts_with_thumbs a { text-decoration: none; font-size: 14px; }
.recent_posts_with_thumbs strong { font-size: 10px }
</style>
<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://URL_DO_SEU_BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

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

Fiz algumas adaptações ao código original para ficar como está na imagem acima. Como colocar bordas nas imagens, aumentar a fonte do título/link do post, etc...

»[ font-size: 14px; ] →Tamanho da fonte do título dos Posts Recentes;
»[ var numposts = 5;] → Quantidade de posts recentes a ser exibido no gadget;
»[ var showpostthumbnails = true;] → True para mostrar as miniaturas das imagens dos posts recentes, false para não mostrar;
»[ var displaymore = false;] → Se quiser que apareça o link More-> no final do resumo dos posts recentes coloque true;
»[ var displayseparator = true;] → True para mostrar a linha separando os posts. Se não quiser esta linha coloque false.
Você pode também colocar uma linha pontilhada, mantendo o false e colocando uma borda:[ border-bottom:1px dotted #ccc ] no estilo CSS do gadget na linha:[ ul.recent_posts_with_thumbs li ]
Ficando assim:  ul.recent_posts_with_thumbs li {padding:5px 0px; min-height:65px; text-decoration: none; list-style: none; border-bottom:1px dotted #ccc}
»[ var showcommentnum = false;] → True para mostrar o número de comentários dos posts recentes;
»[ var showpostdate = false;] → True para mostrar a data dos posts;
»[ var showpostsummary = true;] → True para mostrar o resumo dos posts recentes, false se não quiser mostrar o resumo;
»[ var numchars = 100;] → Quantidade de caracteres (Ex:letras) do resumo dos posts recentes
»[ http://URL_DO_SEU_BLOG ]→ Substitua pelo link do Seu Blog.
Ex: http://templatesparavoce.com/

Observação Importante:

Veja o script desta gadget:

<script style='text/javascript' src='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.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 Googlecode

»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.techkgp.com/2013/04/recent-posts-widget-with-thumbnails-for.html