Mini Updates do Tumblr no Blog

Yo amores, como vão? Meu dia vai bem puxado... estou cuidando de onze crianças, mais minha irmã. Estou pensando em participar da peça da comunidade... sei lá. Faz tanto tempo que não faço uma peça, acho que tem uns dois anos. Mas como me convidaram, não sei o que dizer...apesar de quer ahh...  Mas mudando de assunto venho trazer uma postagem rapidinho. Trago um tutorial que já foi beeem usado no blog, mas achei o tutorial e estava para postar mas sempre esquecia, então trouxe hoje. É algo meio antigo, mas sempre tem aqueles que gostam, né? Vou mostrar como colocar um widget que mostra minis updates do Tumblr no Blog. Acho bem charmosinho e uma forma de chamar atenção de seus visitantes a acessar o Tumblr.

Acho ele realmente muito lindo, por isso deixarei um pequeno exemplo aqui na postagem para vocês. Espero quero que gostem, deixei ele exatamente como esta no código baixo:

1. Acesse seu modelo|Design - Editar HTML e cole antes de ]]></b:skin>:

Códigos

.tumblr-photos{
width: 200px;
background: #fff;
border: 1px solid #fee;
box-shadow: 1px 2px 3px #fee;
}

Esses são os estilos que personaliza o  widget, incremente o código para que fique de seu agrado como: efeitos, sombra, bordas etc... 

2. Agora vá ate Layout e adicione um novo gadget HTML/JavaScript, dentro dele cole o código baixo. E no código substitua onde diz LINKDOSEUTUMBLR, por seu endereço:

Códigos

<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>

O código esta arrumado para aparecer quatro miniaturas, altere os números que estão em vermelho para qual desejar. Assim aparecendo mais ou menos figuras de acordo com sua numeração. Exemplo:

<a id='tumblr-url-widgy-4' href=''><img border='0' style='margin:2px' id='tumblr-photo-widgy-4' src='' alt='' /></a>

Viu? Bem fácil não é? Os créditos para esses códigos vão para o Reino Kawaii- Jiapps - Guren Coffee. É só isso, beijinhos amores.