Posts Recentes Somente com as Miniaturas das Imagens dos Posts

/**/
.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; }
/**/
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:



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;

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:
»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.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html

©2013 Templates para Você Aproveite que você assina o nosso Feed e me acompanhe no Twitter ;)