Olá! Há algum tempo encontrei um código que permitia mostrar as imagens das postagens mais recentes do tumblr em miniaturas. Achei bem interessante, só que havia me esquecido até encontrá-lo em meus arquivos novamente e usar aqui no blog; faltava achar a fonte original para citar nos créditos, que segundo o Google pertence a jiapps.com, porém encontrei graças a guren-coffee.blogspot.com.
Compartilho com vocês como usar esse widget super interessante, que funciona tipo esse que mostrei há um tempo, em que se adiciona o tumblr no blog, mas com a aparência do widget de updates, sem que precise hospedar nada, e fica assim:

1. Acesse seu modelo - Editar HTML e cole antes de ]]></b:skin>:
 .tumblr-photos{
width: 200px;
background: #fff;
border: 1px solid #fee;
box-shadow: 1px 2px 3px #fee; 

Esses são os estilos para deixar o widget de acordo com sua preferência; pode trocar cor da borda, tamanho, sombra e adicionar mais efeitos.
2. Em Layout, adicione um novo gadget HTML/JavaScript (ou cole onde preferir) o código abaixo, substituindo onde diz LINKDOSEUTUMBLR:
 <div class="tumblr-photos">
<a id='tumblr-url-widgy-1' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-1' src='' alt='' /></a><a id='tumblr-url-widgy-2' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-2' src='' alt='' /></a><a id='tumblr-url-widgy-3' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-3' src='' alt='' /></a><a id='tumblr-url-widgy-4' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-4' src='' alt='' /></a>
</div>
<script src="http://LINKDOSEUTUMBLR.tumblr.com/api/read/json?number=4&amp;type=photo" type="text/javascript"></script>
<script type="text/javascript">
document.getElementById('tumblr-photo-widgy-1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-75']);
document.getElementById('tumblr-url-widgy-1').setAttribute('href', tumblr_api_read.posts[0]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-2').setAttribute('src', tumblr_api_read.posts[1]['photo-url-75']);
document.getElementById('tumblr-url-widgy-2').setAttribute('href', tumblr_api_read.posts[1]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-3').setAttribute('src', tumblr_api_read.posts[2]['photo-url-75']);
document.getElementById('tumblr-url-widgy-3').setAttribute('href', tumblr_api_read.posts[2]['url-with-slug']);
document.getElementById('tumblr-photo-widgy-4').setAttribute('src', tumblr_api_read.posts[3]['photo-url-75']);
document.getElementById('tumblr-url-widgy-4').setAttribute('href', tumblr_api_read.posts[3]['url-with-slug']);
</script> 

E pronto. Esse vai mostrar 4 miniaturas; se quiser mostrar mais, basta alterar os números, por exemplo, adicione abaixo de:
<a id='tumblr-url-widgy-4' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-4' src='' alt='' /></a>

A linha da mini imagem 5, que seria:
<a id='tumblr-url-widgy-5' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-5' src='' alt='' /></a>

Altere o número 4 em http://LINKDOSEUTUMBLR.tumblr.com/api/read/json?number=4&amp para 5 e acrescente antes de </script> as linhas:
document.getElementById('tumblr-photo-widgy-5').setAttribute('src', tumblr_api_read.posts[4]['photo-url-75']);
document.getElementById('tumblr-url-widgy-5').setAttribute('href', tumblr_api_read.posts[4]['url-with-slug']);
Fica mais fofo desse jeito não é? Beijinhus ;3

17 Comentários

  1. Nossa, que legal *o*
    Não sabia que dava para colocar a miniatura das imagens do Tumblr no blog! Muito legal esse tutorial <3

    ResponderExcluir
  2. Só ficam duas fileiras, queria que ficassem três. Como faço pra conseguir isso?

    ResponderExcluir
    Respostas
    1. Aumente o valor em width :3

      Excluir
    2. Ah! E pode acrescentar um valor height para definir altura também, logo abaixo de width....:)

      Excluir
    3. <3 Obrigadaaaaaaaaaaaaaa
      Seu blog é o meu preferido! Definitivamente é!

      Excluir
  3. It is nice!
    http://mariaaparina.blogspot.ru/

    ResponderExcluir
  4. Aaah muito obrigada!! Eu estava procurando fazia um boom tempo alguem que explicasse de maneira clara e direta o que era para fazer e vc me ajudou muito! Arigatou <3

    ResponderExcluir
  5. Eu queria que ficasse a atualização um pouco maior, onde que eu mudo para fazer isso?

    ResponderExcluir
    Respostas
    1. Acredito que se alterar a largura total do gadget em width ou definir uma width para cada imagem, da para alterar. Verei isso depois, quando voltar a postar ok?
      Beijus e muito obrigada!

      Excluir
  6. Minha intenção seria ter apenas uma foto do Tumblr, do post mais recente, na barra lateral, e não 4 fotos, com duas linhas e duas colunas. Este modelo com 4 deu certo colocando apenas o código 2 como javascript/html. O outro eu tentei colocar no html do modelo, mas não aconteceu nada. Como faço pra ficar só uma foto? Obg.

    ResponderExcluir
    Respostas
    1. Tente assim: mude a area do script que diz number=4 e deixe apenas os trechos onde há escrito widgy-1 nos codigos; personalize a area do css em .tumblr-photos.
      Ou tente usar esse codigo aqui:Tumblr no blog,deixando os trechos de personalização de textos ocultos.

      Excluir
  7. há dias que busco por esse widget, brigadão!

    ResponderExcluir
  8. super legal o tutorial ! vou usar .

    ResponderExcluir
  9. finalmente! procura va fazia tempos esse widget... muito obrigada! coloquei 6 fotos! agora é descobrir como deixar a imagem maiorzinha

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart