********* TUTORIAL : COMO FAZER THEMES *********
Por : Thamiris Figueiredo (carpe-dieem). Não copie, por favor. Se for usar, credite e não saia repassando o código, dizendo que ele é seu, PORQUE NÃO
É. Faça SEU PRÓPRIO tutorial. Copiar é muito feio. 1.Abra o bloco de notas ou até mesmo o customize do seu tumblr.
2.Abriu ? Agora, coloque as seguintes tags na EXATA ORDEM a seguir : <html> <head> <title>{Title}</title> </head> <style type="text/css"> /***********Conteúdo de personalização****************/ </style>
<body onkeydown="return false">
/***********Conteúdo dos posts, sidebar, i-frame, paginação****************/ </body>
</html>
Agora vamos ao que cada item significa:
<title>{Title}</title> : É aquele nome que aparece na barrinha lá em cima do navegador.
O title no caso vai ser o título que você colocou naquele espaço "title" do seu customize.
<head> e </head> : Onde fica o conteúdo de scripts, o código da janela de energia, código contra cópias, etc.
<style type="text/css"> e </style> : Aonde fica o conteúdo de personalização de suas "divs".
<body onkeydown="return false"> : bloqueia o teclado
<body onkeydown="return false"> e </body> : Todo o conteúdo que será visível em seu blog.
3. Agora vamos à folha de estilos, ela é responsável pela aparência do seu blog e seu conteúdo deverá ficar entre as tags :
<style type="text/css"> e </style> - Pegue o código que está neste link :
http://static.tumblr.com/rcq8orx/GHzlvsi3l/css.txt E coloque ele entre as tags acima.
- Você pode edita-lo da forma que achar melhor, adicionar o que achar melhor também. Porém, vou dar-lhes algumas dicas de fontes, tabelas de cores, estilos, etc;
FONTE : Tahoma, Geórgia, Arial, Verdana. COR DE FONTES DO TEXTO : #666;
CORES EM GERAL : http://www.colourlovers.com/palettes
ESTILOS DE BORDAS : Dashed ( traçado), dotted (pontilhado), solid (sólida). MARGIN-BOTTOM DA SIDE E DA CAIXA : 15px a 20px.
4. Agora, vamos ao conteúdo da side, ele deverá ficar entre as tags : <div id=”sid”>
<div id=”side”> *********CONTEÚDO********</div> </div>
- É só algum conteúdo a esta div e pronto, se você quiser deixar um texto, separado de uma foto, basta você criar duas caixas, por exemplo :
<div id=”sid”>
<div id=”side”> *********CONTEÚDO1********</div> <div id=”side”> *********CONTEÚDO2 ********</div> </div>
5. Agora, vamos as tags de posts Pegue o código aqui neste link :
http://static.tumblr.com/rcq8orx/oVvlvsig9/tags_de_posts.txt Este código deverá ficar entre as tags <body> e </body>
Explicando os código : Todas as tags são em par, ou seja, tem uma que abre e outra que fecha.
{block:Posts} : Abre o conteúdo dos seus posts. {/block:posts} : fecha os conteúdos dos seus posts. <!-- textos -->
{block:Text} {block:Title}
<center><div class="title"><a href="{Permalink}">{Title}</a></div></center> {/block:Title}
<div>{Body}</div><br>
<!--PHOTOS E PHOTOSETS--!> {block:Photo}
<center>{LinkOpenTag}<a href="{Permalink}"><img
src="{PhotoURL-500}"class="bd"width="600"title="{PhotoAlt}"/></a>{LinkCloseTag}</center> {block:Caption}{Caption}{/block:Caption} {/block:Photo} {block:Photoset} <center>{Photoset-500}</center> {block:Caption}{Caption}{/block:Caption} {/block:Photoset}
<!—FIM DE PHOTOS E PHOTOSETS --!> <!—QUOTE--!>
{block:Quote}
<center><div class="title"> <b>"</b>{Quote}<b>"</b></div></center> {block:Source}<div align="right"> <div class="source"><b>-</b> {Source}</div></div>{/block:Source}
{/block:Quote}
<!—FIM DE QUOTE--!>
<!—LINKS --!> {block:Link}
<center><a href="{URL}" class="link"{Target}><div class="title">{Name}</div></a></center> {block:Description}<div align="left">{Description}</div>{/block:Description} {block:PostNotes}<br>{PostNotes}{/block:PostNotes} {/block:Link} <!—FIM DE LINKS--!> <!—CHATS --!> {block:Chat} {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title} <div id="chat"> <ul>{block:Lines}<li> {block:Label}<b>{Label}</b>{block:Label} {Line} </li>{/block:Lines}</ul> </div> {/block:Chat} <!—FIM DE CHATS--!>
<!—VIDEOS --!> {block:Video}
<center> {Video-500} </center>
{block:Caption}{Caption}{/block:Caption} {/block:Video}
<!—FIM DE VIDEOS--!>
<!—PERGUNTAS E RESPOSTAS --!> {block:Answer}
<a href="{AskerURL}"><img src="{AskerPortraitURL-48}"class="bdimg" width="48" height="48" align="left";></a>
<div class="asker"><span></span> perguntou:<br><br>{Question}</div> <div class="ask2">{Answer}<br></div> {/block:Answer}
<!—FIM DE PERGUNTAS E RESPOSTAS --!> <!—AUDIO --!>
{block:Audio}
<div style="float:right; margin-top: 6px;"><i>Música ouvida {PlayCount} vezes</i> {block:ExternalAudio}(<a href="{ExternalAudioURL}">download!</a>){/block:ExternalAudio}</div> <center>{AudioPlayerWhite}</center> {block:Caption}{Caption}{/block:Caption} {/block:Audio} <!—FIM DE AUDIO--!>
{block:PostNotes}<br>{PostNotes}{/block:PostNotes} : Faz aparecer no seu tumblr quem que deu like ou reblogou.
<div class="tagsb2">{Block:Date} Posted on {MonthNumberWithZero}/ {DayOfMonth}/{Year} at {12Hour} {AmPm} {/Block:Date}<b>/</b> <a class="notes">{NoteCount}<a href="{Permalink}"> notes !</a><b>/</b> <a href="http://tmv.proto.jp/reblog.php?post_url={Permalink};">(reblog this!) / <a href="{ReblogParentURL}">Via</a> {/block:RebloggedFrom}</a>
{block:ContentSource}• (<a href="{SourceURL}"
target=blank><b>Source</b></a>){/block:ContentSource}</div>
São as informações dos posts, como data, hora, quantos notes tem, etc... <div class="tagsb">{block:HasTags} Tagged :{block:Tags} #
{/block:Posts}</div>