Post escrito por Yeltsin Lima
Como disse na primeira parte dessa série, você precisa saber programar em HTML e CSS. Basicamente, você poderia pegar um framework já pronto e apenas customizar o CSS, mas para ensinar mesmo vocês usuários, a criarem um tema para Tumblr, vamos fazer o básico do básico.
Abra o seu editor de HTML preferido. No meu caso, vou utilizar o Adobe Dreamweaver. Tem gente que prefere usar o Notepad++, mas isso está no gosto de cada um. Vou utilizar o HTML5 para ilustrar esse artigo: primeiro, por ele oferecer uma linguagem mais fácil de interpretação, depois por ele ser uma nova tendência no desenvolvimento de websites e também por oferecer melhores padrões no desenvolvimento web (sem falar nas novas tags).
A estrutura padrão de um documento HTML5 é essa:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> </head> <body> </body> </html>
Vamos começar pelo começo… Primeiro, indicaremos um título para esse blog. E não, você não vai colocar o título manualmente. Para isso, insira a tag abaixo, dentro da tag title.
{Title}
Agora vamos inserir duas tags importantes: uma para deixar um ícone ao lado do título do blog (quando você abre uma aba ou uma página no seu navegador):
<link rel="shortcut icon" href="{Favicon}">
E a outra para avisar aos browsers com suporte à RSS, de que o seu site possui um feed. Assim, quem quiser ler o blog fora do navegador, utilizando leitores de RSS, como o Google Reader, podem simplesmente clicar no ícone que aparece na janela.
<link rel="alternate" type="application/rss+xml" href="{RSS}">
Por questões de SEO, é sempre bom colocar uma descrição META no seu site. Essa descrição é feita automaticamente, basta utilizar a tag do Tumblr. Ela segue o seguinte padrão:
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
E se você quiser customizar futuramente o seu tema Tumblr, sem precisar ir no código, basta inserir a seguinte tag no header:
{CustomCSS}.
Ou seja, a estrutura simples de um cabeçalho no Tumblr é a disponível abaixo. Lembrando que a parte style foi deixada em branco para ser editada futuramente.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{CustomCSS}
<style>
</style>
</head>
<body>
</body>
</html>
No próximo post, iremos começar o básico da edição do conteúdo e de funções adicionais. E com o código acima, eu já posso colocar meu blog no ar? Não. O código acima só serve para sistemas de busca e para o Tumblr reconhecer que o seu blog existe.
![[SÉRIE] Como criar o seu tema para Tumblr Parte 1](http://0.gravatar.com/avatar/e4c65f67a01a072744b4ba28b0b7e76e?s=100&d=&r=G "[SÉRIE] Como criar o seu tema para Tumblr Parte 1"){kind=avatar}
Curso o primeiro período de Publicidade & Propaganda na Faculdade Integradas Barros Melo (AESO), sou colaborador do Meio Bit e fundador do DicasWP.
![mail [SÉRIE] Como criar o seu tema para Tumblr Parte 1](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/mail.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 1")
![web [SÉRIE] Como criar o seu tema para Tumblr Parte 1](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/web.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 1")
![wordpress [SÉRIE] Como criar o seu tema para Tumblr Parte 1](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/wordpress.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 1")
Loading ...
tá mal explicado
Veja a segunda parte do Tutorial :) http://www.dicaswp.com.br/2011/06/20/serie-como-criar-o-seu-tema-para-tumblr-parte-2/
Alguem faz um tema de tumblr fofinho para mim?
Por favor :T
ñ entendi
cara poderia me explicar o que são essas tags “blocks” por favor? elas puxam algo do próprio tumblr?
Olá Matheus,
apesar de que eu irei reformular essa série futuramente, eu te explico: essas blocks servem como uma tag de um CMS. Elas puxam e levam a informação até o Tumblr.
No caso dessa: {CustomCSS}, na área de “customização avançada” todo o CSS que você inserir ali, será jogado aí, sem a necessidade de alterar o código toda vez que for acrescentar uma nova funcionalidade ou alterar o tema padrão.
Explicado? :)