Follow Us @soratemplates

terça-feira, 28 de maio de 2013

Mini Updates do Tumblr no Blog

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