Como Criar Um Tema Simples para o Tumblr

Como criar um tema simples para o Tumblr
Isso uma das coisas que mais reclamo do Blogger. extremamente complicado desenvolver temas para a plataforma. Inclusive, as buscas sobre Como criar um tema para Blogger s retornam tutoriais sobre WordPress! Criar um tema para Tumblr uma coisa extremamente fcil e s precisa ter conhecimento em CSS e HTML. Diferentemente do WordPress que necessrio ter um conhecimento bsico em PHP. O Tumblr utiliza duas formas de operadores especiais para renderizar o contedo de forma dinmica no HTML. So as variveis - que inserem dados dinmicos como a descrio do blog e o ttulo:
<html> <head> <title>{Title}</title> </head> <body> ... </body> </html>
E os blocos, que inserem alguns tipos de dados como artigos, ou links como Pgina anterior. Esses blocos so os famosos loops utilizados no WordPress.
<html> <body> <ol id="posts"> {block:Posts} <li> ... </li> {/block:Posts} </ol> </body> </html>
Primeiro, abra o seu editor de arquivos favorito. Algumas pessoas preferem o bloco de notas, vou utilizar a soluo gratuita chamada TextWrangler para Mac OS X. Vamos iniciar com um documento .html padro, sem nenhuma tag especial (estou utilizando o HTML 5 para ensinar. mais fcil, mais rpido e mais atual!).
<!doctype html> <html> <head> <title></title> </head> <body> </body> </html>
Mas, cad a abertura do PHP? ASP? No precisa. A idia do Tumblr exatamente essa: a criao de temas feita por puro HTML. Bastando inserir as variveis correspondentes e/ou blocos. No header, temos as seguintes tags padro:
<title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}">
A tag {Title} obviamente vai chamar o ttulo. O tag {Favicon} vai chamar aquele cone de 1616 em PNG ou formato ICO. E a tag {RSS} vai chamar o endereo do feed do seu blog (sim, apesar de pouco usado, Tumblr possui feeds). O que mais diferente a tag de descrio que gerada atravs de um bloco.
{block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}
Eu no sou muito f da estrutura que o Tumblr usa para montar os artigos. Ela usa uma lista em formato ol, ou seja, uma lista ordenada para criar os artigos. Nesse caso, eu prefiro usar os termos do novo HTML 5. Como vocs podem ver, eu abri o cdigo do body com uma div (para aplicar o efeito dele centralizado, e coloquei as informaes principais em um header.
<div id="container"> <header> <h1>{Title}</h1> {block:Description} <h2>{Description}</h2> {/block:Description} </header> </div>
Agora que criamos o cabealho do nosso site, chegou a hora de chamarmos os blocos correspondentes a cada tipo de categoria: Textos, Fotos, Galeria de Fotos, Frases, Link, Chat, Video e Adio. Sim voc vai ter que criar uma classe para cada um desses tipos. Ajuda a customizar o tema depois. Esse o exemplo da tag para o bloco de textos.
<section id="page"> {block:Posts} {block:Text} <article class="text"> <header> {block:Title}
<h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} </header> <section class="content"> {Body} </section> </article> {/block:Text} {/block:Posts} </section>
Perceba que inicalmente chamamos a tag {block:Posts}. ela que vai indicar que: ali que comea o loop do blog. Depois passaremos a chamar cada block para cada categoria. Como acima temos o exemplo s dos textos, comeamos com {block:Text}. E perceba que o bloco de ttulo se repete em todos. Mas, ali ele no vai repetir o ttulo do blog mas, na verdade, o ttulo do artigo. J a varivel {Body} o que representa o incio do texto do blog. Todo o texto escrito (e as tags do texto, como negrito e itlico) sero preenchidas automaticamente ali. Para o artigo de imagens, temos uma coisa bem interessante:
{block:Photo} <article class="photo"> <figure> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> <figcaption> {block:Caption} {Caption} {/block:Caption} </figcaption> </figure> </article> {/block:Photo}
Voc percebeu que o cdigo para o link da imagem tem um nmero 500 escrito? Para que serve isso? Bom, voc pode usar at 6 tipos diferentes de tamanhos de fotos: {PhotoURL-500} Imagens com largura de at 500 pixels {PhotoURL-400} Imagens com largura de at 400 pixels {PhotoURL-250} Imagens com largura de at 250 pixels {PhotoURL-100} Imagens com largura de at 100 pixels {PhotoURL-75sq} Uma verso quadrada da foto com 7575 pixels {PhotoURL-HighRes} A verso em alta resoluo da foto Essa estrutura se repete para todas as outras categorias existentes. Baixe nossa tema. Em breve vou soltar a documentao da criao de tema do Tumblr, totalmente em portugus e livre para cpias!
Hospede tudo no Tumblr!
O Tumblr possui algumas regras bem chatas para hospedar seu tema l, principalmente se o seu interesse fazer parte do Theme Garden. 1. Hospede TODOS os arquivos no Tumblr. Seja imagens, css, arquivos Javascript, entre outros. Utilize a pgina de envio de arquivos estticos. So permitidos at 5MB por arquivo e 15MB por dia. 2. No permitido usar widgets de terceiros como Disqus, Flickr, entre outros. Tem que usar os cdigos disponveis na documentao. 3. Precisa suportar todos os tipos de categorias (lembra que eu citei l em cima?). 4. Precisa suportar as tags padro do sistema. 5. Precisa seguir os padres do Tumblr. Essas regras, claro, s so vlidas se o seu objetivo enviar seu tema para o Theme Garden. Caso queira usar somente em seu blog, ignore tudo isso. Se voc quiser dar uma olhada na documentao, ela est aqui: toda em ingls. Atualizao: Como indicado pelo Luan Muniz (aka @layermind), no rodap do tema, eu havia esquecido de fechar as duas tags li. Agora est disponvel a verso atualizada e vocs podem efetuar o downloadpor aqui (ou no link l em cima).
Como exibir artigos relacionados no Tumbr (RelPosts Widget)

O Eduardo Miranda entrou em contato comigo pelo formulrio de contato do blog, falando sobre um plugin bem interessante para Tumblr que ele desenvolveu. A finalidade mostrar artigos relacionadosao artigo atual. Existem uma infinidade de plugins desse tipo para WordPress mas, assim como ele tambm sentiu falta, no encontrei nenhum que realiza tal funcionalidade no Tumblr.
O desenvolvedor explica como o plugin funciona:

Como utilizar?
Primeiro, ele pega todas as tags do artigo; Depois chama a API do Tumblr em busca de artigos com as mesmas tags; Adiciona o ttulo e endereo do artigo na pgina.
Para inserir em seu Tumblr, basta copiar o cdigo do plugin e inserir no local em que voc deseja que ele exiba a parte de Artigos relacionados. Lembre-se de inserir na parte {block:Posts} {/block:Posts}. E se o seu tema j possuir os blocos {block:HasTags} e {block:Permalink} lembre-se de inserir o cdigo dentro deles.
{block:HasTags} {block:Permalink} <--! Start Tumblr Related Posts widget --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>
<script src="http://relposts.googlecode.com/svn/trunk/relposts.js?tags={block: Tags}{Tag},{/block:Tags}" type="text/javascript"></script> <--! End Tumblr Related Posts widget --> {/block:Permalink} {/block:HasTags}
Opes avanadas
Voc pode fazer diversas customizaes no plugin, como, por exemplo: alterar a estilizao do plugin; alterar o tamanho mximo de caracteres exibidos no ttulo do artigo (padro 60) e a quantidade de artigos que sero exibidos na lista (padro 8). A documentao do widget est disponvel em ingls no site do desenvolvedor.
Artigos Relacionados:
Como exibir artigos relacionados no Tumbr (RelPosts Widget) Documentao do Tumblr em Portugus (Parte 1) [SRIE] Como criar o seu tema para Tumblr Parte 2 Colocando cone (favicon) em seu website [SRIE] Como criar o seu tema para Tumblr Parte 1 Termos que originaram visitas para esse artigo: como criar um tema para tumblr como fazer um tema para tumblr como criar um theme como fazer temas para tumblr como fazer um theme como fazer um theme para tumblr como fazer themes para tumblr como criar themes para tumblr criar tema para tumblr como criar um theme para tumblr

Como Criar Um Tema Simples para o Tumblr

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Como Criar Um Tema Simples para o Tumblr

Transféré par

Droits d'auteur :

Formats disponibles

Como criar um tema simples para o Tumblr

Hospede tudo no Tumblr!

Como exibir artigos relacionados no Tumbr (RelPosts Widget)

O desenvolvedor explica como o plugin funciona:

Vous aimerez peut-être aussi