» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Posts Recentes Somente com as Miniaturas das Imagens dos Posts

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.
Posts Recentes com Miniaturas

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;


»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

Posts Recentes Somente com as Miniaturas das Imagens dos Posts Posts Recentes Somente com as Miniaturas das Imagens dos Posts Reviewed by Aurea R C on 7/14/2013 Rating: 5

7 comentários:

  1. Mim ajude o meu Não fico a imagem do GadGet Por que ?

    ResponderExcluir
  2. Oi perdão o comentário era para este post queria colocar 4 miniaturas e por baixo uma imagem bacground personalizada, tem como?

    ResponderExcluir
    Respostas
    1. Olá Cris,
      Acho que tem sim pelo HTML do blog. Terá que encontrar qual é o gadget tipo html dos seus posts recentes e colocar um style='background: cor ou link ;' no div do gadget.
      Assim que puder tento fazer isso e te falo!
      Seja bem vinda ao TPV.

      Excluir
  3. teria como colocar o titulo da postagem em baixo da imagem?

    ResponderExcluir
  4. Olá Ronald,
    No post: http://www.templatesparavoce.com/2013/07/posts-recentes-com-miniaturas-e-resumo.html tem como você configurar para aparecer apenas o título do post sem o resumo. Para isso, nesta linha: [var showpostsummary = true;] altere a palavra [true] por [false].
    Agora para que o título fique embaixo da imagem deverá alterar o CSS do gadget por tentativa e erro até dar certo.

    ResponderExcluir
  5. teria como por 2 widgets desse no mesmo blog? se teria poderia me dizer como?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.