Como fazer um theme para Tumblr?

Em Como usar a Internet por André M. Coelho

O objetivo deste post é compartilhar algumas informações sobre o Tumblr e como você pode usá-lo efetivamente para seus próximos projetos, inclusive fazendo um theme/tema personalizado para deixar o site com sua cara. As mesmas regras se aplicam ao desenvolvimento de um site tradicional com o tumblr, mas qualquer inclusão, como arquivos CSS ou JavaScript, precisa ter URLs absolutas (mais sobre isso daqui a pouco).

Vamos dar dicas tanto para profissionais quanto pra quem quer fazer um pra uso pessoal.

Como fazer um theme para tumblr: começando os trabalhos

Para começar, primeiro você precisa criar uma conta no Tumblr. Defina uma e navegue até a área de configurações após o login. Para cada cliente, normalmente você deve criar dois blogs do Tumblr ou uso meu próprio Tumblr de teste e crio um blog protegido por senha para desenvolvimento e visualização antes do site ser lançado. Para os fins desta demonstração, incluí o design de blog mais recente da minha banda (músicas em breve :). Dentro da barra lateral, você vê meu blog de teste e o blog principal com o Tumblr da banda.

Como criar theme tumblr: avançando na criação

Agora vamos para a base do Tumblr: depois que você tiver seu site projetado e finalizado, é hora de passar para o fatiar e cortar em cubos para otimizar o Tumblr. Existem dois tipos de operadores para renderizar conteúdo em seu HTML existente. Você precisará criar um shell HTML básico ao iniciar um tema personalizado.

Alguns termos-chave e linhas úteis:

Variables: são usadas para inserir dados dinâmicos, como o título ou a descrição do seu blog.
Blocks: são usados para renderizar HTML ou definir dados como um link anterior ou uma postagem no blog.

Há uma lista completa dos diferentes tipos de variáveis e blocos que você pode atribuir ao seu HTML, mas estes acima são os principais. Em vez de copiar um site, eu recomendo que você visite diversas páginas com códigos de tumblr e se familiarize com os diversos tópicos. Seria melhor fazer isso antes de iniciar seu design. Existem muitos recursos disponíveis para qualquer tema do Tumblr que podem ser usados ou não dentro de seu próprio design.

Você deseja ter um plano para todos os tipos de postagens disponíveis no Tumblr. Codifique-os e estilize-os adequadamente para cada blog que você criar e, obviamente, consulte a documentação para incluir outros elementos essenciais como navegação, paginação, metadados, republicações, comentários (notas) etc.

{block: Posts} Este é um invólucro ou classificação para qualquer postagem {/ block: Posts}

{block: Text} Para postagens baseadas em texto {/ block: Text}

{block: Photo} Para postagens de fotos {/ block: Photo}

{block: Photoset} Para postagens de fotos no formato de galeria {/ block: Photoset}

{block: Quote} Para cotações {/ block: Quote}

{block: Link} Para links {/ block: Link}

{block: Audio} Para postagens de áudio {/ block: Audio}

{block: Video} Para postagens em vídeo {/ block: Video}

Então, onde coloco meu código para tema de tumblr?

Para importar seu HTML recém-polido para o seu tema personalizado, você precisará fazer login e selecionar o blog apropriado na barra lateral esquerda, dentro da seção Configurações do painel. Procure o título intitulado Tema e clique no botão Personalizar.

Depois de clicar no botão, você é recebido com uma nova página com algumas opções de edição personalizadas para o seu site. Essa área é ótima para ver atualizações de quaisquer alterações feitas no editor de código do Tumblr, mas eu recomendo o desenvolvimento do site usando um editor de código básico e um navegador desde o início. Depois que o código estiver em vigor, você poderá inserir as variáveis personalizadas baseadas no Tumblr e bloquear elementos no HTML. Em seguida, basta copiar e colar suas alterações em cada página personalizada do Tumblr.

Para editar o HTML, clique no botão Editar HTML (sim, é fácil) e uma nova janela lateral será exibida. Você verá algum HTML com o tema base que estiver personalizando. Exclua ou altere esse código para corresponder ao seu próprio estilo e design e clique em Atualizar visualização para ver a atualização da página à sua direita. Uma coisa que não posso enfatizar o suficiente é usar URLs absolutos para hospedar suas imagens, CSS, JavaScript e tudo o que você incluir, porque elas não serão vinculadas corretamente dentro do Tumblr se você não. Você pode usar com facilidade um serviço de hospedagem de imagens ou arquivos gratuitamente. Faça isso apenas se você tiver certeza absoluta de que os links não cairão e deixarão seu site sem estilos ou imagens, etc.

E se eu quiser mais páginas personalizadas do tumblr?

Fácil. Depois de clicar no botão Editar HTML, como mencionado acima, role para baixo até a seção de páginas da barra lateral à esquerda que aparece. Aqui você verá o exemplo que forneci com páginas adicionais do site da minha banda. Você pode arrastar a ordem deles e editar cada um individualmente.

Basta clicar no link + Adicionar uma página para criar outra. A cada nova página, você precisará atualizar o conteúdo e a navegação se, por exemplo, você tiver estados ativos que mudam via CSS. Isso deve ser um acéfalo, se você já trabalhou com HTML e CSS antes. Caso contrário, verifique os inúmeros tutoriais e postagens sobre esse assunto neste site.

Uma coisa a notar é que, quando você clicar em editar ao lado de uma página existente, verá uma nova janela do navegador como abaixo. Certifique-se de ter o layout personalizado ativo na lista suspensa, enquanto cria um layout personalizado para cada página. A opção existe para usar um layout padrão e ter um link de navegação redirecionado para outro.

Características avançadas para arrumar no tema tumblr

Além de criar seus próprios estilos CSS e documentos HTML, você pode usar alguns dos recursos avançados do Tumblr, incluídos em cada blog. Logo abaixo da seção Páginas, você verá uma seção Avançada com algumas opções disponíveis.

A maioria deles é auto-explicativa. Se o seu site não tiver um layout otimizado para dispositivos móveis, como o meu, eu ativaria a opção de layout otimizado para dispositivos móveis. URLs descritivos tornam o link permanente para qualquer postagem muito mais identificável. Por fim, se você estiver preocupado, insira um CSS personalizado abaixo, mas é fácil incluir seu próprio CSS por meio de um link absoluto.

Resumo ds personalização do tumblr

Usar o Tumblr é uma ótima opção para qualquer pessoa interessada em manter um blog ativo ou até mesmo desenvolver um site completo.

Há muito mais personalizações disponíveis, como a incorporação do Google Analytics, opções personalizáveis que podem ser ativadas e desativadas no painel de configurações, a conexão com outros aplicativos como Instagram, Facebook e mais, mas o processo geral foi muito fácil e altamente recomendado para qualquer pessoa interessado em uma nova maneira de hospedar um site baseado em blogs.

Você criou um projeto em torno do Tumblr? Que dicas você adicionaria? Deixe-nos saber nos comentários.

Sobre o autor

No final da década de 90, André começou a lidar diretamente com tecnologia ao comprar seu primeiro computador. Foi um dos primeiros a ter acesso à internet em sua escola. Desde então, passou a usar a internet e a tecnologia para estudar, jogar, e se informar, desde 2012 compartilhando neste site tudo o que aprendeu.

Veja também