Tumblr: Como aparecer atualizações em seu blog

Tutorial Tumblr

Se você é fã do Tumblér (hehe) como eu e ainda por cima tem um blog no qual quer colocar suas atualizações de lá, tem um script que é sensacional que faz aparecer quase todos os tipos de atualizações em seu blog — digo quase porque ele não aparece suas músicas postadas por causa do player, infelizmente. Eu acho legal fazer essa integração de Tumblr com Blog porque há coisas que não dá para postar num blog normal sem que os visitantes pensem que o conteúdo publicado deixe a desejar.

1º) Baixe o arquivo .js que disponibilizei aqui.

2º) Abra-o e você verá que há na linha 5 e na linha 19 (Ctrl+G e digite o nº da linha) há os campos em que eu escrevi "USUÁRIO". Coloque no lugar o nome do seu usuário do Tumblr. Mas lembre-se de colocar no primeiro campo o nome que você definiu lá em Customize » Info » Title. Eu sofri a beça por causa disso porque no tutorial que eu tinha visto, não explicava esse detalhe. O nome do meu tumblr é anaflavia.tumblr.com, mas o usuário que defini é Aninha♥, então eu tive que escrever "aninha♥" na linha 5. Na linha 19 você coloca o usuário que aparece na sua URL (que no meu caso é "anaflavia").

3º) Envie o arquivo .js para um hospedagem por FTP (ou manualmente, tanto faz). Ou você pode hospedar no Tumblr através desta ferramenta de upload.

4º) Para personalizar as suas atualizações no blog, coloque este código em seu CSS:

#tumblr-bagde
{margin: -5px 0 0 0;
font-size: 10px;
padding: 1px 1px 2px 1px;}

.tumblr
{list-style: none;
width: 100%; 
margin-bottom: 1em; 
padding: 0;}

.tumblr li {margin-bottom: 1em; list-style-type:none;}
.tumblr p {margin: 0; font-size: 10px;}

.tumblr blockquote 
{margin: 2px 0 2px 4px; 
padding: 2px 0 2px 6px; 
background: none; 
border-left: 1px dashed #COR; 
border-bottom: none; 
border-right: none; 
border-top: none; 
font-size: 10px;}

.tumblr img 
{display: block; 
border: 1px solid #COR DA BORDA; 
max-width: 200px;  /*largura máxima para a imagem aparecer na sidebar*/
background: #COR DE FUNDO; 
padding: 5px;}

.tumblr em {display: block; margin-top: 0.2em; font-size: 10px;}
.tumblr .tumblr-post-date {display: block; font-size: 10px; margin-top: 1px;}

5º) Agora, use este código abaixo no local em que você quer que apareça as atualizações do seu Tumblr no blog:

<div id="tumblr-badge" style="font-size: 10px; line-height: 15px;"></div>
<script type="text/javascript" src="http://URL-DA-HOSPEDAGEM.com/tumblrBadge-1.1.js"></script>

E pronto! Se não der certo, continue a ler este tutorial.

6º) Neste passo eu tive dificuldade quando coloquei a primeira vez minhas atualizações no blog. O script não rodava de jeito nenhum e tive que buscar alternativas no Google para poder descobrir o que estava acontecendo. Então, eu encontrei este outro script que me me ajudou demais:

window.onload=function(){
var current_url = location.href;

var r=document.createElement('script');
r.id='tumblr';
r.setAttribute('type','text/javascript');
r.setAttribute('src','http://URL-DA-HOSPEDAGEM.COM/tumblrBadge-1.1.js');
var hd=document.getElementsByTagName('head')[0];
hd.appendChild(r);

/* change &quot;18745&quot; to your page / project ID */
document.getElementById('pUSUARIO').onclick = load_blog; // YOU MUST EDIT THIS LINE
var blog_link = current_url.search(/USUARIO/); // YOU MUST EDIT THIS LINE
if ( blog_link &gt; &quot;-1&quot; ) { load_blog(); }
}

function load_blog() {
setTimeout(&quot;load_timer()&quot;, 1000); //wait a bit until everything is loaded.
}

function load_timer() {
var theBlogContent = document.getElementById('tumblr-badge'); //stupid IE!
document.getElementById('blog').innerHTML = theBlogContent.innerHTML;
}

Troque http://URL-DA-HOSPEDAGEM.COM/tumblrBadge-1.1.js pela URL do arquivo que você acabou de hospedar, e onde está escrito USUARIO você colocará o usuário que define sua URL do tumblr. Em seguida, salve como tumblr-blog.js e envie-o para a mesma pasta onde está o tumblrBadge-1.1.js.

Espero que dê tudo certo! ;D

Crédito: Robert Nyman

Veja também...

Dica de série: Anne with an E, da Netflix
King's Cross + Tour completo pelos Studios de Harry Potter
Almoço no Las Nenas Café Bistrô (Goiânia)

0 Comentário(s)

(0 pelo blog e pelo facebook)