Stupid Girls: #MegaTutorial: Fazendo um theme para tumblr.

Bom, eu fiz esse mega tuto para vocês, mas antes de fazer merda leia:
1-QUALQUER COISA tem que creditar.
2- A Base foi feita por MIM, então creditem.
3-Não repassem nem diga que fio você quem fez
Início:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11"><head><title>{Title}</title>

Para começar um theme têm que começar com esse <!DOCTYPE..../> ele serve para que seja visualizado em todos os navegadores.

<link rel="shortcut icon" href="favicon.ico" />

</head>

Substitua o "favi.ico" pela url do seu favicon.

Agora o código abaixo é a parte do CSS, em geral, a maioria das coisas vai lá tipo formatação, seleção colorida, e bláh.

<style type="text/css">

Aí é onde inicia o CSS, pode ser achado também como <style>, mas eu gosto deste code.

/*** Body por Susana(sanchezeidler, blog-stupidgirls.blogspot.com.br/) ***/
body {font:11px verdana; color:#808080; margin:0; text-align:center;
background: #eee url('Link do background') fixed;}

se retirar os meus créditos a base não será entendida corretamente.
Aí é a parte onde vai o background, a fonte e bláh.

/*** Theme por Susana(sanchezeidler, blog-stupidgirls.blogspot.com.br/) ***/
#corpo{width: 770px; text-align:left; margin-left: auto; margin-right: auto;}
#posts {float: right; margin-top: 4px; width: 510px;}
#posts .post{margin-bottom:12px;}
#sidebar {text-align: justify; float:left; width: 250px; margin-top: 5px;
padding: 0px; position: fixed;}
.caixap {background: #ffffff; padding: 5px;}
.caixa {background: #ffffff; padding: 5px;}

Aqui acima é o corpo da side e o corpo das postagens, defina o tamanho e tals.

<body><center>
<div id="corpo"> <div id="sidebar"> <div class="caixa">
Conteudo da sua sidebar </div> </div>

Aí acima e o body, tá vendo o conteúdo da sidebar? Então é lá que você coloca a sua descrição e tals.

<div id="posts">{block:Posts}
{block:Regular}
<div class="post"><div class="caixap">
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}</div></div>
{/block:Regular}
{block:Photo}
<div class="post"><div class="caixap">
<center><img src="{PhotoURL-500}"></center>
{block:Caption}{Caption}{/block:Caption}
</div></div>{/block:Photo}
{block:Photos}
<div class="post"><div class="caixap">
<center><img src="{Photoset-500}"></center>
{block:Caption}{Caption}{/block:Caption}
</div></div>{/block:Photos}
{block:Answer}
<div class="post"><div class="caixap">
<img src="{AskerPortraitURL-24}" align="left">
<strong>{Asker}</strong> perguntou:<br>
{Question}<br><br>
<img src="{PortraitURL-24}" align="left"> <strong>{Title}</strong> respondeu:
{Answer}
</div></div>
{block:Answer}
{block:Quote}
<div class="post"><div class="caixap">"{Quote}
{block:Source}— {Source}{/block:Source}<br>
</div></div>{/block:Quote}
{block:Link}
<div class="post"><div class="caixap">
<a href="{URL}" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
</div></div>{/block:Link}
{block:Chat}
<div class="post"><div class="caixap">
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{block:Lines}
{block:Label}
<b>{Label}</b>
{/block:Label}
{Line}<br>
{/block:Lines}
</div></div>{/block:Chat}
{block:Audio}
<div class="post"><div class="caixap">
<center>{AudioPlayerGrey}</center>
{block:Caption}{Caption}{/block:Caption}
</div></div>{/block:Audio}
{block:Video}
<div class="post"><div class="caixap">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div></div>{/block:Video}
{block:PostNotes}<div class="post"><div class="caixap">
{PostNotes}</div></div>{/block:PostNotes}
{/block:Posts}

Está parte é a parte da postagem não mexa em nada, e novamente CREDITE!

{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">Newer</a>
/{/block:PreviousPage}{/block:Pagination}{block:Pagination}{block:NextPage}
<a href="{NextPage}">Older</a>{/block:NextPage}{/block:Pagination}<p>

Acabando a base a paginação aí a cima, não mexa em nadas.

</div></div></center>
</body>
</html>

Agora feche o theme e pronto! Perfeito tudo, bom a base possivelmente estará desconfigurada, mas com jeitinho você a configura direitinho. Se usarem credite e não retirem os meus créditos.

Sites úteis: Maujor - Madly Luv Extras -Drikoti - Art of Web
Beijos e creditem!

18 de abr. de 2012

#MegaTutorial: Fazendo um theme para tumblr.

Nenhum comentário: