MINI UPDATES DO TUMBLR NO BLOG

MINI UPDATES DO TUMBLR NO BLOG

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

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

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

http://www.bunnycrazy.net/2014/04/mini-updates-do-tumblr-no-blog.html#more