Como criar themes para tumblr


Criando um thema HTML personalizado no Tumblr, você já deve saber que o Tumblr permite personalizar totalmente a aparência do seu blog,  tudo isso é possivel apenas editando o thema Tumblr do seu código HTML.

Claro isso só é recomendado para usuários intermediários e avançados em HTML e CSS.  Se você não entende nada de html você pode começara a aprender e se aventurar a criar seu tema único no Tumblr, ou você pode procurar por themas gratuitos para tumblr, existem centenas de themas para escolher.

Como criar themes para Tumblr

Este post vai mostrar como criar themes Tumblr a partir do zero. Para você que quer criar um Tumblr aconselho que leia nosso artigo que ensina passo a passo como criar um Tumblr:

Como criar um tumblr

Para acompanhar e entender melhor este artigo você deve estar um pouco familiarizado com os conceitos básicos de HTML e CSS.

Eu recomendo a criação de um blog Tumblr para testes. Você pode criar um blog para testes dentro da sua própria conta Tumblr, não é necessário criar outra conta.  Basta ir ao seu painel de controle,  selecione a pequena seta drop-down ao lado do nome do seu blog e depois selecione criar um novo blog Tumblr.

Noções básicas do Tumblr

Antes de começar a editar o código real eu gostaria de lembrá-lo que o blog Tumblr possui diferentes tipos de serviços como: texto, fotos, citações, links, áudio e vídeo.

Ao criar um tema personalizado Tumblr, é importante manter em mente que cada tipo de post difere de campos (variáveis). Por exemplo: um post de texto tem um título e corpo, enquanto um post de foto tem uma URL e legenda.

Introdução

Então como criar um thema Tumblr e onde colocar o código para que tudo funcione. Para iniciar, selecione o icone de engrenagem, disponivel no menu superior do seu painel no Tumblr.  No menu lateral esquerdo, selecione o blog no qual desejar fazer um novo tema.

Uma nova página devera ser carregada, encontre e selecione a opção personalizar, em seguida, selecione “Editar HTML”.  Isso abrirá uma caixa de texto com o código do seu tema atual ou padrão em HTML.

Imagem ilustrativa sobre como criar theme no Tumblr.

Agora é possivel apagar ou editar o que já está na caixa HTML personalizada, e você está pronto para começar a criar seu tema Tumblr.

Tumblr tem dois tipos de operadores especiais utilizados para processar o conteúdo do seu HTML.

  • O sistema de blogs Tumblr usa variáveis (texto entre colchetes) para mostrar os diferentes tipos de informação que você vai encontrar pelo caminho. As variáveis são usadas para inserir dados dinâmicos, como o título do seu blog ou descrição.
  • O sistema de blogs Tumblr trabalha em blocos que são usados para processar um bloco de HTML ou para um conjunto de dados (como as suas mensagens).

Quando você entra em personalizar tema, você vai perceber que pode editar o título, descrição, foto, retrato e URL do seu blog Tumblr. Você pode então mostrar essa informação facilmente em seu thema personalizado, usando as seguintes variáveis no painel de informações:

Seu título do Tumblr: {título}
Sua descrição do Tumblr: {Descrição}
Seu retrato do Tumblr: {PortraitURL-16}

O número ao lado PortraitURL é o tamanho da foto de retrato, sua imagem ou avatar no Tumblr. Se você utilizar 16, o retrato será 16×16 pixels. Você pode escolher  entre 16, 24, 30, 40, 48, 64, 96 e 128 pixels.

Para criar o seu primeiro código Tumblr, vá para a caixa HTML personalizada e adicione o código a seguir e clique em Atualizar.

{Título}
{Descrição}
{PortraitURL-16}

Agora você deve ver o nome do seu blog, sua descrição e seu avatar URL em uma única linha sobre um fundo escuro (você pode selecionar o texto para torná-la visível).

Então seguimos em frente e colocamos as variáveis entre as tags HTML apropriadas:

<h1> <a href=”/”> {Título} </ a> </ h1>
<h2> {Descrição} </ h2>
<img src=”{PortraitURL-16}” />

Tags

Outra coisa que vale a pena mencionar são as tags, se o seu tema Tumblr não tem uma descrição ele pode não exibir a descrição, mas se você verificar o código-fonte, você verá que ele ainda exibe as tags H2, para evitar que isso aconteça use:

{block: Descrição <h2>} {Descrição} </ h2> {/ block: Descrição}

Os blocos do código se resume a isto, se existe uma descrição, é porque é mostrado a seguinte tag h2  juntamente com a descrição.

Agora que você sabe o básico sobre como trabalhar com variáveis no Tumblr é hora de mexer no código HTML principal do tema, veja abaixo um exemplo de cabeçalho de um blog Tumblr, existem duas seções principais que precisamos entender, o “header” (cabeçalho) e o “body” tudo aquilo que ficara visível no seu tema.

<HEAD> e </HEAD> são as tags que delimitam o cabeçalho.

<! DOCTYPE html>
lang=”pr-br”> <html
<head>
<meta charset=”UTF-8″ />
<title> {Título} </ title>
{block: Descrição} <meta name=”description” content=”{Description}” /> {/ block: Descrição}
</ Head>

Embora o código acima já mostra um cabeçalho HTML5 básico, há duas variáveis que são interessantes no Tumblr, vale a pena acrescentar: {RSS} e {Favicon}.

{Favicon} contém a URL do seu favicon e {RSS} contém a URL do seu feed RSS, adicione as novas variáveis para o código HTML, caso desejar habilitar esses recursos em seu novo tema:

<! DOCTYPE html>
lang=”pr-br”> <html
<head>
<meta charset=”UTF-8″ />
<title> {Título} </ title>
{block: Descrição} <meta name=”description” content=”{Description}” /> {/ block: Descrição}
<link rel=”shortcut icon” href=”{Favicon}” />
<link rel=”alternate” type=”application/rss+xml” href=”{RSS}” />
</ Head>

A única desvantagem que eu considero real no Tumblr é o de adicionar o código CSS diretamente na cabeçalho do tema, prefiro utilizar um link para chamar uma folha de estilo externa. Portanto, abra a tag de estilo e defina a cor de fundo do seu tema como branco, {background-color: # fff} ideal para que você possa veja o que está fazendo no tema, veja:

<! DOCTYPE html>
lang=”en”> <html
<head>
<meta charset=”UTF-8″ />
<title> {Título} </ title>
{block: Descrição} <meta name=”description” content=”{Description}” /> {/ block: Descrição}
<link rel=”shortcut icon” href=”{Favicon}” />
<link rel=”alternate” type=”application/rss+xml” href=”{RSS}” />
<style type=”text/css”>
body {background-color: # fff;}
</ Style>
</ Head>

Adicione sempre um título e uma descrição para criar seu Tumblr amigável aos sites de busca, ou seja escolha um nome que tenha a ver com o que você vai postar no Tumblr. Para mudar o nome padrão no Tumblr, que vem como “Untitled” ou também “Sem titulo”, aconselho que leia nosso artigo:

Como mudar o untitled do tumblr

Bom pessoal essa é uma forma bem básica para fazer um thema no tumblr. Minha dica é que estude o código original do thema e vá modificando aos poucos para ver como fica.

Caso tenha alguma sugestão critica ou elogio deixe nos comentários.  Se você conhece outros meios ou um tutorial melhor sobre como criar themes no Tumblr deixe nos comentários que eu leio, aprovo e coloco no artigo.

Para saber mais sobre o assunto, aconselho que leia um artigo do próprio site Tumblr em Inglês que ensina como criar um thema Tumblr passo a passo veja:

http://www.tumblr.com/docs/en/custom_themes


Para localizar outros artigos sobre este assunto use o campo de busca:

60 Comentários

  1. Rute disse:

    entendi algumas coisas :D Obg !

  2. anonimo disse:

    desculpe mas na minha dashboard nao tem personalizar,por favor preste atenção noque esvcrve,o tumblr inteiro é em ingles pensa mais

    • comocriar disse:

      Oi Yasmim Gabriella obrigado por participar do artigo.
      Estou preparando um artigo que ensina de uma modo simplificado como criar uma theme para o Tumblr, aguarde assim que estiver pronto eu te aviso!

  3. Lets disse:

    Personalizar = Customize.

  4. Leticia disse:

    Olha, eu não entendi nada… Tem umas coisas muito complicadas e não dá pra entender nada! Você comfundi a cabeça das pessoas, eu hein!

    • comocriar disse:

      Oi Leticia qual parte você não entende me diga para poder ajudar ok, dei um olhada no seu Tumblr e achei super legal, qualquer coisa estamos a disposição, obrigado por participar do site.

  5. Jessiane disse:

    Bom eu não entendi muita coisa tu poderia explica melhor e ensina como fazer uma base com css?

  6. Marcella disse:

    Oi, estou com um theme base e tal, e lá tá assim:

    /****selecao colorida mude pela cor desejada*****/

    ::-moz-selection {background: #000000; color:#FFFFFF;}

    ::selection {background: #000000; color:#FFFFFF;}

    /****finish*****/
    Eu gostaria de saber o que é isso? tipo, eu sei o código das cores e tudo, mas eu quero saber tipo pra onde vai essa cor, pra que eu possa colocar uma legal. pode me ajudar?

    • comocriar disse:

      Oi Marcella background é a cor do fundo do thema o seu tema deve estar com a cor branca e preta de fundo, eu indico um site para mudar e ter uma base de cores css: html-color-codes.info/ depois de escolher a cor basta mudar isso:
      ::-moz-selection {background: #000000; color:#FFFFFF;}

      ::selection {background: #000000; color:#FFFFFF;}

      por isso, caso queira um fundo laranja e azul:

      ::-moz-selection {background: #FF9500; color:#7C00FF;}

      ::selection {background: #FF9500; color:#7C00FF;}

      Eu recomendo que salve o código inteiro do site em um bloco de notas e faça testes, se não gostar do resultado volte com o código salvo no bloco de notas. Obrigado pela visita.

  7. Anna disse:

    Olá, nao intendi muito bem como fazer um theme! Vcs indicam algum site onde explica? Bom eu indico fazer um video onde possa ensinar a fazer um theme!Mesmo assim agradeço apenas por estarem ajudando as pessoas.
    Abraço

  8. giovanna disse:

    Eu nao consegui achar o personalisar no meu tumblr
    você pode me ajudar ?

  9. giovanna disse:

    *personalizar

  10. Marielle disse:

    Nossa , ja ajudou um pouco , estão de Parabens , obg (:

  11. mariana disse:

    oi eu criei uma pagina e eu n sei como apagar ela fica do lado da dashboard, dai tem o nome da minha pagina e dai tem o nome da outra pagina q eu quero apagar, vc sabe como eu faço pra apaga-la???

  12. julia disse:

    Ai é mt urgente! Eu queria saber como eu mudo o tamanho do meu titulo, eu já peguei um theme pronto feito, mais quando eu mudo o tamanho da letra, muda tudo, e eu quero o titulo maior. Poderia me ajudar? por favor D:

  13. Luquinha disse:

    Perfeito depois de algum tempo mexendo no Tumblr eu consegui fazer um tema para tumblr, valeu pela força viu.

  14. Luciano disse:

    Eu não entendi mais eu vou tentar valew

  15. adrielly disse:

    eu naão sei aonde fica esse negocio ” drop-dow ” alguem pode me informar?

  16. bia disse:

    não entendi absolutamente nada. não sei onde fica esse drop-down então criei uma conta nova. Eu fui copiando e colando tudo e só fui fazendo burrada e eu nao sei onde fica essa tag de estilo.

    • comocriar disse:

      Oi bia, o menu drop-down significa em português algo como menu suspenso, para criar um novo blog procure pelo sinal de + ao lado direito do nome do seu Tumblr, se você não encontrar a tag “estilo” procure por “style”.

  17. Ana disse:

    Achei um pouco confusa a explicação :(

  18. Belf disse:

    Eu consegui criar um tema, pessoal não é difícil, mas precisa entender um pouco de HTML

  19. Carlos disse:

    Obrigado heim pessoa consegui criar o meu próprio tema no Tumblr valeu

  20. Donerson disse:

    Fazer temas no Tumblr é muito simples, valeu pela ajuda!

  21. Magali disse:

    Gostei do artigo, achei meio difícil no começo mas depois eu consegui seguir o tutorial e criar meu próprio tema para tumblr.

  22. Joaquim disse:

    Gostei do Tumblr porque posso fazer meus próprios temas.

  23. Melissa disse:

    Fiquei com preguiça de ler :D
    Acho q é melhor eu continuar procurando themes já prontos mesmo! :D

  24. Klaus disse:

    Quero fazer um theme bonito no Tumblr

  25. Eu nao entendi, e nao eh bem o que eu to querendo saber, eu quero saber como faz pra criar um sidebar, pra por varios gifs nele, links, cores e etc…
    Mas, eu olhando a HTML do meu tumblr, meu cerebro ja da uma luz :)

  26. Paulo disse:

    Adorei peguei uma base para criar o meu próprio theme no Tumblr.

  27. Eduarda disse:

    Eu entendi os primeiros passos, mas uma das minhas únicas duvidas, são as bases. A partir da base, o que eu faço? Como adaptar o theme. Obrigada!

  28. Jeciele disse:

    Oi gostei assim posso criar um thema proprio no tumblr, eu estou modificando um thema seguindo este tutorial, obrigado

  29. duda disse:

    Obrigada!!! Ajudou muito

  30. Josie disse:

    Adorei agora tenho uma base para fazer meu próprio tema no Tumblr

  31. Elaine disse:

    Gostaria de saber como criar uma “caixinha” (não sei come se chama)
    Mais é onde fica a F.a.q, créditos, sobre o tumblr.
    Gostaria de fazer uma pra colocar meus textos!!
    poderia me ajudar??

  32. Cristina disse:

    Obrigado.

  33. Gabi Hall disse:

    Nem do conta de fazer, mas tipo vou fica tentando até ter mais ou menos uma noção. Valeu :)

  34. Duda disse:

    Oi eu não consegui achar , ‘criar tumblr personalizado’ , você pode me ajudar? Meu computador e um mac ai para personalizar e diferente…..

  35. Emanuele disse:

    Bom…apesar de eu não entender muitas coisas e,eu vou correr atras pra aprender,o importante é ter força de vontade né? Tô criando um TUMBLR também,ainda não sei nada vezes nada,mas o Google Chrome no meu computador traduz para português,essa é minha sorte. Bom…agradeço pela força pra fazer gente como eu a aprender a lidar melhor com o TUMBLR. Muito obrigado.

  36. Maisa disse:

    Não sei fazer tumblr porque mas tem como fazer para mim ????

  37. maju disse:

    nao entendi muito bem pode me ajudar quero um theme colorido mas eu não acho :(

  38. Marina disse:

    Oi, olha eu tenho uma pergunta, vários tumblr’s famosos como a-pipokita e o-sorveteiro colocam imagens no lugar de titulos, como eles fazem isso??

  39. Phamella disse:

    Será que você pode me ajudar montar o meu tumblr?
    Bom, é que eu estou mudando um pouco de estilo, e resolvi mudar de verdade, só que eu não entendo muito dessas coisas, eu acho que no meu tumblr não tem como as pessoas me enviarem mensagens.

  40. Gabriela disse:

    Muito obrigado. Agora, eu finalmente sei como criar um theme para o meu Tumblr. BRIGADA *_____________________________________________*

  41. Elisa disse:

    Oi, nao consigo mudar o tema do meu tumblr. Eu seleciono em preview e depois em salvar. Consigo ver o novo tema, mas quando fecho a página de customização continua o msm tema de antes. Eu sempre mudei o tema do meu tumblr, mas esse tema que coloquei por último não quer mudar, pode me dar uma solução?

    • comocriar disse:

      Oi Elisa, você pode tentar apagar e limpar o histórico e cache do seu navegador de Internet.

    • Adriele disse:

      Talvez você não tenha atualizado o seu email, é necessario. Sem atualizar o email não dá pra editar, até a sua Ask fica bugada. Talvez pode ser isso. Entra no email e atualiza.

      • comocriar disse:

        Oi Adriele, obrigado pelo comentario, faz todo o sentido o que você disse, é necessario confirmar a conta no Tumblr pelo email para poder utilizar todos os recursos que o site oferece.

  42. Adriele disse:

    Sempre uso uma base de theme e modifico-os para mim. Aprendi sozinha, mas tem uma coisa que eu não consigo que é criar uma “aba” para a descrição. Por exemplo, algumas bases já vem uma parte reservada escrito “sua descrição aqui”, mas outros themes não vem. Como faço pra criar essa ‘caixa de descrição’ em um theme da qual não há?

  43. Mars disse:

    Você explicou direitinho, mas eu não entendi!
    Eu queria um tutu explicando por completo como cria um tema, você só ensinou a base. Todo mundo só ensina a base, to procurando a meses um artigo ou vídeo que explique como realmente fazer um theme tumblr!
    Ou até mesmo ensinar a fazer um já pronto, não sei se vocês me entendem.
    Mas obrigada :).

Deixe um Comentário