claudinha.org

sábado, 27 de março, 2010 às 07:52

Bom, quem me acompanha assiduamente aqui no blog e nos mini-blogs da vida, sabe que eu ~~declarei todo meu amor~~ expliquei aqui do que se tratava o Tumblr. Pois bem, um post além eu falei sobre o Meme Yahoo!, tambem declarando o que eu achava sobre e dando uma demonstração simplificada do que era. Minha boca do inferno veio a tona e um tempinho depois eu tava ~~viciada~~ empolgada com o Meme, era postando foto adoidado, repostando coisas interessantes dos meus contatos e virou festa o negocio. Conclusão: abandonei meu Tumblr again. :25: Mas então agora ja enjooei do Meme (tinovo? ) e estou firme e forte no meu mais querido photoblog e como eu ja estava com o tema de lá por um bom tempo resolvi dar uma turbinada no bichinho. :26: Fuçando por ai sobre a codificação HTML dele, encontrei um badge do Tumblr pra colocar no seu site. Abaixo uma screen do meu na sidebar daqui do blog:

Batendo cabeça um pouquinho em como era feita a instalação do mesmo (claro que eu nunca acerto de primeira néam! /:), acabei percebendo que é bem simples, dá um visual bacana pro blog e ainda “chama“ as pessoas, que como eu já disse não o conhecem muito, a darem uma conferida por lá. Nesse post resolvi fazer o tutorial pra você colocar o badge no seu site. Mãos a obra!

1- Vá na página de explicação/apresentação do badge e baixe o arquivo tumblrBadge-1.1.js que se encontra no menu a direita.

2- Feito isso, abra o arquivo com o editor de texto do Windows, altere para o seu username no Tumblr e o número de posts que você deseja que apareça no seu site e salve, vide exemplo abaixo de como ficou o meu:

var settings = {
userName : “claudinhaxinha”, // Your Tumblr user name
itemsToShow : 2, // Number of Tumblr posts to retrieve
itemToAddBadgeTo : “tumblr-badge”, // Id of HTML element to put badge code into
imageSize : 100, // Values can be 75, 100, 250, 400 or 500
shortPublishDate : true, // Whether the publishing date should be cut shorter
timeToWait : 2000 // Milliseconds, 1000 = 1 second
};

3- Agora, envie via FTP, esse arquivo tumblrBadge-1.1.js pra pasta raiz do seu dominio.

4- E para que apareça na sua sidebar os seus posts do photoblog, adicione o seguinte código (sem os asteriscos “*”) aonde você quer que ele apareça na sua página:

<*div id*=*"tumblrBadge"><*center><*script type="text/javascript" src="http://seudominio/tumblrBadge-1.1.js"><*/script><*/center><*/div>

5- Você pode ainda editar o estilo do badge no seu CSS. Abaixo um exemplo (igual como aparece aqui no meu blog):

/* Tumblr Badge */
.tumblr {
width: 150px;
list-style: none;
padding: 0;
}

.tumblr li {
margin-bottom: 1em;
list-style: none;
}

.tumblr img {
display: block;
padding: 5px;
border: 1px solid #e9e9e9;
}

.tumblr em {
font-style: normal;
display: block;
margin-top: 0.2em;

}

.tumblr .tumblr-post-date{
display: block;
font-size: 0.9em;
margin-top: 0.5em;
}

Ofereço esse post a minha querida Patricia que compartilha comigo a paixão pelo Tumblr. Ela até fez um theme (lindoooo ) e disponibilizou-o aqui nesse post. Por hoje é só! Sya!