Post escrito por Yeltsin Lima
Iniciado o Como criar o seu tema para Tumblr, cujo primeiro post pode ser acessado na barra superior, começaremos agora a editar o conteúdo. A parte vital de um tema e que permitirá o mesmo de ser acessado pelos leitores.
A estrutura HTML básica do nosso blog é essa:
<div id="website">
<header>
</header>
<section id="container">
<section id="content">
</section>
<section id="sidebar">
</section>
</section>
<footer>
</footer>
</div>
E como disse anteriormente, você precisa ter o básico de conhecimento em HTML e CSS para entender do que estou falando. Se, somente se, eu estendesse o ensino para HTML e CSS, esse tema teria muito mais do que 10 partes, e acredite, fica bem cansativo.
Essa é a nossa estrutura básica na criação de um tema para Tumblr (calma que vou explicar o que significa cada tag dessa):
<section id="posts">
{block:Posts}
{block:Text}
<article class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<section class="text">
{Body}
</section>
</article>
{/block:Text}
{block:Photo}
<article class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="img"/>
{block:Caption}
<section class="caption">
{Caption}
</section>
{/block:Caption}
</article>
{/block:Photo}
{block:Photoset}
<article class="post photoset">
<section class="imgphotoset">
{Photoset-500}
</section>
{block:Caption}
<section class="caption">
{Caption}
</section>
{/block:Caption}
</article>
{/block:Photoset}
{block:Quote}
<article class="post quote">
<blockquote>
{Quote}
</blockquote>
{block:Source}
<section class="source">
{Source}
</section>
{/block:Source}
</article>
{/block:Quote}
{block:Link}
<article class="post link">
<section class="postlink">
<h4><a href="{URL}" class="link" {Target}>{Name}</a></h4>
</section>
{block:Description}
<section class="description">
{Description}
</section>
{/block:Description}
</article>
{/block:Link}
{block:Chat}
<article class="post chat">
<section class="titlechat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
</section>
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</article>
{/block:Chat}
{block:Video}
<section class="post video">
<section class="videoembed">
{Video-500}
</section>
{block:Caption}
<section class="caption">
{Caption}
</section>
{/block:Caption}
</section>
{/block:Video}
{block:Audio}
<section class="post audio">
<section class="audioplayer">
{AudioPlayerBlack}
</section>
{block:Caption}
<section class="caption">
{Caption}
</section>
{/block:Caption}
</section>
{/block:Audio}
</section>
{/block:Posts}
</section>
Tá. E o que diabos significa essas tags? Vamos lá.
{block:Posts}{/block:Posts}
Significa que iniciamos o loop de posts. Funciona exatamente como no WordPress, serve para criar uma continuidade de artigos, ou seja, exibe os artigos.
{block:Text}
Nessa parte, iniciamos o tipo de post de Texto. Para isso, é necessário que seja exibido um título do artigo:
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
Sendo o {block:Title} o início do conteúdo dinâmico. {Permalink} é o endereço daquele artigo de post, vocês verão eles mais vezes nesse tutorial. E o {Title} se refere ao título do artigo.
{Body}
Aqui é que fica todo o conteúdo do artigo.
{block:Photo}
Tem a mesma função do {block:Text}, mas é voltado para a exibição de artigos de imagens.
<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="img"/>
Esse código acima exibe uma imagem no tamanho máximo de 500 pixels de largura. Não importa qual tamanho você defina, ele irá redimensionar a imagem para 500px. O {PhotoAlt} é utilizado para definir o campo “alt”, que como conhecemos no HTML, é responsável por exibir um texto, enquanto a imagem não carrega.
{block:Caption}
<section class="caption">
{Caption}
</section>
{/block:Caption}
O caption é como o nome diz: a legenda daquela foto específica.
{block:Photoset}
Funciona no mesmo padrão da imagem. Só que ao invés de exibir apenas uma imagem, exibe uma galeria de imagem, ou em inglês: “PhotoSet”. Também possui um caption, e exibe da mesma forma que é exibido no Photo.
{block:Quote}
Conteúdo dinâmico responsável pela exibição de citações, frases.
<blockquote>
{Quote}
</blockquote>
O {Quote} exibirá a frase que você digitou em seu dashboard. E exibirá em forma de “blockquote”, ou seja, um espaço voltado exclusivamente para citações. Ao invés de Caption, o Quote tem uma forma diferente de exibir a pessoa que citou aquela frase:
{block:Source}
<section class="source">
{Source}
</section>
{/block:Source}
Ou seja, a fonte da citação.
{block:Link}
Voltado para a exibição de links.
<section class="postlink">
<h4><a href="{URL}" class="link" {Target}>{Name}</a></h4>
</section>
{block:Description}
<section class="description">
{Description}
</section>
{/block:Description}
Como se pode notar pela estrutura acima, ele irá exibir o {Name} do endereço, o {URL}, ou seja, o endereço, ex: http://www.google.com, e a {Target} que será “_blank”, “_self”, ou como você definir em seu dashboard. Ele ainda exibe a {Description}, ou seja, a descrição referente aquele link.
{block:Chat}
Esse é um código bem chato. Se refere à possibilidade de adicionar conversações. Possui um título de chat:
<section class="titlechat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
</section>
E possui as linhas referentes aquela conversação:
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
Sendo o {Label} referente a quem escreve aquela mensagem e {Line} sendo a mensagem escrita por aquele autor.
{block:Video}
Funciona da mesma forma que o campo {block:Photo}, sendo o “embed”, o seguinte código
{Video-500}
Também possui um caption, mas que funciona exatamente como o photo, ou seja, dispensa explicações.
{block:Audio}
Bem parecido com o campo acima, o {Block:Audio} exibe um player contendo uma música, um aúdio, enviado pelo Dashboard. Atente a esse detalhe:
{AudioPlayerBlack}
Você pode ter um player na cor preta, como é o que está sendo exibido acima. Mas também pode ter os seguintes temas:
{AudioPlayer} - Tema padrão
{AudioPlayerWhite} - Tema na cor branca
{AudioPlayerGrey} - Tema na cor cinza
{AudioPlayerBlack} - Tema na cor preta
Como disse em todas as outras, o Block:Audio também possui um campo caption, e ele funciona exatamente da mesma forma que os outros.
Com esses códigos, você pode até colocar o seu tema no ar. Mas ele ficará sem nenhuma personalização. No próximo capítulo, iremos aprender algumas técnicas mais avançadas, para a customização do nosso tema. Todas explicadas detalhadamente.
![[SÉRIE] Como criar o seu tema para Tumblr Parte 2](http://0.gravatar.com/avatar/e4c65f67a01a072744b4ba28b0b7e76e?s=100&d=&r=G "[SÉRIE] Como criar o seu tema para Tumblr Parte 2"){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 2](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/mail.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 2")
![web [SÉRIE] Como criar o seu tema para Tumblr Parte 2](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/web.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 2")
![wordpress [SÉRIE] Como criar o seu tema para Tumblr Parte 2](http://www.dicaswp.com.br/wp-content/plugins/wp-biographia/images/wordpress.png "[SÉRIE] Como criar o seu tema para Tumblr Parte 2")
Loading ...
muito bom! quero mais
aonde q coloca o {AudioPlayer} ?
Oiii!! Posta ai a continuação, por favoooooooooorrrrrr!!!!!!
posta a continuação, to precisando ):
cade a parte 3?? ‘-’
CAAAAADE A PARTE TRES ):
nessa semana sai :)
Poxa cade a parte três?? posta logo pls
Poxa em setembro você falou que ia postar já estamos no final de outubro e nada!
Posta pt. 3, ou já postou e eu nem vi?
Onde tá a parte 3? *–*
Essa série será reformulada. Peço que aguarde um pouquinho, vocês vão gostar :P