15/12/2012

Como fazer themes para o tumblr part. 03 - As tags do tumblr



Tumblr_mex15kopr41qf8em3o1_500_large
 Hoje vamos conhecer as tags do tumblr,e aplicar-lhas no theme. Na verdade, o proprio tumblr explica como aplicar as tags do theme {veja aqui}, então eu vou apenas reforça como EU utilizo essas tags.
 Vamos adicionar ANTES da nossa caixa de postagens (.caixapost) o seguinte:


  1.  {block:Posts}
  2.     .....
  3.   {/block:Posts}
  Block segnifica bloco, e posts quer dizer que o block se refere as postagens do tumblr. Tudo que você postar, responder e reblogar vai aparecer no seu tema através do bloco de postagens (block:Posts). Lembrando que {/block:Posts} indica o fechamento do bloco das postagens.
  Pra vocês entenderem melhor:
   Agora vamos substituir TAGS DO TUMBLR por:
  1.  {block:Text}
  2.  {block:Title}
  3. {Title}
  4.   {/block:Title}
  5.  {Body}
  6.  {/block:Text}
 Esse é o esquema para as postagens de texto, onde:
 {block:Text} abre a postagem de texto, e {/block:Text} fecha a postagem de texto.
 {block:Title} e {/block:Title} são os espaço onde indicam a área do texto.
 {Title} é o título da postagem
 {Body} é o texto.

 Agora vamos adicionar ABAIXO DO BLOCO DE TEXTO:
  1.  {block:Photo}
  2. <center><img src="{PhotoURL-500}" alt="{PhotoAlt}"/ ></center>
  3. {block:Caption}
  4. <div class="caption"> {Caption} </div>
  5. {/block:Caption}
  6. {/block:Photo}
Esse é o bloco de foto. Onde:
 {block:Photo} {/block:Photo} indica o começo e o fechamento do bloco de fotos. Acho que todo mundo sacou esse negocio de bloco, né?!
 <center> </center> são seletores para alinhar a imagem sempre ao centro da sua caixa.
 {PhotoURL-500} o link da foto que foi publicada , ou reblogada. E 500 é o tamanho em px da foto. Você pode estar alterando esse tamanho para 400, 250 (para themes em grade), e 100 px. Nesse valor de 100 você pode ter certeza que ninguem vai ver nada da foto ;(
 {PhotoAlt} se refere a descrição da foto, caso tenha uma.
 {block:Caption} {/block:Caption} é o bloco para descrição da publicação (caso tenha uma).
 {Caption} é a descrição da publicação.

 Agora vamos adicionar o bloco PhotoSet, que é um álbum de fotografias.
  1.  {block:Photoset}
  2. <center> {Photoset-500} </center>
  3. {block:Caption}
  4. <div class="caption" >{Caption}</div>
  5. {/block:Caption}
  6. {/block:Photoset}
 {Photoset-500} o tamanho de cada foto do álbum.
 Caption continua a ser a descrição da publicação.

 Agora o quote, ou citação se preferir:
  1.  {block:Quote}
  2. {Quote}
  3. {block:Source}
  4. <div style="text-align: right">— {Source}</div>
  5. {/block:Source}
  6. {/block:Quote}
 Onde:
{Quote} é o conteúdo da citação.
{Source} é a fonte da citação, ou créditos se preferir.
<div style="text-align: right"> é a personalização direta desse quote, onde o texto vai ficar a direita da citação.

 Bloco de links:
  1. {block:Link}
  2. <a href="{URL}" class="link" {Target}>{Name}</a>
  3. {block:Description}
  4. <div class="description">{Description}</div>
  5. {/block:Description}
  6. {/block:Link}
Onde:
{URL} é o link desejado, e {Target} abre esse link em uma nova janela.
<div class="description">{Description}</div> {/block:Description} é a descrição do link.

Chat:
  1.  {block:Chat}
  2. {block:Title}
  3. {Title}
  4. {/block:Title}
  5. <ul class="chat">
  6. {block:Lines}
  7. {block:Label}
  8. <span class="label"><b>{Label}</b></span>
  9. {/block:Label}
  10. {Line}<br>
  11. {/block:Lines}
  12. </ul>
  13. {/block:Chat}
Onde:
{block:Title} {Title} {/block:Title} é o título do chat.
{block:Lines} {/block:Lines} é a linha onde fica o dialogo.
{Label}

Video e áudio:
  1. {block:Video}
  2. {Video-500}
  3. {block:Caption}
  4. <div class="caption">{Caption}</div>
  5. {/block:Caption}
  6. {/block:Video}
  7. {block:Audio}
  8. {AudioPlayerBlack}
  9. {block:Caption}
  10. <div class="caption">{Caption}</div>
  11. {/block:Caption}
  12. {/block:Audio}
Onde:
{Video-500} tamanho do video. Pode ser alterado em 400 ou 250.
{AudioPlayerBlack} o play do áudio na cor preta. Pode ser substituido por {AudioPlayerWhite} (play branco) e {AudioPlayerGrey} (play verde).

Ask (não aparece no customize)
  1. {block:Answer}
  2. <center><div style="background:#f1f1f1;font:normal 11px georgia;color:#fff;padding:7px; text-align: justify; float: left; width: 97%;">{Question}</i></div></center>
  3. <div style="padding-left: 15px;"><img src="{AskerPortraitURL-16}" /> <b><span style="text-transform: capitalize;">{Asker}</span></b></div>
  4. {Answer}
  5. {/block:Answer}
Onde:
<center><div style="background:#f1f1f1;font:normal 11px georgia;color:#fff;padding:7px; text-align: justify; float: left; width: 97%;">{Question}</i></div></center> vai deixar a pergunta no centro, com background cinza bem claro, fonte tamanho 11 e família georgia, com cor de fonte branca, e um aprofundamento de 7px, e etc.
{AskerPortraitURL-16} é o tamanho da foto do autor da pergunta. Pode ser alterado para 24, 30, 40, 48, 64, 96 e 128 px.
{Asker} é o nome com o link da pessoa que perguntou, ou a palavra Anonimo.
{Answer} a sua resposta.

Tags, data, reblog e notes:
  1. {block:HasTags}{block:Tags}&nbsp;#<a href="{TagURL}">{Tag}</a>,&nbsp;{/block:Tags}{/block:HasTags}</a> |
  2.  Postado em {Day}/{MonthNumberWithZero}/{Year} às {12Hour}:{Minutes}{AmPm}
    com <a href="{Permalink}">{NoteCount}</a> notes!
    ({block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}/{block:ContentSource}<a href="{SourceURL}" target=blank>original</a>{/block:ContentSource}) | 
  3. <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog!</a>
Onde:
{Tag} vai ser o marcador da foto.
{Day}/{MonthNumberWithZero}/{Year} é a data, o mês com um zero na frente e o ano que foi publicado ou reblogado.
{12Hour}:{Minutes}{AmPm} hora que foi postado.
{NoteCount} notes da postagem.
{block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} mostra de quem você reblogou.
{block:ContentSource}<a href="{SourceURL}" target=blank>original</a>{/block:ContentSource} mostra de quem é o post original.
<a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">Reblog!</a> link para reblogar o post da sua pagina.

----- Resultado do html
{aqui}
----- Resultado no theme
                          
                            

Enfim, esses são alguns resultados. No próximo passo vamos começar a fazer algumas edições, como título; formatação, personalizados.

 

Nenhum comentário:

Postar um comentário

Criticas e sugestões são sempre bem-vindas ;)
Se gostou de algo, comente, e compartilhe. ;))

 
Tecnologia Blogger e templante desenvolvido por Juliana Sousa. Proibida cópia ou reprodução. Confira os créditos.