10 novembro 2014

Como fazer um theme

| |
OI! Eu estive meio ocupada nesses dias, então não pude postar com a mesma frequência com que eu estava postando, mas agora está tudo resolvido.

Esse é um tutorial meio... hãn... grande. É preciso paciência. No meu primeiro theme, na hora de colocar a ask, bugou tudo e eu quase tive um ataque cardíaco.

Se quiserem, para ir mais rápido, vocês podem ir usando o HTMLedit e depois é só passar pro tumblr para personalizar os último detalhes.

Também vou passar uma listinha de tutoriais e dicas para ajudar vocês.




O que precisa saber

O que fica acima de </style> é o CSS. Num blogger é onde fica os códigos de menus, efeitos, etc;
O que fica abaixo de <body> é o que fica em HTML/JavaScript;

O básico
1 - Primeiro vamos começar colocando as tags principais.

<html>
<head>
</head>
<style>
</style>
<body>
</body>
</html>

2 - Entre as tags <head> e </head>, cole:

<title>{title}</title>
<link rel="shortcut icon" href="{favicon}" />

Agora eu vou dar um pequena explicação. O que fica entre <title></title> é o título do tumblr. Se colocar {title} entre essa tag, o título que você escolheu para o seu blog quando você o criou continuará o mesmo, mas se colocar outro, o título do tumblr mudará.
{favicon} é quase igual a {title}, o que muda é que se você manter o {favicon} o que ficará no seu favicon será o icon que você usa, mas se colocar algum(a) link/url de algum favicon, ele mudará.

3 - Agora chegou a parte em que alteramos a aparência do seu theme. Entre <style></style> cole esse código:

body {background: #efefef url("LINK DO FUNDO");
padding:4px;
font-family: Georgia;
font-style: normal;
font-size: 11px;
color: #ccc;
text-align: left;
line-height:14px;

Se você não colocar nenhum background onde se pede, a cor que está no código (#efefef) será a cor do background. | font-family e font-size são o nome da fonte e o tamanho, respectivamente. | color é a cor da fonte (#ccc é cinza) | text-align é o alinhamento do texto. Pode ser left (esquerda), right (direita) e justify (justificado) | line-height é o tamanho da linha. Não há necessidade de mudar.

4 - Agora vamos para a sidebar. Acima de </style> cole:

#side {position:fixed; margin-left:125px; margin-top: 100px;}

O margin-left determina se irá para a direita (número positivos) ou esquerda (números negativos) | margin-top determina se irá para cima (números negativos) ou para baixo (números positivos)

5 - Agora vamos fazer a caixas que ficam na sidebar (nós, que utilizamos o blogger, chamamos de gadgets). Ainda estamos no <style>

.boxsid {
letter-spacing: 0px; /* Espaço entre as letras */    
text-align: justify; /* Alinhamento do texto */    
color: #ccc; /* Cor da fonte */      
width: 250px; /* Largura da caixa */    
font: normal 11px georgia; /* Configuração da fonte */    
background: #fff; /* Cor do fundo */    
padding: 5px;}
     
.imgsid {}

Não apaguem o .imgsid {}

6 - Agora vem a personalização da área dos posts. Cole acima de </style> o código abaixo:

#post {
top: 230px; /* Move os posts para para cima ou para baixo */
left: 500px; /* Move os posts para para esquerda ou direira */
width:562px; /* Largura */
position: absolute;}
.caixa {
background: #FFF; /* Cor do fundo */
padding: 5px;
margin-bottom: 1px; /* Distância entre posts */
left:110px; /* Move para esquerda ou direita */
border-radius:2px; /* Bordas arredondadas */
}

7 - Para personalizar negrito, itálico, tachado e sublinhado, cole esse código entre <style></style>

b, strong, bold {color: #a1a1a1;}
u, span.sublinha {cursor: help; text-decoration: none; border-bottom: 1px dashed #28B5BF;}
i, em{color: #ddd;}
s {color: #000;}

border-bottom: 1px grossura dashed tipo de linha; dashed é traçado; dotted: pontilhado; solid: linha sólida # cor

8 - Agora personalizaremos os links. Para fazer isso, só é preciso colar o código abaixo entre <style></style>

a:link, a:visited, a:active {color: #CDCDC1; text-shadow: 0 0px 0px #ffffff; letter-spacing: 1px; text-decoration: none;}
a:hover {color: #f1f1f1; -webkit-transition-duration: .79s;}

9 - Agora, abaixo de <body>, cole:

<div id="side">

<div class="imgsid"><img src="{image:Sidebar}" style="width:180px;"></div>

<div class="boxsid">{description}</div><br>
</div>

Em {description} é semelhante a {title}, que eu expliquei no início do post. Pode colocar outra coisa se quiser. Já em {image:Sidebar} você pode colocar alguma imagem. Também é onde coloca-se o que ficaria no HTML/JavaScript, sabe, o <div class="ghf"... bla bla bla

10 - Acima de </body>, cole as seguintes tags.

<div id="post">
{block:Posts}
<div class="caixa">
<!--textos-->
{block:Text}
{block:Title}
{Title}
{/block:Title}
{Body}
{/block:Text}
<!--foto-->
{block:Photo}
<center><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="550px"/></center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
<!--photoset-->
{block:Photoset}
<center>{Photoset-500}</center>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
<!--quote-->
{block:Quote}
{Quote}
{block:Source}
<div style="text-align: right">— {Source}</div><
{/block:Source}
{/block:Quote}
<!--link-->
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
<!--chat-->
{block:Lines}
{block:Label}
<span>{Label}</span>
{/block:Label}
{Line}
{/block:Lines}
<!--video-->
{block:Video}
{Video-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
<!--audio-->
{block:Audio}
{AudioPlayerBlack}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}
<!--ask-->
{block:Answer}
<img src="{AskerPortraitURL-40}">
{Question}
perguntou: {Asker}
{Answer}
{/block:Answer}
<!--infomações-->
{block:HasTags}{block:Tags}&nbsp;#<a href="{TagURL}">{Tag}</a>,&nbsp;{/block:Tags}{/block:HasTags}</a> | postado em {DayOfMonth}/{MonthNumberWithZero}/{Year} as {12Hour}:{Minutes}{AmPm} via <a href="{Permalink}">{NoteCount}</a> notes!({block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}/{block:ContentSource}<a href="{SourceURL}" target=blank>source</a>{/block:ContentSource}) | <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};" target="_blank">reblog this!</a>
</div>
<br>
{/block:Posts}

Basicamente, é isso.

.......

Para achar tutoriais com mais facilidade, abra o tumblr na dashboard/painel (www.tumblr.com/dashboard) e substitua o /dashboard por /tagged/tutorial_que_você_quer. Por exemplo, eu quero personalizar a minha ask, então eu vou procurar por tumblr.com/tagged/estilo-de-ask. Você também sempre pode procurar no Google.

Coisas que você não deve esquecer de personalizar são as notes, ol.notes (exemplo), ask, permalink (esse é muito importante). Vou deixar alguns links aqui para vocês. Lembrem-se: se não funcionar, não se desespere, apenas tente outro tutorial.

+ Ol.notes:
https://www.tumblr.com/tagged/ol.notes
http://cssand-html.tumblr.com/post/31612572416
http://html-and-resources.tumblr.com/post/30620280840/notes-personalizados

+ Notes:
http://html-and-materials.tumblr.com/post/38255859326/estilos-de-notes
http://htmluv.tumblr.com/post/64395054171
http://designs-gallery.tumblr.com/post/56485313159/notes-simples-02

+ Ask:
https://www.tumblr.com/tagged/estilos-de-ask

Eu não testei os códigos, então não sei se funcionam. Se não funcionarem, é só fuçar em tumblrs que você acha.

Qualquer coisa, me chamem na ask.

4 comentários:

  1. Seu tutorial é muito útil! Pena que eu não tenho tumblr, quer dizer tenho mas não posto nada por que não sei usar, só uso para hospedar arquivos :p

    www.s-freeze.blogspot.com

    ResponderExcluir
  2. Olá ^-^. Ótimo tutorial! Não fazia ideia de como fazer um theme, sempre procurei como fazer e nunca encontrei. Realmente irá ajudar bastante! Obrigada :3

    ~XoXo, Cat In My Coffee

    ResponderExcluir
  3. Awn Gosh! Que layout lindo! Faz tempo que não passo por aqui, saudades desse cantinho <3

    O tutorial nem é tão grande pois é super útil. Você nos ensinou a entender realmente alguns códigos. Amei ^^

    Adolescente Nerd // Oficial {}

    ResponderExcluir
  4. Oie! Esse tutorial é perfeito para quem ainda não entende muito de html, algumas coisas foram úteis para mim também ♥ Admito que não sou muito fã de fazer themes no Tumblr, não me adapto muito bem, aushuash.

    Até mais! || ♡ miki candy。

    ResponderExcluir

« »