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&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 linha da mini imagem 5, que seria:
Altere o número 4 em http://LINKDOSEUTUMBLR.tumblr.com/api/read/json?number=4& 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
Nossa, que legal *o*
ResponderExcluirNão sabia que dava para colocar a miniatura das imagens do Tumblr no blog! Muito legal esse tutorial <3
Só ficam duas fileiras, queria que ficassem três. Como faço pra conseguir isso?
ResponderExcluirAumente o valor em width :3
ExcluirAh! E pode acrescentar um valor height para definir altura também, logo abaixo de width....:)
Excluir<3 Obrigadaaaaaaaaaaaaaa
ExcluirSeu blog é o meu preferido! Definitivamente é!
It is nice!
ResponderExcluirhttp://mariaaparina.blogspot.ru/
Adorei *-*
ResponderExcluirAaah 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
ResponderExcluirEu queria que ficasse a atualização um pouco maior, onde que eu mudo para fazer isso?
ResponderExcluirAcredito 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?
ExcluirBeijus e muito obrigada!
Tem como por os posts do tumblr?
ResponderExcluirEstes ja sao os do tumblr :)
ExcluirMinha 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.
ResponderExcluirTente 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.
ExcluirOu tente usar esse codigo aqui:Tumblr no blog,deixando os trechos de personalização de textos ocultos.
há dias que busco por esse widget, brigadão!
ResponderExcluirsuper legal o tutorial ! vou usar .
ResponderExcluirfinalmente! procura va fazia tempos esse widget... muito obrigada! coloquei 6 fotos! agora é descobrir como deixar a imagem maiorzinha
ResponderExcluir