Guia básico do Tumblr – Customização

Tutoriais e dicas

Como muita gente me pergunta várias coisas sobre o Tumblr, resolvi escrever um post que talvez possa ajudar a tirar as dúvidas mais comuns. Esta postagem trata sobre a customização do seu tumblr e tenta dar uma ajuda a quem não tem prática com html ou simplesmente está meio perdido.

Para saber mais sobre o serviço, sobre como criar sua conta e alguns outros detalhes, peço que leia o “O que você precisa saber sobre o Tumblr”. Se você está procurando por um tema, visite “Maçã Verde – Template para Tumblr”.

Customização

Ok, você está na página de customização. No topo da pré-visualização, você encontra o menu principal com “Info”, “Theme”, “Appearance”, “Pages”, “Services”, “Community” e “Advanced”.

Apesar de falar de cada um destes links, o foco do post está nos três primeiros. Além disso, aqui você encontra como colocar no seu tumblr caixas de perguntas do Formspring, nuvens de tags e os seus tweets (para saber como habilitar comentários, leia este post).

Agora vamos ver um pouco mais sobre cada um dos submenus e suas opções.

Info

Em Info estão realmente as informações mais básicas. Muita gente vai preferir nem ir além destas configurações.

Title – Título do seu blog. Se você não tiver nenhuma imagem no cabeçalho, este texto aparecerá.

Description – Descrição. É geralmente o texto que irá aparecer na sidebar do seu tumblr na maioria dos templates. Você pode inserir aqui links, listas e até widgets (como o do formspring, por exemplo).

Html SUPER básico que você pode precisar:

  • Links: <a href=”Endereço do link” title=”Texto que aparecerá se a pessoa deixar o mouse em cima da imagem“>Texto a ser linkado</a>
  • Imagens: <img src=”Endereço da imagem” alt=”Texto que aparecerá no lugar da imagem se ela não abrir“  Title=”Texto que aparecerá se a pessoa deixar o mouse em cima da imagem” />
  • Imagens com links: É só colocar o código html da imagem ao invés do Texto a ser linkado.
  • Negrito: <b>Texto em negrito.</b>
  • Itálico: <i> Texto em itálico.</i>
  • Negrito e itálico: <b><i>Texto em negrito e em itálico.</b></i>

Mais dicas? Google! :)

Portrait Photo – A foto que é seu “avatar” no tumblr. A imagem que você upa aqui aparece na sua Dashboard e na de outros usuários quando você tem uma nova postagem, e também é usada como favicon (aquele ícone pequenininho que representa sua página ali na barra de navegação e nas pastas de Favoritos). Em alguns templates, essa imagem também aparece na sidebar.

URL - O endereço do seu tumblr. Você pode mudá-lo na hora que quiser.

Use a custom domain name - Pra quem quer um domínio .com.br. Exemplo: meutumblr.com.br. Você vai precisar registrar um domínio (normalmente custa uma média de R$30 por ano) e configurá-lo.

Theme

É aqui que toda a mágica acontece :) Em Theme você pode:

(1) escolher um dos temas disponíveis na lista (É só clicar para ter um preview de como vão ficar. Os primeiros são pagos.);

(2) clicar em “Browse more themes…” e procurar mais temas. O Tumblr tem um arquivo cheeeio de temas para você;

(3) clicar em “Use custom HTML” e usar um tema customizado que não está no banco de dados do site (o Maçã Verde, por exemplo), ou customizar o tema que você já selecionou anteriormente;

(4) clicar em “+ Contribute a theme” e contribuir com seu próprio tema para o banco de dados do sistema.

Use Custom HTML

Quando você escolhe editar o html do seu tema, é aberto o campo de customização do código. Pra mexer aí, você vai ter que ter um pouco de noção de html. :)

Para voltar aos temas, clique em “Disable Custom HTML“. Em “Theme Docs” estão as tags usadas pelo sistema. Quando você fizer alterações, clique em “Update preview” para checar.

Algumas dicas:

- Como colocar uma caixa de perguntas do FORMSPRING?

Na página do Formspring, faça login, entre nas Configurações (Settings) e escolha a opção de Widgets no menu que aparece no canto direito. Uma caixa irá aparecer com o código que você usa para colocar o Formspring no seu blog. Encaixe esse código no seu Tumblr (você pode inserir na sua Descrição em Info se não souber onde colocá-lo!).

.

- Como colocar uma nuvem de TAGS?

Este site tem um script de tag clouds. Você só precisa colocar este código em algum lugar do seu Tumblr (você pode inserir na sua Descrição em Info se não souber onde colocá-lo!). O site também dá dicas de como customizar este código.

Para uma pré-visualização, coloque o endereço do seu tumblr no campo disponível à direita da página e clique em preview. Claro que você precisa usar tags no seu tumblr para que isto seja possível! :)

A nuvem de tags não aparece no modo de preview, você precisa salvar e checar no seu tumblr.

- Como colocar meus TWEETS?

É muito provável que seu tema já tenha essa opção. Se sim, você só precisa inserir seus dados em Services (que eu explico mais adiante). Se não, siga esses passos:

Antes de </body> coloque este código:

{block:Twitter}
<script type=”text/javascript” src=”/tweets.js”></script>
{/block:Twitter}

No lugar onde você quer que seus tweets apareçam, coloque o código a seguir. (Se depois de usar esse código você notar que algumas vezes os tweets não aparecem, não se importe muito. É normal. Além disso, os tweets também não aparecem na página de preview, você vai precisar salvar e checar no seu tumblr.)

{block:Twitter}
<div id=”twitter” style=”display:none;”>
<h3><a href=”http://twitter.com/{TwitterUsername}”>Tweets</a></h3>

<div id=”tweets”></div>
</div>

<script type=”text/javascript”>
function recent_tweets(data) {
for (i=0; i<data.length; i++) {
document.getElementById(“tweets”).innerHTML =
document.getElementById(“tweets”).innerHTML +
‘<a href=”http://twitter.com/{TwitterUsername}/status/’ +
data[i].id + ‘”><div>’ + data[i].text +
‘</div></a>’;
}
document.getElementById(“twitter”).style.display = ‘block’;
}
</script>
{/block:Twitter}

Appearance

Em Appearance você vai poder mudar as cores que seu template disponibiliza para alteração não manual e mais algumas coisas:

Geralmente você vai poder mudar a cor de fundo (Background Color), a cor dos links (Link Color), a cor dos títulos dos posts (Post Title Color) e alguns outros. Clique no quadro colorido e escolha a cor mexendo na ferramenta que irá aparecer. Depois de escolher, feche. O preview será atualizado automaticamente após alguns segundos.

Em Title font você escolhe a cor do título do seu blog, o que irá aparecer no cabeçalho.

Em Header image, ao clicar em Upload, você pode escolher uma imagem do seu computador que geralmente substituirá o título do seu blog no cabeçalho. (É assim que faço para os títulos dos meus tumblrs ficarem com aquelas fontes diferentes. Crio imagens e faço o upload.) Você pode usar pngs e gifs, assim dá pra ter o fundo transparente. Se não gostar do resultado, clique em Clear e a imagem será apagada.

Em Background image, ao clicar em Upload, você também vai poder escolher uma imagem do seu computador para ser o fundo do seu tumblr. Se não gostar, clique em Clear e a imagem será substituída pela cor de fundo que você escolheu. (Não sabe onde achar backgrounds? Leia este post!)

Show People I Follow habilita ou desabilita que apareçam os ícones das pessoas que você segue no espaço reservado para isso do seu template.

Show TagCloud, que há no meu template, habilita ou desabilita a nuvem de tags.

Disqus Shortname é onde você insere o seu username do Disqus para habilitar comentários.

Se no fim das contas você não gostar das alterações que fez, clique em Reset defaults e ele volta ao padrão de cores e configurações do template que você está usando.

Pages

Aqui você pode adicionar páginas.  Ex.: Links, Sobre mim, Contato, etc. É só clicar em Add a page e uma janela pop-up abrirá para você editar os dados e conteúdos dela. Confirme clicando em Create Page.

Quando quiser editar a página, é só voltar em Pages que ela estará listada lá. :)




Services

Facebook – posta as últimas atualizações do seu Tumblr no seu facebook.

Twitter – Logue com o seu twitter para que (1) os seus tweets apareçam se esta ferramenta estiver disponível no seu template (ou configure vendo o código que coloquei ali em Use Custom HTML) e (2) você possa escolher se todos os seus posts devem ser twittados automaticamente.

Feedburner - Para quem prefere que o feed do blog seja redirecionado para o feedburner.

Automatically import my… - Como o nome diz, importa automaticamente os feeds que você escolher. Tudo que for atualizado nos feeds escolhidos será postado no tumblr (medo!).

Community

Replies - Permite que as pessoas respondam seus posts. Essa opção aparecerá abaixo dos seus posts na Dashboard.

Let people ask questions – As pessoas fazem perguntas para você. Também irá aparecer na Dashboard. :)

Let people submit posts - Permite que os outros enviem posts para o seu tumblr. Elas poderão enviar os posts através do link http://SEUTUMBLR.tumblr.com/submit.

Advanced

Language – Altera o idioma dos textos padrão do seu tumblr.

Timezone – Use o tempo referente ao seu horário local para que as datas e horas dos seus posts fiquem corretos.

Add custom CSS – Para quem não quer mexer no Use Custom HTML, pode inserir CSS e styles aqui.

Post count – Quantos posts aparecem por página.

Options - (1) Habilitar/Desabilitar fotos em alta resolução (quando a pessoa clicar na foto menor do post irá para a foto do tamanho orignal), (2) fazer com que os links abram todos em novas páginas, (3) permitir temas adaptados para leituras em dispositivos móveis, (4) resumir os posts no Feed, (5) usar urls descritivos, com pequenos títulos, (6) permitir que apareça o botão  “Follow” mesmo para quem não é usuário ou não está logado no Tumblr.

Directory - (1) Permite que seu blog seja listado em serviços de busca, (2) permite que seus posts apareçam em páginas de diretório, buscas e outros links dentro do Tumblr e (3) marca seu tumblr como contendo conteúdo impróprio para menores – que vai gerar um aviso aos seus visitantes antes de abrir sua página.

Chegou no final da customização ou simplesmente gostou do que tá fazendo e tal? Save + Close para salvar e voltar à dashboard; Save para salvar e continuar editando; Cancel para sair sem salvar.

Bom, é isso aí :) Espero que o post seja útil para alguém.

Dicas de temas

Está procurando por um tema bacana? Que tal o Maçã Verde ou Simplicidade, disponíveis aqui no blog para uso grátis?

Ou talvez você prefira ler esse post com várias outras dicas de temas legais?

Veja também:

Se você está procurando ajuda para seu Tumblr, talvez deva buscar no índice, onde estão listados os principais tópicos de esclarecimento que você pode precisar dos posts acima.

517 ideias sobre “Guia básico do Tumblr – Customização

  1.  

    Adorei seu blog só que tenho uma duvida pq sou mtt nova e não é no tumblr e na idade msm e queria saber onde a gente coloca o HTML do tema naquele lugar la pretinho que bota essa coisas?? sou mt ruim >:(((

    Me odeio!!tchau pff me siga no tumblr se tiver me chamo make–happy
    Obrigada

  2.  

    Odorei o blog, fico feliz por querer ajudar pessoas com dificuldade ~ tipo eu assim ~ tenho muitas duvidas ainda com o tumblr ..
    Se puder me ajudar entre em contato comigo (:
    Obg (:

  3.  

    Quero fazer uma pergunta. Assim, quando eu mudo o theme do tumblr no html, às vezes, muda também o avatar, e eu queria que ficasse a minha foto lá em vez de outras pessoas ou até famosos. Ai neste post cita o Portrait Photo, que é o meu avatar no caso né!? Mas, ai não consegui encontrá-lo no html do tumblr e nem sei como trocar, caso eu queira colocar outro theme e deixar um avatar meu mesmo. Se puder me ajudar, ficarei agradecida. Beijo :*

  4.  

    To perdidinha no tumblr….usei o tema simplicidade, mas nao aparece nenhuma função do tumblr nele! Continua aparecendo a tela azul escura qdo eu entro, e qdo clico no meu proprio link(no canto superior direito da tela) aparece o tema com a descrição e só! help????

  5.  

    criei um tumblr a pouco tempo e não sei mecher nada, estou aprendendo por tutorias e pá, gostaria de saber como mudo a foto de avatar ): pode me ajudar ?

  6.  

    pelo amor de Deus,eu tenho um tumblr sobre One Direction,e eu tenho ele ha um tempo,e eu tenho bastante seguidores,e eu estava botando uma nova musica (o q eu sempre fiz) e quando eu fui salvar e ver,tinha mais nada. Ai eu pensei “sera que,se eu reblogar algo novo aparece tudo de volta?” e nada aconteceu,pelo amor de Deus alguem me ajuda!! Se alguem souber me ajudar,me manda dm pelo twitter, @iderhoran

  7.  

    Não estou conseguindo tirar a barra de opções que fica embaixo do post (curtir,repost e compartilhar), quero que apareça apenas a foto,vídeo e/ou gifs. Como eu faço?

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">