Como Criar

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 é possível 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.

Criando um tema para colocar no Tumblr

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 ícone de engrenagem, disponível 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 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 é possível 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 resumem 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á mostre um cabeçalho HTML5 básico, há duas variáveis que são interessantes no Tumblr e que 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 conferir 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